Raycaster for multiple objects

Questions
,
1

Hi Friends,

I would like to equip a virtual tour with many different objects
with eventlistener, which show text in a html-element when onlick or mousover. (Individually per object)

Now I’m dealing with raycaster, as I understand it at the moment or in every example I’ve seen, the raycaster reads the mouse position and then executes the event.

Now my questions :

Would it be possible to give the raycaster a position so that the event only fires when I move my mouse over my objects ?

Like this ?

    const raycasterMadonna = new THREE.Raycaster();
const mouse2 = new THREE.Vector3(x,y,z);  

function onMouseMove( event ) {



}

function render() {

	
	raycasterMadonna.setFromCamera( mouse2, camera );


	const intersects = raycasterMadonna.intersectObjects( scene.children );

	for ( let i = 0; i < intersects.length; i ++ ) {

		intersects[ i ].object.material.colour.set( 0xff0000 );

	}

	renderer.render( scene, camera );

}

window.addEventListener( 'mousemover', false );

(I took the code from several examples here in the forum, and modified it a bit.)

Many greetings Sebastian

2

raycasting can be used like an object. It’s not mandatory to use it with camera or mouse. Here is a basic example with a raycast starting at the center of the scene, firing up to 100 unit lenght on axe Y.

//direction
let direction = new THREE.Vector3( 0, 100, 0 );
direction.normalize();
//origin
let origin = new THREE.Vector3( 0, 0, 0 );

//raycaster
let raycaster = new THREE.Raycaster(origin, direction);
3

Quite similarly raycast works in my beginner example in the Collection of examples from discourse.threejs.org

See BeginnerExample

// ... step 10: raycaster 
//=================================================================================================
			// https://threejs.org/docs/index.html#api/en/core/Raycaster
const raycaster = new THREE.Raycaster( ); // see function raycasting( ); in animate
const mouse = new THREE.Vector2( ); // see function onWindowMousemove( event )
let intersects = []; // array of intersected objects
			// https://threejs.org/docs/index.html#api/en/geometries/OctahedronGeometry
const ohGeometry = new THREE.OctahedronGeometry( 0.3 );
const ohMesh = new THREE.Mesh( ohGeometry, new THREE.MeshPhongMaterial( { color: 0xff0045 } ) );
scene.add( ohMesh );
const objs = [ ohMesh, flowerMesh, modelLh, ballMesh, diceMesh, sandPileMesh, rampMesh, stemMesh, flagpoleMesh, flagMesh, sfSprite, sheetMesh ];
const infos = [ 'octahedron', 'flower', 'lighthouse', 'ball', 'dice', 'sand', 'ramp', 'stem', 'pole', 'three.js', 'sunflower', 'sheet' ]
let index = 0;
objs.forEach( obj => { obj.name = infos[ index ]; index ++; } );  // names for some objects

// ======= to step 10 ============

function raycasting( ) {
	
	if( range.value > 9.5 && range.value < 10.5  ) { // only step 10 
		
		raycaster.setFromCamera( mouse, camera );
		intersects = raycaster.intersectObjects( objs ); // objs - objects to raycast
		
		if ( intersects.length > 0 ) { // hit
			
			info.style.fontSize = '5vh';
			info.style.color = 'white';
			info.innerHTML = ' you got a hit => ' + intersects[ 0 ].object.name; //  ...[ 0 ]  first intersected object
			ohMesh.material.color.setHex( 0x4500ff );
			
		} else {
			
			info.style.fontSize = '1.9vh';
			info.style.color = 'black';
			info.innerHTML = 'Beginner Example';
			ohMesh.material.color.setHex( 0xff0045 );
			
		}
		
	}
	
}
4

Ok, great, thank you very much.

5

Thank you, thats new for me. Thank you very much.