Issues with Three.js raycaster intersectObjects

Question

Issues with Three.js raycaster intersectObjects

I am currently working on a 3D scatter plot where spheres are used to represent the points, and I am attempting to show information from the points when they are clicked. After researching various answers on this platform, I believe I am moving in the right direction. Here is the snippet of code for my onCanvasMouseDown function:

        event.preventDefault();
        mouse.x = ( (event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1;
        mouse.y = - ( (event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height ) * 2 + 1;
        mouse.z = 0.5;

        projector.unprojectVector( mouse, camera);
        raycaster.setFromCamera( mouse, camera);

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

        if( intersects.length > 0 ) {
            intersects.map(function(d) {
                if(d.object.name === "sphere") {
                           //etc...
                }
            })

        }

However, I am encountering an issue where intersects consistently returns empty. I suspect that the problem may be related to how I am setting up the mouse coordinates, but I am uncertain about how to address it.

EDIT: I have observed that I am able to detect a sphere when I rotate the plot to view it from above, but I need to be able to detect it regardless of the rotation. Does this provide any specific insights?

javascript three.js

Answer 1

Answer №1

If your elements (dots) are part of a THREE.Group(), that is a subordinate of the scene, then

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

may result in a negative intersection.

To target the children of the group, it is advisable to use

var hits = raycaster.intersectObjects( scene.children, true );

Alternatively, you can opt for a different approach: place the elements you wish to test for intersection in an array and then pass that array to the intersectObjects method.

var elements = [];
for(i=0; i<10; i++){
    ...
    var meshobj = new THREE.Mesh(...);
    scene.add(meshobj); // or group.add(meshobj);
    elements.push(meshobj);
}

...

var hits = raycaster.intersectObjects( elements ); // in this case, you do not need the recursive parameter, as you have the array with the elements you actually want to test for intersection

Answer 2

If your elements (dots) are part of a THREE.Group(), that is a subordinate of the scene, then

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

may result in a negative intersection.

To target the children of the group, it is advisable to use

var hits = raycaster.intersectObjects( scene.children, true );

Alternatively, you can opt for a different approach: place the elements you wish to test for intersection in an array and then pass that array to the intersectObjects method.

var elements = [];
for(i=0; i<10; i++){
    ...
    var meshobj = new THREE.Mesh(...);
    scene.add(meshobj); // or group.add(meshobj);
    elements.push(meshobj);
}

...

var hits = raycaster.intersectObjects( elements ); // in this case, you do not need the recursive parameter, as you have the array with the elements you actually want to test for intersection

Answer 3

Answer №2

For those with an offset, it is recommended to utilize the boundingRect method.

var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

To see a demonstration, check out the demo of this solution.

Answer 4

For those with an offset, it is recommended to utilize the boundingRect method.

var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

To see a demonstration, check out the demo of this solution.

Issues with Three.js raycaster intersectObjects

Answer №1

Answer №2

Similar questions

inability to conceal a two-dimensional marker array within Google Maps API v3

JavaScript code to dynamically change the minimum value of an input field when the page

The AJAX Request has indicated that the entity provided is not in an accurate 'application/json' format. It seems to be missing or empty, leading to an error with a code of '400'

Tips for organizing a Material UI DataGrid table effectively while keeping the total sum rows within the DataGrid unaffected

Tips for modifying style.display using JavaScript

The Vue/Vuetify wrapper component does not automatically pass on the `hide-details` parameter to the input component

JavaScript library error: "Uncaught ReferenceError: numjs is undefined"

Combine less files in webpack to generate a single minified CSS output file

Transfer the updated variable from a static JavaScript file to Next.js

Unchecking random checkboxes within a div using jQuery after checking them all

Sending data from the server to the client in MVC using C#

jQuery dropdown menu button impacts the entire webpage

Oops! A JSON parsing error occurred due to the presence of an unexpected token '}'

Trouble with closing windows in the in-app browser on Android devices

Displaying various charts in a single view without the need for scrolling in HTML

discord.js fails to provide a response

Execute protractor to open chrome in incognito mode and disable web security for cross-origin resource sharing

Display the checkbox as selected using AngularJS

The functionality of passing POST variables to the model seems to be malfunctioning in PHP CodeIgniter when attempting to use the

Organizing content by title or link using jQuery