threejs traverse 遍历api

在 Three.js 中，traverse 是一个非常有用的方法，用于遍历场景或对象的层级结构（Hierarchy）。它允许你访问对象及其所有子对象（包括嵌套的子对象），从而对它们进行操作、检查或修改。

---

结论

traverse 方法用于递归遍历对象及其所有后代节点（子对象、孙对象等），适用于需要批量处理场景中对象的场景。

---

详细展开

1. 方法定义

traverse 是 Object3D 类的一个方法，因此所有继承自 Object3D 的对象（如 Mesh、Group 等）都可以使用它。

语法：

object.traverse(callback);

• 参数：

  • callback：一个回调函数，会对当前对象及其所有后代节点依次调用。

• 行为：

  • 回调函数会先作用于当前对象，然后递归地作用于其所有子对象。
  • 如果某个子对象本身还有子对象，则会继续递归遍历。

---

2. 常见用途

(1) 查找特定对象

通过 traverse 遍历场景树，可以找到具有特定属性的对象。例如，根据名称查找对象：

scene.traverse(child => {
    if (child.name === 'targetObject') {
        console.log('找到了目标对象:', child);
    }
});

(2) 标记热点

在加载模型后，可以通过 traverse 遍历所有子对象，并为符合条件的对象添加自定义属性（如 userData）。

model.traverse(child => {
    if (child.isMesh && child.name === 'button') {
        child.userData.hotspot = true; // 标记为热点
        child.userData.info = '这是一个按钮'; // 添加额外信息
    }
});

(3) 批量修改材质

可以使用 traverse 修改场景中所有对象的材质属性。例如，将所有网格对象的颜色改为红色：

scene.traverse(child => {
    if (child.isMesh) { // 检查是否为网格对象
        child.material.color.set(0xff0000); // 设置颜色为红色
    }
});

(4) 统计对象数量

通过 traverse 统计场景中的对象总数或某种类型对象的数量。

let meshCount = 0;
scene.traverse(child => {
    if (child.isMesh) {
        meshCount++;
    }
});
console.log(`场景中有 ${meshCount} 个网格对象`);

---

3. 示例代码

以下是一个完整的示例，展示如何使用 traverse 查找并修改模型中的热点对象。

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer);

// 加载模型
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
    const model = gltf.scene;
    scene.add(model);

    // 使用 traverse 遍历模型，标记热点
    model.traverse(child => {
        if (child.isMesh && child.name === 'button') {
            child.userData.hotspot = true; // 标记为热点
            child.userData.info = '这是一个按钮'; // 添加额外信息
        }
    });
});

// 渲染循环
camera.position.set(0, 2, 5);
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

---

4. 注意事项

(1) 遍历范围

traverse 会递归遍历当前对象及其所有后代节点。如果只需要遍历直接子对象，可以使用 children 属性：

for (const child of object.children) {
    console.log(child);
}

(2) 性能优化

对于复杂的场景，traverse 可能会遍历大量对象，导致性能开销较大。如果只需要查找特定类型的对象，可以在回调函数中尽早返回以减少不必要的遍历。

scene.traverse(child => {
    if (child.isMesh) {
        console.log(child);
        return; // 找到网格对象后停止进一步遍历
    }
});

(3) 只读 vs 修改

traverse 的回调函数既可以用于只读操作（如查找对象），也可以用于修改对象的属性（如更改材质、位置等）。但需要注意避免在遍历过程中破坏场景结构。

---

总结

traverse 是 Three.js 中用于遍历对象层级结构的强大工具，适用于查找、修改或统计场景中的对象。通过结合条件判断和回调函数，可以灵活地实现各种功能，例如标记热点、批量修改材质或统计对象数量。