The issue with Three.Js Raycasting arises when attempting to change camera transformations within an Object3D parent element

Question

The issue with Three.Js Raycasting arises when attempting to change camera transformations within an Object3D parent element

In my latest project, I decided to create a "camera controller" that handles the movement and rotation of the camera by utilizing an Object3D as its parent. The Y-axis rotations are applied to the Object3D, while the X-axis rotation is directly applied to the camera itself. Here's a snippet of the code:

function cameraController(cam, scene){
    // Implementation details here...
}

Despite successfully implementing the camera controller, I encountered an issue where raycasting fails to detect meshes when the camera and its parent object are being moved simultaneously.

Here's the relevant raycasting function:

document.addEventListener('click', function(event) {
    // Raycasting logic here...
}, false);

I've attempted using methods like "cam.updateMatrix()" and "cam.updateProjectionMatrix", but unfortunately, they didn't resolve the issue. Even after making the camera a child of the Object3D, the initial positions remain unchanged (0, 10, -4). If anyone has insights on why raycasting isn't functioning properly when using this controller to move the camera, I'd greatly appreciate your input.

javascript matrix three.js camera raycasting

Answer 1

Answer №1

For anyone struggling with a similar issue, I wanted to share a solution that may not be perfect, but it gets the job done. At the start of the click event, I saved the world and camera positions. Then I detached the camera from its parent, positioned it in the world coordinates, and added it back to the scene. After raycasting, I removed the camera from the scene, reset its position to the previously saved local coordinates, and then reattached it to the base object.

document.addEventListener('click',function(event){
    var px = camera.getWorldPosition().x;
    var py = camera.getWorldPosition().y;
    var pz = camera.getWorldPosition().z;
    var pxx = camera.position.x;
    var pyy = camera.position.y;
    var pzz = camera.position.z;
    camcont.baseobject.remove(camera);
    camera.position.set(px,py,pz);
    scene.add(camera);
    event.preventDefault();
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log("intersects !!");

    }
    scene.remove(camera);
    camera.position.set(pxx,pyy,pzz);
    camcont.baseobject.add(camera);
},false);

Answer 2

For anyone struggling with a similar issue, I wanted to share a solution that may not be perfect, but it gets the job done. At the start of the click event, I saved the world and camera positions. Then I detached the camera from its parent, positioned it in the world coordinates, and added it back to the scene. After raycasting, I removed the camera from the scene, reset its position to the previously saved local coordinates, and then reattached it to the base object.

document.addEventListener('click',function(event){
    var px = camera.getWorldPosition().x;
    var py = camera.getWorldPosition().y;
    var pz = camera.getWorldPosition().z;
    var pxx = camera.position.x;
    var pyy = camera.position.y;
    var pzz = camera.position.z;
    camcont.baseobject.remove(camera);
    camera.position.set(px,py,pz);
    scene.add(camera);
    event.preventDefault();
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log("intersects !!");

    }
    scene.remove(camera);
    camera.position.set(pxx,pyy,pzz);
    camcont.baseobject.add(camera);
},false);

The issue with Three.Js Raycasting arises when attempting to change camera transformations within an Object3D parent element

Answer №1

Similar questions

How come my variable doesn't show up in the view even though I filled it in the controller?

Executing Javascript without invoking the default behavior

Retrieve both the key and corresponding value from a JSON object

Transitioning from a see-through navigation bar to a vibrant colored menu as

Retrieve and update the most recent entry

jQuery Mishap - Creating an Unspecified Issue

Building a multilingual website using AngularJS UI-Router

Transfer data from a file to a PHP file using the XMLHttpRequest object in JavaScript and receive

What is the best way to organize angularjs controllers and directives within one another?

Creating a new dynamic page can be achieved by clicking on a dynamically generated link. Would you like to learn how to do that?

I'm confused as to why I am only receiving one object entry in my fetch response instead of the expected list of entries

Managing a large number of records in a for loop on a Node.js server can be challenging, especially when dealing with nearly

Responsive Fullscreen Bootstrap Panel with Highcharts

Error: The component passed is invalid and cannot be defined within kendo UI

While creating a React app, Docker becomes stuck due to a hangup when checking the core-js dependency

Journeying through JSON: Presenting the value alongside its hierarchical parent

The act of appending values to an array within a hash in Vue is not functioning as expected

My code in NodeJS is not executing in the expected order due to its asynchronous nature

Connect individuals based on specific criteria within a nested array

"Enhance Your Website with qTip2 Feature to Load Multiple AJAX Sites Simult