Three.js中遍历Object3D对象时如何终止traverse遍历流程

Three.js traverse 遍历无法终止的解决方案 #

问题根因

Three.js 内置的traverse方法默认不支持中途终止遍历，它内部的递归逻辑不会响应回调函数的return返回值，也无法在回调作用域内用break跳出外层递归，因此你使用return、break语句无法生效是该方法的固有特性。

可用解决方案

• 方案1：自定义支持中断的递归遍历（最稳妥，无副作用）
  自己实现轻量的递归遍历逻辑，通过回调返回值控制是否终止：

  // 可中断遍历工具函数
  function traverseInterruptible(obj, callback) {
    // 回调返回true则终止整个遍历
    if (callback(obj)) return true
    if (obj.children?.length) {
      for (const child of obj.children) {
        if (traverseInterruptible(child, callback)) return true
      }
    }
    return false
  }
  
  // 调用示例
  traverseInterruptible(scene, x => {
    if (x.userData) {
      // 匹配到目标，返回true终止遍历
      console.log('找到目标节点', x)
      return true
    }
    return false
  })
  

• 方案2：使用Three.js内置find方法（v151及以上版本支持）
  v151版本后Object3D新增了find方法，遍历到第一个符合回调返回true的节点后会自动终止遍历，无需自己实现逻辑：

  const targetNode = scene.find(x => !!x.userData)
  // targetNode就是第一个携带userData的节点，找到后自动停止遍历
  

• 方案3：自定义异常跳出（不推荐，仅应急使用）
  可以通过抛出自定义异常的方式强制打断递归，但该方式会破坏正常执行流，可能引发不可预期的问题，仅在临时调试等场景使用：

  try {
    scene.traverse(x => {
      if (x.userData) {
        throw new Error('TRAVERSE_INTERRUPT')
      }
    })
  } catch (err) {
    // 仅捕获终止遍历的自定义异常，避免吞掉其他报错
    if (err.message !== 'TRAVERSE_INTERRUPT') throw err
    console.log('遍历已终止')
  }
  

内容的提问来源于stack exchange，提问作者daniel