批量修改模型材质：递归遍历模型层级
在Three.js中，使用.traverse()方法可以递归遍历场景中的所有对象。这对于批量修改模型的材质非常有用，特别是当你加载了一个复杂的GLTF模型时。
递归遍历方法.traverse()
.traverse()方法允许你访问场景图（scene graph）中的每个对象。通过这个方法，你可以检查对象的类型，并对其进行操作。
示例代码：遍历模型节点
javascript
// 假设 'gltf' 是加载的GLTF模型对象
gltf.scene.traverse(function (obj) {
if (obj.isMesh) { // 判断是否是网格模型
console.log('模型节点', obj);
console.log('模型节点名字', obj.name);
}
});查看GLTF模型的默认材质
Three.js在加载不同格式的模型时，可能会应用不同的默认材质。通过控制台可以查看这些材质。
javascript
gltf.scene.traverse(function (obj) {
if (obj.isMesh) {
console.log('gltf默认材质', obj.material);
}
});批量修改GLTF模型的材质
你可以使用.traverse()方法来批量修改所有网格模型的材质。
示例代码：批量修改材质
javascript
gltf.scene.traverse(function (obj) {
if (obj.isMesh) {
// 重新设置材质
obj.material = new THREE.MeshLambertMaterial({
color: 0xffffff, // 设置材质颜色
});
}
});完整示例代码
以下是一个完整的示例，展示如何在Three.js中加载GLTF模型，并使用.traverse()方法批量修改其材质。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Traverse and Modify Materials</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const loader = new GLTFLoader();
loader.load('path/to/your/model.gltf', function (gltf) {
scene.add(gltf.scene);
gltf.scene.traverse(function (obj) {
if (obj.isMesh) {
// 重新设置材质
obj.material = new THREE.MeshLambertMaterial({
color: 0xffffff, // 设置材质颜色
});
}
});
camera.position.set(0, 0, 5);
render();
});
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
</body>
</html>