I don't get the clicked object in raycast intersect list

Questions
, ,
1

Hello, i have a Room created with BoxGeometry and i have a. object inside the room.
So i need to perform some actions only when user mouse clicks on that particular object.
But right now whenever i make a click i always get BoxGeometry (i.e the room object). I dont know why the clicked object is not adding to the raycast intersect list.

Can someone please me with this. Thanks in advance

1 Like
2

You haven’t provided enough details, as what kind of object is, and whether you pass the scene or the object to the raycaster. If the objects are models loaded and not created inside three.js, you could add the ones you want to be checked to an array and pass that array to the raycaster instead of the scene, which always works.

3

@dllb thanks for the reply. I am really sorry for the non detailed question. Actually i am very new to three js, what i was trying to explain is that i need to add hotspot kind of a thing inside the room and i need to trigger click event only when user click that hotspot.

below is what i am passing to the raycast.

var intersects = raycaster.intersectObjects(scene.children);

Can u please help.

4

There is obviously some bug in your code, and I cannot guess that bug from one correct line of code.
Since you’re new to three.js, the best tactic is to start with one of the three.js examples, recreate it locally to work as is, then gradually make modifications towards your needs, until you change it completely to do what you want.

You could try this example:
https://threejs.org/examples/webgl_interactive_cubes.html

Either change the two import lines (for your convenience) to:

import * as THREE from 'https://cdn.skypack.dev/three@0.130.0/build/three.module.js'  

import Stats from 'https://cdn.skypack.dev/three@0.130.0/examples/jsm/libs/stats.module.js';

Or use node.js.

1 Like
5

Be sure to set second argument of raycaster. intersectObjects to true - otherwise only the top-most object is tested (see docs.)

Alternatively, you can also pass all objects inside the room manually - along with the room:

const intersects = raycaster.intersectObjects([
  scene,
  ...scene.children
]);