The Three.js raycaster fails to intersect with objects once they have been displaced from their original position

Question

The Three.js raycaster fails to intersect with objects once they have been displaced from their original position

I am encountering an issue with the raycaster:

When I place an object at the origin (0, 0, 0), the raycaster can detect it. However, if I move the object to a different position, like (0, 300, 0), the raycaster no longer hits the object.

I have double-checked that all directions are set up correctly. I even tried manually testing the raycasting on the moved object using Three.js functions and it was successful.

It appears that the raycaster.IntersectsObject(objects) is not applying the matrixWorld correctly to the Bounding Sphere.

Do you have any insights on why this might be happening?

I am aware of a similar post on this topic, but the solution mentioned didn't work for me:

Three JS - Strange raycast behaviour when objects are moved

The bounding sphere does have the correct values.

javascript matrix three.js raycasting

Answer 1

Answer №1

It is essential to ensure that the world matrix of your mesh is kept up to date. This can be easily rectified by invoking the mesh.updateMatrixWorld(); method.

var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 400, 200, -300 );

var scene = new THREE.Scene();

var geometry = new THREE.SphereBufferGeometry(100, 100, 100);
var material = new THREE.MeshBasicMaterial({
  color: 0xaa5555
});

var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 300, 0);
mesh.updateMatrixWorld(); // FIX
scene.add(mesh);

camera.lookAt( mesh.position );

var raycaster = new THREE.Raycaster();
var ray = raycaster.ray;
ray.origin.copy( camera.position );
ray.direction.subVectors( mesh.position, camera.position ).normalize();

var intersections = raycaster.intersectObjects(scene.children);
console.log( intersections ); 

var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );

body {
  margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee9a869c8b8baedec0dfdfd7">[email protected]</a>/build/three.js"></script>

Answer 2

It is essential to ensure that the world matrix of your mesh is kept up to date. This can be easily rectified by invoking the mesh.updateMatrixWorld(); method.

var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 400, 200, -300 );

var scene = new THREE.Scene();

var geometry = new THREE.SphereBufferGeometry(100, 100, 100);
var material = new THREE.MeshBasicMaterial({
  color: 0xaa5555
});

var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 300, 0);
mesh.updateMatrixWorld(); // FIX
scene.add(mesh);

camera.lookAt( mesh.position );

var raycaster = new THREE.Raycaster();
var ray = raycaster.ray;
ray.origin.copy( camera.position );
ray.direction.subVectors( mesh.position, camera.position ).normalize();

var intersections = raycaster.intersectObjects(scene.children);
console.log( intersections ); 

var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );

body {
  margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee9a869c8b8baedec0dfdfd7">[email protected]</a>/build/three.js"></script>

The Three.js raycaster fails to intersect with objects once they have been displaced from their original position

Answer №1

Similar questions

Set YouTube Playlist to start from a random index when embedded

Display images on a single dataset using Chart.js

Problem with input field borders in Firefox when displayed within table cells

Retrieve Browser Screen Width and Height using MVC3 Razor in the View

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Enhance your user interface by adding a tooltip above a button

Step-by-step guide on Setting up the bronto.sca.cart object using Bronto JSON

Directing to index.html using ExpressJS

oj-select-one displays a comprehensive list of values in the dropdown

The autocomplete feature in Atom is not functioning as expected

Creating DOM elements upon successful completion of an AJAX request with jQuery has never been easier. Here's a

"Every time an Ajax call is successful, the 'else' clause in

My goal is to programmatically eliminate captcha from a website

Obtaining the value of a specific dynamic `<td>` element using jQuery

How require works in Node.js

Simulation of loopback session

Remove duplicate elements from a JSON array

Sort through a list of objects using the criteria from a separate array

Issue with Codeigniter's AJAX functionality causing div reloading to not function as intended

guide on adding a variable to the link_to path