I have a strong intuition that the current method I am using is completely off base because I am struggling to achieve optimal performance for my website.
Take a look at the primary code snippet:
onDocumentMouseMove( event ) {
if ( this.isUserInteracting === true ) {
this.lon = ( this.onMouseDownMouseX - event.clientX ) * 0.1 + this.onMouseDownLon;
this.lat = ( event.clientY - this.onMouseDownMouseY ) * 0.1 + this.onMouseDownLat;
}
this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
if( !this.state.VR ){
this.raycaster.setFromCamera( this.mouse, this.camera );
var intersects = this.raycaster.intersectObjects( this.indicatorHotspotPlane );
if( intersects.length > 0 ) {
this.actualIntersect = intersects[0];
$('html,body').css('cursor', 'pointer');
if(!intersects[ 0 ].object.isAction){
this.marker.material.opacity = 1;
this.marker.lookAt( intersects[ 0 ].face.normal );
this.marker.position.copy( intersects[ 0 ].point );
this.marker.position.y = this.marker.position.y + 30;
if( intersects[ 0 ].point.x >= 0 ){
this.marker.position.x = this.marker.position.x - 30;
}else{
this.marker.position.x = this.marker.position.x + 30;
}
}
} else {
this.actualIntersect = null;
$('html,body').css('cursor', 'move');
this.marker.material.opacity = 0;
}
}
}
I am under the impression that running raycaster.intersectObjects is a computationally intensive task within this event handler.
When I remove this specific code snippet, everything operates smoothly.
Is there an alternative method for detecting intersections while the mouse is in motion without encountering performance issues?
In my code, this.indicatorHotspotPlane is an array containing around 5 objects similar to this:
var hotspotPlane = new THREE.Mesh( new THREE.PlaneBufferGeometry( hotpot.width , hotpot.height ) );
Furthermore, my scene is comprised of these objects along with a sphere geometry featuring a textured surface.