threejs glb模型贴图

### 如何在 Three.js 中为 GLB 模型添加贴图 为了给导入的 GLB 文件中的对象应用纹理，通常需要先加载模型并访问其材料属性。下面是一个完整的流程说明以及代码实现。 #### 加载 GLTF/GLB 模型 首先通过 `GLTFLoader` 来异步获取 `.gltf` 或者 `.glb` 格式的资源文件： ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load( '/models/your-model.glb', // 资源路径 function ( gltf ) { scene.add( gltf.scene ); // 遍历网格节点来修改材质 traverseMeshes(gltf.scene); }, undefined, function ( error ) { console.error( error ); } ); function traverseMeshes(object){ object.traverse(function(child){ if(child.isMesh){ applyTextureToMaterial(child.material); } }); } ``` 这段脚本定义了一个辅助函数用于遍历场景树结构内的所有网格实例，并调用了另一个方法去更新这些网格所使用的材质[^1]。 #### 应用自定义纹理至现有材质上 接着就是具体怎样把图片作为纹理映射到物体表面的过程了: ```javascript function applyTextureToMaterial(material){ let textureLoader = new THREE.TextureLoader(); material.map = textureLoader.load('/textures/diffuse.jpg'); // 设置漫反射贴图 material.normalMap = textureLoader.load('/textures/normal.png'); // 法线贴图可选 material.roughnessMap = textureLoader.load('/textures/roughness.jpg');// 粗糙度贴图可选 material.metalnessMap = textureLoader.load('/textures/metallic.jpg'); // 金属度贴图可选 material.needsUpdate = true; // 更新材质标记位以便渲染器重新编译着色程序 } ``` 这里假设已经准备好了相应的纹理文件放在服务器上的 `/textures/` 目录下。对于不同的材质类型可能还需要调整其他参数比如 shininess（光泽度）、emissive （发光颜色）等等取决于实际需求[^2]。 另外值得注意的是当涉及到更复杂的材质如 ShaderMaterial 定义时，则需确保传入正确的 uniform 变量值供 GPU 使用[^3]。