glTF-Sample-Viewer 项目教程

2026-01-16 09:55:18作者：瞿蔚英Wynne

1. 项目的目录结构及介绍

glTF-Sample-Viewer/
├── assets/
│   ├── environments/
│   ├── models/
│   └── textures/
├── build/
├── docs/
├── src/
│   ├── css/
│   ├── js/
│   └── index.html
├── test/
├── .gitignore
├── .gitmodules
├── LICENSE
├── package.json
├── README.md
└── rollup.config.js

assets/: 包含环境和模型的资源文件。
- environments/: 环境贴图文件。
- models/: glTF 模型文件。
- textures/: 纹理文件。
build/: 构建输出目录。
docs/: 项目文档。
src/: 源代码目录。
- css/: 样式文件。
- js/: JavaScript 文件。
- index.html: 主页面文件。
test/: 测试文件目录。
.gitignore: Git 忽略文件配置。
.gitmodules: Git 子模块配置。
LICENSE: 项目许可证。
package.json: 项目依赖和脚本配置。
README.md: 项目说明文档。
rollup.config.js: Rollup 构建配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.html，这是 Web 应用的入口点。它包含了加载和初始化 glTF 模型的基本结构和脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>glTF Sample Viewer</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="viewer"></div>
    <script src="js/main.js"></script>
</body>
</html>

index.html: 主页面文件，包含了加载样式和脚本的链接。
css/style.css: 样式文件，定义了页面的外观。
js/main.js: 主 JavaScript 文件，包含了初始化和渲染 glTF 模型的逻辑。

3. 项目的配置文件介绍

package.json: 包含了项目的依赖、脚本和其他元数据。

{
  "name": "gltf-sample-viewer",
  "version": "1.0.0",
  "description": "Physically-Based Rendering in glTF 2.0 using WebGL",
  "main": "src/index.html",
  "scripts": {
    "dev": "rollup -c -w",
    "build": "rollup -c"
  },
  "dependencies": {
    "three": "^0.127.0"
  },
  "devDependencies": {
    "rollup": "^2.45.2",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-sourcemaps": "^0.6.3"
  }
}

rollup.config.js: Rollup 构建配置文件，定义了如何打包和输出项目文件。

import copy from 'rollup-plugin-copy';
import sourcemaps from 'rollup-plugin-sourcemaps';

export default {
  input: 'src/js/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/index.html', dest: 'dist' },
        { src: 'src/css', dest: 'dist' },
        { src: 'assets', dest: 'dist' }
      ]
    }),
    sourcemaps()
  ]
};