Empty Array of Intersects Found in Three.js Raycasting

Question

Empty Array of Intersects Found in Three.js Raycasting

I have been experimenting with a WebGL panorama cube using the example found here:

My goal is to determine which cube the user clicks on, and I learned that Raycaster can help with this. Following the documentation, I implemented the following function:

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

        var mouseVector = new THREE.Vector3(
            ( event.clientX / window.innerWidth ) * 2 - 1,
          - ( event.clientY / window.innerHeight ) * 2 + 1,
            1 );

        //projector.unprojectVector( mouseVector, camera );
        mouseVector.unproject( camera );
        var raycaster = new THREE.Raycaster( camera.position, mouseVector.sub( camera.position ).normalize() );

        // create an array containing all objects in the scene with which the ray intersects
        var intersects = raycaster.intersectObjects( scene.children );
        console.log(intersects);
        if (intersects.length>0){
            console.log("Intersected object:", intersects.length);
            intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
        }
        // ...

However, I am always getting an empty result for intersects. My scene is defined as

scene = new THREE.Scene();

and includes a skybox:

var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), materials );
skyBox.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, - 1 ) );
scene.add( skyBox );

I have searched for solutions to similar issues but haven't been able to apply them to my specific case. Any guidance would be greatly appreciated.

javascript three.js

Answer 1

Answer №1

Consider implementing the following into your material definition:

var materials = new THREE.SomeMaterial({
    /* other settings */,
    side: THREE.DoubleSide
});

If you want Raycaster to intersect back-faces, ensure that the side property is set to either THREE.BackSide or THREE.DoubleSide. Despite scaling inverting the face direction, it's the vertex order that matters for the Raycaster.

Diving Deeper

The code snippet below illustrates how a ray projected from the center of a skybox, inverted by a -Z scale, may appear.

The altered box looks peculiar due to the -Z scaling, causing mismatches with the normals. However, this is not the focus here.

The green arrow denotes the original ray, while the red arrow shows what happens to the ray inside the Mesh.raycast function, applying the inverse of the object's world matrix to the ray but not its geometry. This presents a separate issue.

The key point here is that within Mesh.raycast, there's no impact on the vertex/index order. Therefore, when checking the mesh's triangles, they retain their original order. For a typical BoxGeometry/BoxBufferGeometry, this implies the faces all facing outward from the geometric origin.

Hence, despite any transformation matrix effects on the rays, they still attempt to intersect the back-face of those triangles, necessitating the material to be set as THREE.DoubleSide (the default). Alternatively, it could be set to

THREE.BackSide</code, though the -Z scale might disrupt this).</p>

<p>By clicking the raycast buttons without setting the -Z scaled box to <code>THREE.DoubleSide

(default), you will encounter 0 intersections. Click the "Set THREE.DoubleSide" button and retry—the intersection should now occur.

var renderer, scene, camera, controls, stats;

var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight,
FOV = 35,
NEAR = 1,
FAR = 1000,
  ray1, ray2, mesh;

function populateScene(){
var cubeGeo = new THREE.BoxBufferGeometry(10, 10, 10),
cubeMat = new THREE.MeshPhongMaterial({ color: "red", transparent: true, opacity: 0.5 });
mesh = new THREE.Mesh(cubeGeo, cubeMat);
  mesh.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
  mesh.updateMatrixWorld(true);
scene.add(mesh);
  
  var dir = new THREE.Vector3(0.5, 0.5, 1);
  dir.normalize();
  ray1 = new THREE.Ray(new THREE.Vector3(), dir);
  
  var arrow1 = new THREE.ArrowHelper(ray1.direction, ray1.origin, 20, 0x00ff00);
  scene.add(arrow1);
  
  var inverseMatrix = new THREE.Matrix4();
  inverseMatrix.getInverse(mesh.matrixWorld);
  
  ray2 = ray1.clone();
  ray2.applyMatrix4(inverseMatrix);
  
  var arrow2 = new THREE.ArrowHelper(ray2.direction, ray2.origin, 20, 0xff0000);
  scene.add(arrow2);
}

function init() {
document.body.style.backgroundColor = "slateGray";

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

document.body.appendChild(renderer.domElement);
document.body.style.overflow = "hidden";
document.body.style.margin = "0";
document.body.style.padding = "0";

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
camera.position.z = 50;
scene.add(camera);

controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.dynamicDampingFactor = 0.5;
controls.rotateSpeed = 3;

var light = new THREE.PointLight(0xffffff, 1, Infinity);
camera.add(light);

stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0';
document.body.appendChild(stats.domElement);

resize();
window.onresize = resize;

populateScene();

animate();
  
  var rayCaster = new THREE.Raycaster();
  document.getElementById("greenCast").addEventListener("click", function(){
    rayCaster.ray.copy(ray1);
    alert(rayCaster.intersectObject(mesh).length + " intersections!");
  });
  document.getElementById("redCast").addEventListener("click", function(){
    rayCaster.ray.copy(ray2);
    alert(rayCaster.intersectObject(mesh).length + " intersections!");
  });
  document.getElementById("setSide").addEventListener("click", function(){
    mesh.material.side = THREE.DoubleSide;
    mesh.material.needsUpdate = true;
  });
}

function resize() {
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
if (renderer && camera && controls) {
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
controls.handleResize();
}
}

function render() {
renderer.render(scene, camera);
}

function animate() {
requestAnimationFrame(animate);
render();
controls.update();
stats.update();
}

function threeReady() {
init();
}

(function () {
function addScript(url, callback) {
callback = callback || function () { };
var script = document.createElement("script");
script.addEventListener("load", callback);
script.setAttribute("src", url);
document.head.appendChild(script);
}

addScript("https://threejs.org/build/three.js", function () {
addScript("https://threejs.org/examples/js/controls/TrackballControls.js", function () {
addScript("https://threejs.org/examples/js/libs/stats.min.js", function () {
threeReady();
})
})
})
})();

body{
  text-align: center;
}

<input id="greenCast" type="button" value="Cast Green">
<input id="redCast" type="button" value="Cast Red">
<input id="setSide" type="button" value="Set THREE.DoubleSide">

Answer 2

Consider implementing the following into your material definition:

var materials = new THREE.SomeMaterial({
    /* other settings */,
    side: THREE.DoubleSide
});

If you want Raycaster to intersect back-faces, ensure that the side property is set to either THREE.BackSide or THREE.DoubleSide. Despite scaling inverting the face direction, it's the vertex order that matters for the Raycaster.

Diving Deeper

The code snippet below illustrates how a ray projected from the center of a skybox, inverted by a -Z scale, may appear.

The altered box looks peculiar due to the -Z scaling, causing mismatches with the normals. However, this is not the focus here.

The green arrow denotes the original ray, while the red arrow shows what happens to the ray inside the Mesh.raycast function, applying the inverse of the object's world matrix to the ray but not its geometry. This presents a separate issue.

The key point here is that within Mesh.raycast, there's no impact on the vertex/index order. Therefore, when checking the mesh's triangles, they retain their original order. For a typical BoxGeometry/BoxBufferGeometry, this implies the faces all facing outward from the geometric origin.

Hence, despite any transformation matrix effects on the rays, they still attempt to intersect the back-face of those triangles, necessitating the material to be set as THREE.DoubleSide (the default). Alternatively, it could be set to

THREE.BackSide</code, though the -Z scale might disrupt this).</p>

<p>By clicking the raycast buttons without setting the -Z scaled box to <code>THREE.DoubleSide

(default), you will encounter 0 intersections. Click the "Set THREE.DoubleSide" button and retry—the intersection should now occur.

var renderer, scene, camera, controls, stats;

var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight,
FOV = 35,
NEAR = 1,
FAR = 1000,
  ray1, ray2, mesh;

function populateScene(){
var cubeGeo = new THREE.BoxBufferGeometry(10, 10, 10),
cubeMat = new THREE.MeshPhongMaterial({ color: "red", transparent: true, opacity: 0.5 });
mesh = new THREE.Mesh(cubeGeo, cubeMat);
  mesh.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
  mesh.updateMatrixWorld(true);
scene.add(mesh);
  
  var dir = new THREE.Vector3(0.5, 0.5, 1);
  dir.normalize();
  ray1 = new THREE.Ray(new THREE.Vector3(), dir);
  
  var arrow1 = new THREE.ArrowHelper(ray1.direction, ray1.origin, 20, 0x00ff00);
  scene.add(arrow1);
  
  var inverseMatrix = new THREE.Matrix4();
  inverseMatrix.getInverse(mesh.matrixWorld);
  
  ray2 = ray1.clone();
  ray2.applyMatrix4(inverseMatrix);
  
  var arrow2 = new THREE.ArrowHelper(ray2.direction, ray2.origin, 20, 0xff0000);
  scene.add(arrow2);
}

function init() {
document.body.style.backgroundColor = "slateGray";

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

document.body.appendChild(renderer.domElement);
document.body.style.overflow = "hidden";
document.body.style.margin = "0";
document.body.style.padding = "0";

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
camera.position.z = 50;
scene.add(camera);

controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.dynamicDampingFactor = 0.5;
controls.rotateSpeed = 3;

var light = new THREE.PointLight(0xffffff, 1, Infinity);
camera.add(light);

stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0';
document.body.appendChild(stats.domElement);

resize();
window.onresize = resize;

populateScene();

animate();
  
  var rayCaster = new THREE.Raycaster();
  document.getElementById("greenCast").addEventListener("click", function(){
    rayCaster.ray.copy(ray1);
    alert(rayCaster.intersectObject(mesh).length + " intersections!");
  });
  document.getElementById("redCast").addEventListener("click", function(){
    rayCaster.ray.copy(ray2);
    alert(rayCaster.intersectObject(mesh).length + " intersections!");
  });
  document.getElementById("setSide").addEventListener("click", function(){
    mesh.material.side = THREE.DoubleSide;
    mesh.material.needsUpdate = true;
  });
}

function resize() {
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
if (renderer && camera && controls) {
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
controls.handleResize();
}
}

function render() {
renderer.render(scene, camera);
}

function animate() {
requestAnimationFrame(animate);
render();
controls.update();
stats.update();
}

function threeReady() {
init();
}

(function () {
function addScript(url, callback) {
callback = callback || function () { };
var script = document.createElement("script");
script.addEventListener("load", callback);
script.setAttribute("src", url);
document.head.appendChild(script);
}

addScript("https://threejs.org/build/three.js", function () {
addScript("https://threejs.org/examples/js/controls/TrackballControls.js", function () {
addScript("https://threejs.org/examples/js/libs/stats.min.js", function () {
threeReady();
})
})
})
})();

body{
  text-align: center;
}

<input id="greenCast" type="button" value="Cast Green">
<input id="redCast" type="button" value="Cast Red">
<input id="setSide" type="button" value="Set THREE.DoubleSide">

Answer 3

Answer №2

If you're looking for a simpler way to calculate the ray from your camera, consider using this method:

THREE.Raycaster.prototype.setFromCamera( Vector2, Camera );

All you need to do is define your mouse coordinates as a Vector2, then pass them to the Raycaster. This method takes care of handling the complexity of intersecting the frustrum with the camera's ray and should help resolve your issue.

(It's worth noting that the raycaster only intersects faces that directly face the ray. However, in the case of an inverted SkyBox where the geometry faces point inside the box, intersections are still possible when the camera is within the box. Alternatively, if the box is too far away, it may exceed the raycaster's default far value.)

function onMouseDown( event ) {

    event.preventDefault();

    var mouseVector = new THREE.Vector2(
         event.clientX / window.innerWidth * 2 - 1,
        -event.clientY / window.innerHeight * 2 + 1
    );

    var raycaster = new THREE.Raycaster;
    raycaster.setFromCamera( mouseVector, camera );

    var intersects = raycaster.intersectObjects( scene.children );
        
    console.log(intersects);
        
    if( intersects.length > 0 ){

        console.log( "Intersected object:", intersects[ 0 ] );
        intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

    }

}

Answer 4

If you're looking for a simpler way to calculate the ray from your camera, consider using this method:

THREE.Raycaster.prototype.setFromCamera( Vector2, Camera );

All you need to do is define your mouse coordinates as a Vector2, then pass them to the Raycaster. This method takes care of handling the complexity of intersecting the frustrum with the camera's ray and should help resolve your issue.

(It's worth noting that the raycaster only intersects faces that directly face the ray. However, in the case of an inverted SkyBox where the geometry faces point inside the box, intersections are still possible when the camera is within the box. Alternatively, if the box is too far away, it may exceed the raycaster's default far value.)

function onMouseDown( event ) {

    event.preventDefault();

    var mouseVector = new THREE.Vector2(
         event.clientX / window.innerWidth * 2 - 1,
        -event.clientY / window.innerHeight * 2 + 1
    );

    var raycaster = new THREE.Raycaster;
    raycaster.setFromCamera( mouseVector, camera );

    var intersects = raycaster.intersectObjects( scene.children );
        
    console.log(intersects);
        
    if( intersects.length > 0 ){

        console.log( "Intersected object:", intersects[ 0 ] );
        intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

    }

}

Answer 5

Answer №3

When utilizing the raycaster.intersectObjects() function within Three.js, it is vital to supply the targeted objects in array format. Previously, the method was used as

const intersects = raycaster.intersectObjects(planeMesh);

. However, for proper functionality and to avoid an empty array being returned, it is crucial to enclose the object or objects within an additional pair of square brackets like so:

const intersects = raycaster.intersectObjects([planeMesh]);

. This adjustment of encapsulating the object reference within an array enables the raycaster to accurately detect intersections and prevents returning an empty intersection array.

https://i.sstatic.net/1gSoW.png

Answer 6

When utilizing the raycaster.intersectObjects() function within Three.js, it is vital to supply the targeted objects in array format. Previously, the method was used as

const intersects = raycaster.intersectObjects(planeMesh);

. However, for proper functionality and to avoid an empty array being returned, it is crucial to enclose the object or objects within an additional pair of square brackets like so:

const intersects = raycaster.intersectObjects([planeMesh]);

. This adjustment of encapsulating the object reference within an array enables the raycaster to accurately detect intersections and prevents returning an empty intersection array.

https://i.sstatic.net/1gSoW.png

Empty Array of Intersects Found in Three.js Raycasting

Answer №1

Answer №2

Answer №3

Similar questions

Looking to add some movement to your website? Learn how to make an image track your mouse pointer in a specific section of your webpage

Generate a Report in Embedded Mode using the PowerBI API

Revamping a design using Mustache js

The output of the Node.js crypto.pbkdf2 function may not match the result obtained from CryptoJS.PBKDF

Encountering an issue with getDerivedStateFromProps in React where an error states: Unable to retrieve property 'setState' of null

Using JQuery to encapsulate the contents of a variable

Creating textures using a-frame's rendering capabilities

Is there a way to turn off data sorting on the x-axis of a d3 line chart?

Where can the data be found within an AngularJS HTTP POST request?

Tips on utilizing ajax to load context without needing to refresh the entire page

Unspecified checkbox selection with Vue.js

Typing the url in the address bar when using Angular's ui-router

Replace all instances of the same word with the word "and" using regular expressions

Authentication error: The API data retrieval was disrupted due to an unexpected termination of input

Increase the dimensions of the jQuery modal confirmation box

Tips for making a React/Socket.IO app accessible from external sources

NextJS not maintaining state for current user in Firebase

Using JavaScript, adding an element to an array results in the array returning a value of 1

How can I combine jQuery "this" along with a CSS selector?

How to iteratively process JSON array using JavaScript?