web3D前端：一文讲清，three.js能够对gltf文件做什么？-CSDN博客

本文链接：https://blog.csdn.net/2401_87844374/article/details/147556034

Three.js 是一个广泛用于 Web 上 3D 图形渲染的 JavaScript 库，可以对 GLTF（GL Transmission Format）文件进行以下多种操作：

一、加载和渲染

高效加载：

- Three.js 提供了专门的GLTFLoader来加载 GLTF 文件。这个加载器能够快速解析 GLTF 文件的结构，包括场景信息、模型几何数据、材质、纹理以及动画等内容，并将其转换为 Three.js 可以理解和渲染的格式。
- 例如：

const loader = new THREE.GLTFLoader();
     loader.load('your_model.gltf', function (gltf) {
       scene.add(gltf.scene);
     });

逼真渲染：

- 一旦加载完成，Three.js 可以利用 WebGL 的强大功能对 GLTF 模型进行高质量的渲染。它能够处理光照、阴影、材质属性等，使模型看起来非常逼真。
- 例如，可以设置不同类型的光照，如环境光、点光源、平行光等，来照亮模型，展现出模型的细节和立体感。

二、模型操作

变换操作：

- 可以对加载后的 GLTF 模型进行平移、旋转和缩放操作，以调整模型在场景中的位置和姿态。
- 例如：

gltf.scene.position.set(x, y, z);
     gltf.scene.rotation.set(angleX, angleY, angleZ);
     gltf.scene.scale.set(scaleX, scaleY, scaleZ);

动画控制：

- 如果 GLTF 文件包含动画数据，Three.js 可以播放、暂停、循环播放这些动画，并且可以控制动画的播放速度。
- 例如：

const mixer = new THREE.AnimationMixer(gltf.scene);
     const action = mixer.clipAction(gltf.animations[0]);
     action.play();

可以通过设置动画的时间缩放因子来调整播放速度，如action.timeScale = 2会使动画播放速度加倍。

三、材质和纹理处理

材质修改：

- 可以在运行时修改 GLTF 模型的材质属性，如颜色、透明度、金属度、粗糙度等。
- 例如：

const material = gltf.scene.children[0].material;
     material.color.setHex(0xff0000); // 设置材质为红色
     material.opacity = 0.5; // 设置透明度为 0.5

纹理替换：

- 可以替换 GLTF 模型中的纹理图像，以改变模型的外观。
- 例如：

const textureLoader = new THREE.TextureLoader();
     const newTexture = textureLoader.load('new_texture.jpg');
     gltf.scene.children[0].material.map = newTexture;

四、场景整合与优化

场景组合：

- 可以将多个 GLTF 模型加载到同一个场景中，构建复杂的 3D 场景。可以根据需要调整每个模型的位置、旋转和缩放，以实现特定的布局。
- 例如：

const loader1 = new THREE.GLTFLoader();
     const loader2 = new THREE.GLTFLoader();
     loader1.load('model1.gltf', function (gltf1) {
       loader2.load('model2.gltf', function (gltf2) {
         scene.add(gltf1.scene);
         scene.add(gltf2.scene);
         gltf2.scene.position.set(10, 0, 0); // 将第二个模型向右移动 10 个单位
       });
     });

性能优化：

- Three.js 提供了一些性能优化的技术，如层级细节（LOD）、遮挡剔除等，可以应用于 GLTF 模型以提高渲染性能。
- 例如，可以使用 LOD 技术根据模型与摄像机的距离自动切换不同细节程度的模型，当模型离摄像机较远时，使用低细节的模型来减少渲染的复杂度。

五、交互与事件处理

交互响应：

- 可以为 GLTF 模型添加交互功能，例如当用户鼠标点击模型时，触发特定的行为或显示信息。
- 例如：

const raycaster = new THREE.Raycaster();
     const mouse = new THREE.Vector2();
     function onMouseClick(event) {
       mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
       mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
       raycaster.setFromCamera(mouse, camera);
       const intersects = raycaster.intersectObjects(gltf.scene.children);
       if (intersects.length > 0) {
         console.log('Clicked on model');
       }
     }
     window.addEventListener('click', onMouseClick);

事件驱动的动画：

- 可以根据特定的事件触发模型的动画。例如，当用户按下某个键时，播放模型的特定动画。
- 例如：

document.addEventListener('keydown', function (event) {
       if (event.key === ' ') {
         const action = mixer.clipAction(gltf.animations[1]);
         action.play();
       }
     });