The impact of rays on performance in three.js

The content of this article is collected from multiple platforms

Don't raycast on every frame,Instead, the raycast should be done on the interval.您可以使用setTimeoutorsetIntervalOr check the time in the update loop.

onUpdate() {
     
   // Code that runs once per frame

   // Check that we've waited long enough to raycast
   if (Date.now() - this.lastRaycast > this.raycastInterval && this.qRaycast) {
     
       this.handleRaycast();
       this.lastRaycast = Date.now();
       this.qRaycast = false;
   }
  requestAnimationFrame( () => this.onUpdate() );
}

I also only queue raycasts when the mouse is moved（如果鼠标不移动,There's no reason to keep raycasting）,And because I have panning in my project,So I disable raycasting during translation movement,to prevent any shaking during movement.

// Event Handlers
// Record mouse position for raycast
onMouseMove(e) {
     
   this.mouse.x = (e.clientX / window.innerWidth ) * 2 - 1;
   this.mouse.y = -((e.clientY - 50) / window.innerHeight ) * 2 + 1;

   // If we are panning, don't queue a raycast
   this.qRaycast = !this.mouseState.held;
}

// My app has panning, and we don't wanna keep raycasting during pan
onMouseDown(e) {
     
   this.mouseState.lastClick = Date.now();
   this.mouseState.clicked = false;
   this.mouseState.held = true;
}

onMouseUp(e) {
     
   this.mouseState.held = false;
}

Then we handle raycasting：

// Like lasers, but virtual.
handleRaycast() {
     
   let hits = null;
   let hitcount = 0;
   if (UI.raycast && meshObj) {
     
       this.raygun.setFromCamera(this.mouse, this.camera);
       hits = this.raygun.intersectObject(meshObj, false);
       hitcount = hits.length;
   }

   if (hitcount > 0) {
     
       // Do stuff with the raycast here
   }
}

If you are still having performance issues,Then you might want to consider breaking out that looping function,以便在 XXms After that it will break to let UI 更新,Then continue to update on the next frame

我想证明这一点,Raycasting is not very expensive,But only if you are willing to do it.默认值为threejs实现是O（n）复杂的,nis the number of faces in the mesh.不过,You can bring it down to O（log（n））,This suddenly makes it almost free.
I usually run every frame100or so raycasts,There is no noticeable performance impact.所以答案是-这取决于‍*

To keep it cheap,Please try to ensure bounding boxes（或球体）Check as efficiently as possible.If the ray always intersects the mesh somewhere,Then cast the ray to have 100K would be expensive in a single large world mesh with 3 vertices.对具有 1K 个顶点的 100 It would be much cheaper to raycast a mesh,Because most meshes will be eliminated with a simple bounding box check.

Raycasting 不是正确的解决方案——If the object's bounding box completely passes through the ray,那么 Raycaster Every triangle in the mesh will be traversed.If you want to know the intersection of the ray with the sphere,It will be much faster to useRay.intersectSphere 13获取交点坐标.
If you need a specific triangle,rather than specific coordinates,Then you probably need some kind of spatial data structure instead of raycasting.

参考
How expensive is raycasting？
使用raycaster时的性能问题
ray casterthree.js 性能不佳