3D Object Anchored in Environment - Three.js

Question

3D Object Anchored in Environment - Three.js

In my current scene, I have two objects at play. Utilizing the LeapTrackballControls library for camera movement creates a dynamic where one object appears to rotate based on hand movements.

However, an issue arises as the second object also moves along with the camera motion. My goal is to keep this second object stationary in front of me, regardless of camera movement within the canvas/explorer.

Your understanding and assistance with this matter would be greatly appreciated.

EDIT:

var controls = new THREE.LeapTrackballControls( camera , controller );

The setup involves a central sphere that users interact with using LeapTrackball library, giving the perception of rotation around their center.

model = new THREE.Mesh(modelGeo, modelMat);
model.geometry.dynamic = true;
model.position.set(0, 0, 0);
scene.add(model);

The challenge lies with another shape:

myMesh = new THREE.Mesh(circleGeometry, material);
myMesh.position.set(0, 0, 10);
scene.add(myMesh);

This additional object seems to mimic the camera's rotation. The objective is to maintain the spherical rotation effect while keeping the other mesh fixed in the center of the screen (coordinates: 0,0,10).

Details regarding my camera object:

var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 5000);

Below is the render function responsible for updating camera control/movement:

   function render() {
        controls.update();
        renderer.render(scene, camera);
        doMouse();
        if(useOrbitControls){
            orbitControls.update();
        }
    }

With the integration of a Leap controller, here is the function building it up:

function leapMotion() {
                var controllerOptions = {
                    enableGestures: true
                    , background: true
            , frameEventName: 'animationFrame'
                , };

[...]

    controller.on('frame', onFrame);

Essentially, the 'onFrame' function executes with each received frame (approximately 60 times per second).

    function onFrame(frame){
[...]
        }

The functionality largely stems from the library accessible at:

javascript 3d three.js leap-motion

Answer 1

Answer №1

To keep an object, such as crosshairs, stationary in front of the camera, you can achieve this by making the object a child of the camera. Here is an example code snippet:

scene.add( camera ); // Make sure to include this line when the camera has a child
camera.add( object );
object.position.set( 0, 0, - 100 ); // Adjust the distance as needed

This method is applicable in three.js version r.71

Answer 2

To keep an object, such as crosshairs, stationary in front of the camera, you can achieve this by making the object a child of the camera. Here is an example code snippet:

scene.add( camera ); // Make sure to include this line when the camera has a child
camera.add( object );
object.position.set( 0, 0, - 100 ); // Adjust the distance as needed

This method is applicable in three.js version r.71

Answer 3

Answer №2

To easily achieve this, you can have your object follow the camera's movement.

By making sure that both the camera and the object move together at every update, while maintaining a constant distance between them, tracking is achieved.

In order for this method to be effective, you must establish a set position from which your object will always be seen, in this case it would be (0, 0, 10).

var fixedPosition = new THREE.Vector3(0, 0, 10);

Next, within your render() function you need to adjust the object's position after the camera has been repositioned but before rendering everything.

function render() {
        controls.update();

        // Let's now update the object's position!
        myMesh.position.sub(camera.position, fixedPosition);
        // The camera and mesh are now equidistant
        renderer.render(scene, camera);
        //...
    }

In this scenario, a vector subtraction does the job efficiently, effectively placing your object constantly 10 units away from the camera on the Z-axis by deducting the fixed amount of 10.

Most of the operations involved will deal with 3D vectors and numerical calculations, so grasping how these operations (basic addition, subtraction, multiplication, etc.) impact what appears on the screen can be beneficial.

If you find yourself uncertain about anything, delving into some knowledge regarding vector mathematics could prove insightful. It doesn't require memorizing formulas as Three.js already incorporates all necessary math functions, but comprehending the effects of these operations can be exceedingly advantageous.

Answer 4

To easily achieve this, you can have your object follow the camera's movement.

By making sure that both the camera and the object move together at every update, while maintaining a constant distance between them, tracking is achieved.

In order for this method to be effective, you must establish a set position from which your object will always be seen, in this case it would be (0, 0, 10).

var fixedPosition = new THREE.Vector3(0, 0, 10);

Next, within your render() function you need to adjust the object's position after the camera has been repositioned but before rendering everything.

function render() {
        controls.update();

        // Let's now update the object's position!
        myMesh.position.sub(camera.position, fixedPosition);
        // The camera and mesh are now equidistant
        renderer.render(scene, camera);
        //...
    }

In this scenario, a vector subtraction does the job efficiently, effectively placing your object constantly 10 units away from the camera on the Z-axis by deducting the fixed amount of 10.

Most of the operations involved will deal with 3D vectors and numerical calculations, so grasping how these operations (basic addition, subtraction, multiplication, etc.) impact what appears on the screen can be beneficial.

If you find yourself uncertain about anything, delving into some knowledge regarding vector mathematics could prove insightful. It doesn't require memorizing formulas as Three.js already incorporates all necessary math functions, but comprehending the effects of these operations can be exceedingly advantageous.

Answer 5

Answer №3

For those utilizing @react-three/fiber, this solution may be beneficial.

import {useFrame, useThree} from "@react-three/fiber";

const { gl } = useThree();

const [ vrEnabled, setVREnabled ] = useState(false);

useFrame(({camera}) => {
    setVREnabled(gl.xr.isPresenting);

    if (vrEnabled) {
        camera.add(ref.current);
        ref.current.position.set( 18, 0, 0 );
    }
});

Answer 6

For those utilizing @react-three/fiber, this solution may be beneficial.

import {useFrame, useThree} from "@react-three/fiber";

const { gl } = useThree();

const [ vrEnabled, setVREnabled ] = useState(false);

useFrame(({camera}) => {
    setVREnabled(gl.xr.isPresenting);

    if (vrEnabled) {
        camera.add(ref.current);
        ref.current.position.set( 18, 0, 0 );
    }
});

3D Object Anchored in Environment - Three.js

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing live query functionality and providing a substitute for DOMNodeInserted specifically tailored for

change the return value to NaN instead of a number

Conceal a div once the content in a separate div has finished loading

use jquery to dynamically switch CSS class on navigation with animated arrows

Angular is the best method for properly loading a webpage

Having trouble getting the onPress event to function properly on a custom button component in my React Native application

ExpressJS: How to resolve the undefined error in Express session

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

Changing properties of JavaScript arrays

What could be causing angularjs to malfunction in this specific scenario?

What is the best way to upload an object in React using fetch and form-data?

Utilizing Windows Azure and restify for node.js Development

Is it necessary for the scope to be separated?

Hide the popup menu when the user clicks outside of it

ajaxStop and ajaxStart not functioning as expected

Listening for Events from Child Components in Vue.js

Iterating through a series of Axios requests nested within each other to handle pagination in an

Searching patterns in Javascript code using regular expressions

What could be causing my Material UI Divider to appear invisible within a Material UI Container or Paper component?

What is the best way to give stacked bar charts a rounded top and bottom edge?