glTF-Sample-Viewer 项目教程
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()
]
};
这些配置文件定义了项目的构建和运行方式,确保项目能够正确地打包和部署。