gltf-avatar-threejs 项目教程
1. 项目的目录结构及介绍
gltf-avatar-threejs/
├── assets/
│ ├── models/
│ └── textures/
├── src/
│ ├── components/
│ ├── scenes/
│ └── main.js
├── public/
│ └── index.html
├── package.json
├── README.md
└── webpack.config.js
- assets/: 存放项目所需的模型和纹理资源。
- models/: 存放 glTF 模型文件。
- textures/: 存放纹理图片文件。
- src/: 项目的源代码目录。
- components/: 存放可重用的 Three.js 组件。
- scenes/: 存放场景定义文件。
- main.js: 项目的主入口文件。
- public/: 存放公共资源,如 HTML 文件。
- index.html: 项目的入口 HTML 文件。
- package.json: 项目的依赖管理文件。
- README.md: 项目的说明文档。
- webpack.config.js: 项目的 Webpack 配置文件。
2. 项目的启动文件介绍
项目的启动文件是 src/main.js
。这个文件负责初始化 Three.js 场景、相机和渲染器,并加载必要的资源。以下是 main.js
的主要内容:
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加载模型
const loader = new GLTFLoader();
loader.load('assets/models/avatar.glb', function(gltf) {
scene.add(gltf.scene);
}, undefined, function(error) {
console.error(error);
});
// 添加控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
3. 项目的配置文件介绍
package.json
package.json
文件定义了项目的依赖、脚本和其他元数据。以下是该文件的主要内容:
{
"name": "gltf-avatar-threejs",
"version": "1.0.0",
"description": "A Three.js project for rendering glTF avatars",
"main": "src/main.js",
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"dependencies": {
"three": "^0.127.0"
},
"devDependencies": {
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.2"
}
}
- name: 项目名称。
- version: 项目版本。
- description: 项目描述。
- main: 项目的主入口文件。
- scripts: 定义了启动和构建项目的脚本。
- dependencies: 项目运行时的依赖。
- devDependencies: 开发时的依赖。
webpack.config.js
webpack.config.js
文件定义了 Webpack 的配置,包括入口文件、输出目录、模块解析规则等。以下是该文件的主要内容:
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path