javascript - 获取设置 Box3 的对象的优雅方法，用于 Three.js 中的简单相机碰撞检测

Question

一旦 Box3 注册了一个命中，我想获取用于设置 Box3 的对象(使用 Box.setFromObject)。

目前，我将 Box3 推送到一个数组，然后将对象(设置 Box3 的对象)推送到另一个数组:

var cube = new THREE.Mesh( geometry, material );
cube.name = "box0";
scene.add( cube );
var bbox = new THREE.Box3();
bbox.setFromObject( cube );
bboxList.push(bbox);
bboxObjectNameList.push(cube.name);

然后每帧检查两个数组:

  for(i=0;i<bboxList.length;i++)
  {
    if(bboxList[i].containsPoint(camera.position)) {
      hitName = bboxObjectNameList[i];
      hitObj = scene.getObjectByName(hitName);
    }
  }

有人知道更好的方法来查找设置 Box3 的对象吗？

Three.js r84

Answer 1

三个 js javascript 对象的伟大之处在于它们是......javascript 对象。这意味着您可以向 Box3 添加任何您想要的属性，包括“设置它们的对象”。

为了遵循 3.js 约定，我建议对您添加的任何自定义属性使用 .userData 包装器属性。这可以避免与 future 版本中可能添加的任何内部 Three.js 属性发生命名冲突。

实际上，这会让你的代码看起来像这样

var bbox = new THREE.Box3();
bbox.setFromObject( cube );
bbox.userData = { sourceObject: cube };

...

if (bboxList[i].containsPoint(camera.position)) {
  hitObj = bboxList[i].userData.sourceObject;
}