# Raycaster for multiple objects

**URL:** <https://discourse.threejs.org/t/raycaster-for-multiple-objects/26090>\
**Category:** Questions\
**Tags:** raycaster, geometry\
**Created:** [May 9, 2021, 4:53pm UTC](https://discourse.threejs.org/t/raycaster-for-multiple-objects/26090 "2021-05-09T16:53:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hostingbuddies](https://avatars.discourse-cdn.com/v4/letter/h/c68b51/32.png) [@hostingbuddies](https://discourse.threejs.org/u/hostingbuddies)\
**Post date:** [May 9, 2021, 4:53pm UTC](https://discourse.threejs.org/t/raycaster-for-multiple-objects/26090/1 "2021-05-09T16:53:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [May 9, 2021, 5:22pm UTC](https://discourse.threejs.org/t/raycaster-for-multiple-objects/26090/2 "2021-05-09T17:22:35Z")

</div>

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.

```javascript
//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);
```

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [May 9, 2021, 5:57pm UTC](https://discourse.threejs.org/t/raycaster-for-multiple-objects/26090/3 "2021-05-09T17:57:05Z")

</div>

> [@hostingbuddies](#):
>
> which show text in a html-element when onlick or mousover.

Quite similarly raycast works in my beginner example in the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

See [BeginnerExample](https://hofk.de/main/discourse.threejs/BeginnerExample/BeginnerExample.html)

```
// ... 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 );
			
		}
		
	}
	
}

```

---

<div class="post-metadata">

**Author:** ![hostingbuddies](https://avatars.discourse-cdn.com/v4/letter/h/c68b51/32.png) [@hostingbuddies](https://discourse.threejs.org/u/hostingbuddies)\
**Post date:** [May 9, 2021, 6:45pm UTC](https://discourse.threejs.org/t/raycaster-for-multiple-objects/26090/4 "2021-05-09T18:45:17Z")

</div>

Ok, great, thank you very much.

---

<div class="post-metadata">

**Author:** ![hostingbuddies](https://avatars.discourse-cdn.com/v4/letter/h/c68b51/32.png) [@hostingbuddies](https://discourse.threejs.org/u/hostingbuddies)\
**Post date:** [May 9, 2021, 6:45pm UTC](https://discourse.threejs.org/t/raycaster-for-multiple-objects/26090/5 "2021-05-09T18:45:51Z")

</div>

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