如何在Threejs中光线投射隐藏的对象或不添加到场景

Question

我使用THREE.JS创建了BoxGeometry几何形状的1000个隐藏对象。我将object.visible = false设置为隐藏每个对象，但这会导致光线投射/交互不起作用。

我希望隐藏对象可以提高性能。

我可以通过在每个对象上设置material.visible = false来隐藏盒子对象，但是我的应用程序的性能仍然很糟糕。

如何以性能友好的方式实现与隐藏对象的所需光线投射交互？

Answer 1

实现所需条件的一种方法是不将Box对象添加到场景中，以确保未渲染它们，然后将其直接传递到THREE.Raycaster以确定这些框中的任何一个是否相交已经发生了。

例如，您可以从THREE.Raycaster原语中创建一个ray对象，然后将Box对象的数组传递给.intersectObjects()方法以确定射线相交。

在代码中，看起来像这样：

// ray is your intersection primitive
const raycaster = new THREE.Raycaster(ray.origin, ray.direction);

// boxObjects is an array of THREE.Object3D's representing your 1000 boxes
const intersectionResult = raycaster.intersectObjects(boxObjects)