Interaction between elements in Object3D

Question

Interaction between elements in Object3D

I have a collection of objects grouped together in Object3D and I'm attempting to detect when they are clicked on. My scene has dimensions of 600x400, my camera is part of a three-object, and the code for handling events looks like this:

function onDocumentMouseDown( event ) {
   event.preventDefault();

   var mouse = {};
   mouse.x = ( event.clientX / 600 ) * 2 - 1;
   mouse.y = - ( event.clientY / 400 ) * 2 + 1;

   var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
   projector.unprojectVector( vector, three.camera );

   var ray = new THREE.Ray( three.camera.position, vector.subSelf( three.camera.position ).normalize() );

   var intersects = ray.intersectObjects( group.children );
   alert(intersects.length);
   [...]
}

Currently, I am displaying the number of intersected objects. However, it always remains at zero. It seems unable to find any intersected objects. I've experimented with adjusting the x, y, and z values of my projection vector but haven't had any success.

I have provided a simplified example illustrating this issue on jsfiddle. Perhaps someone can offer a quick insight into what might be causing this problem?

javascript three.js

Answer 1

Answer №1

Your fiddle is set up to utilize

THREE.SceneUtils.createMultiMaterialObject()

, which creates a hierarchical structure. To ensure proper functionality, make sure to include the recursive flag when using ray.intersectObjects().

var intersects = ray.intersectObjects( group.children, true );

Update: The variable ray is now an instance of THREE.Raycaster rather than THREE.Ray.

Version three.js r.58

Answer 2

Your fiddle is set up to utilize

THREE.SceneUtils.createMultiMaterialObject()

, which creates a hierarchical structure. To ensure proper functionality, make sure to include the recursive flag when using ray.intersectObjects().

var intersects = ray.intersectObjects( group.children, true );

Update: The variable ray is now an instance of THREE.Raycaster rather than THREE.Ray.

Version three.js r.58

Answer 3

Answer №2

Dealing with a similar issue, I found the answer provided by WestLangley to be quite helpful. A great solution! If you're having trouble with selecting objects grouped within an Object3D wrapper using the mouse, here is my own approach.

To optimize performance, I started by creating an array of selectable objects. This way, the RayCaster only needs to search through the specific objects you want for selection, rather than scanning the entire scene. I then directly attached this array to the scene object (for easy accessibility throughout my application).

scene.selectable = [];

Next, I added all the individual objects that I wanted to be selectable to this array. Remember to include only meshes/sprites/etc from your group, not the entire group itself. The key line is the last one in this snippet:

var myWrapper = new THREE.Object3D();
var myObject = new THREE.Mesh( something );
myWrapper.add( myObject );
scene.add ( myWrapper );
scene.selectable.push( myObject );

Finally, in your mouse selection function, utilize the raycaster as follows:

var intersects = ray.intersectObjects( scene.selectable );

Answer 4

Dealing with a similar issue, I found the answer provided by WestLangley to be quite helpful. A great solution! If you're having trouble with selecting objects grouped within an Object3D wrapper using the mouse, here is my own approach.

To optimize performance, I started by creating an array of selectable objects. This way, the RayCaster only needs to search through the specific objects you want for selection, rather than scanning the entire scene. I then directly attached this array to the scene object (for easy accessibility throughout my application).

scene.selectable = [];

Next, I added all the individual objects that I wanted to be selectable to this array. Remember to include only meshes/sprites/etc from your group, not the entire group itself. The key line is the last one in this snippet:

var myWrapper = new THREE.Object3D();
var myObject = new THREE.Mesh( something );
myWrapper.add( myObject );
scene.add ( myWrapper );
scene.selectable.push( myObject );

Finally, in your mouse selection function, utilize the raycaster as follows:

var intersects = ray.intersectObjects( scene.selectable );

Interaction between elements in Object3D

Answer №1

Answer №2

Similar questions

Tips for validating email addresses and enforcing minimum length requirements

Adjust the size of the frame by dragging the mouse cursor to change both the width

Incorporating Keyboard Features into Buttons

Setting up a Variable with an Object Attribute in Angular

Sending JavaScript/jQuery variables to a different PHP page and navigating to it

Issue with React form not appearing on web browser

JavaScript callbacks are not executed synchronously

invoking a PHP function within a JavaScript script

Understanding intricate JSON structures with JavaScript

The e.currentTarget attribute in Material UI buttons is a key element that

Is there a way to utilize nodemon without having to install it through npm?

Encountered an issue with launching Chrome in Puppeteer for Node.js

JavaScript - Capture the Values of Input Fields Upon Enter Key Press

The useEffect function is failing to execute when deploying on Vercel with Vite and React Router

Conceal a div while revealing the other div

Select2 version 4.0.3 encountering issues when trying to automatically populate additional select2 fields with data fetched through ajax

Searching and selecting columns in React using Material-UI

What is up with this strange JavaScript variable string / DOM selection?

Summernote - When validating text, it is shown as raw HTML

Avoiding the backslash in JavaScript