javascript - 一种精美的方式来获取设置Box3的对象，以便在Three.js中进行简单的相机碰撞检测

一旦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

最佳答案

关于three.js javascript对象的妙处在于，它们是javascript对象。这意味着您可以将所需的任何属性添加到Box3中，包括“从中设置对象”。

为了遵循three.js约定，我建议对添加的任何自定义属性使用.userData包装器属性。这样可以避免与将来版本中可能添加的任何内部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;
}