The camera constantly eludes the object, despite attempts to match its position and rotation

Question

The camera constantly eludes the object, despite attempts to match its position and rotation

I am attempting to keep a sphere object centered in front of a moving camera. The camera's position and rotation are being animated using lookAt(), which is functioning correctly. However, the sphere object is not staying within the frame as desired. I have tried different approaches:

const centerSphereInCameraWithQuaternion = (sphere: THREE.Mesh, camera: THREE.PerspectiveCamera) => {
  const vec = new THREE.Vector3( 0, 0, - 4 );
  vec.applyQuaternion( camera.quaternion );

  sphere.position.copy( vec );
}

This method causes the sphere to disappear completely. Another attempt was made with:

const centerSphereInCamera = (sphere: THREE.Mesh, camera: THREE.PerspectiveCamera) => {
  sphere.position.copy( camera.position );
  sphere.rotation.copy( camera.rotation );
  sphere.updateMatrix();
  sphere.translateZ( - 4 );
}

While this nearly works, the sphere rotates opposite to the direction of the camera's facing. Additionally, I experimented with:

sphere.position.sub(camera.position);

However, this did not yield any visible results.

I even used a camera helper to verify that the camera's world matrix is updating correctly, which it appears to be.

What mistake am I making in my approach? Is there a way to achieve this without making the mesh a child of the camera?

typescript three.js

Answer 1

Answer №1

If you're not getting creative with the camera's angle, all it takes is three simple lines of code to keep an object in front of the camera without embedding it within the camera:

sphere.position.copy(camera.position);
sphere.rotation.copy(camera.rotation);
sphere.translateZ(-40);

Feel free to test out the code snippet below to witness this method in action. Watch as I smoothly move the camera around the scene, and see how the sphere always stays directly in front of the camera thanks to those three lines of code. The relevant part of the code can be found in the animate() function towards the end:

var camera, scene, renderer;

// set up the scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xe1e1e1);

// initialize the camera
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 100);

const ambient = new THREE.DirectionalLight(0xddeeff, 1);
ambient.position.set(0, 1, 1);

const floor = new THREE.Mesh(
    new THREE.BoxBufferGeometry(20, 0.25, 20),
    new THREE.MeshPhongMaterial()
);
const wall = new THREE.Mesh(
    new THREE.BoxBufferGeometry(.5, 3, 10), 
    new THREE.MeshPhongMaterial({ color: 0xc4ffc4})
);
const sphere = new THREE.Mesh(
    new THREE.SphereBufferGeometry(3, 20, 20),
    new THREE.MeshPhongMaterial({ color: 0xff0000 })
);

scene.add(ambient, floor, wall, sphere);

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, Infinity));

document.body.appendChild(renderer.domElement);

function animate(t) {
    // Move the camera
    const xPos = Math.sin(t / 777) * 50;
    const yPos = Math.sin(t / 666) * 25;
    const zPos = Math.cos(t / 1000) * 50;
    camera.position.set(xPos, yPos, zPos);
    camera.lookAt(0, 0, 0);
    
    // Keep the sphere in front of the camera
    sphere.position.copy(camera.position);
    sphere.rotation.copy(camera.rotation);
    sphere.translateZ(-40);
    
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

animate(0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>

Answer 2

If you're not getting creative with the camera's angle, all it takes is three simple lines of code to keep an object in front of the camera without embedding it within the camera:

sphere.position.copy(camera.position);
sphere.rotation.copy(camera.rotation);
sphere.translateZ(-40);

Feel free to test out the code snippet below to witness this method in action. Watch as I smoothly move the camera around the scene, and see how the sphere always stays directly in front of the camera thanks to those three lines of code. The relevant part of the code can be found in the animate() function towards the end:

var camera, scene, renderer;

// set up the scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xe1e1e1);

// initialize the camera
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 100);

const ambient = new THREE.DirectionalLight(0xddeeff, 1);
ambient.position.set(0, 1, 1);

const floor = new THREE.Mesh(
    new THREE.BoxBufferGeometry(20, 0.25, 20),
    new THREE.MeshPhongMaterial()
);
const wall = new THREE.Mesh(
    new THREE.BoxBufferGeometry(.5, 3, 10), 
    new THREE.MeshPhongMaterial({ color: 0xc4ffc4})
);
const sphere = new THREE.Mesh(
    new THREE.SphereBufferGeometry(3, 20, 20),
    new THREE.MeshPhongMaterial({ color: 0xff0000 })
);

scene.add(ambient, floor, wall, sphere);

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, Infinity));

document.body.appendChild(renderer.domElement);

function animate(t) {
    // Move the camera
    const xPos = Math.sin(t / 777) * 50;
    const yPos = Math.sin(t / 666) * 25;
    const zPos = Math.cos(t / 1000) * 50;
    camera.position.set(xPos, yPos, zPos);
    camera.lookAt(0, 0, 0);
    
    // Keep the sphere in front of the camera
    sphere.position.copy(camera.position);
    sphere.rotation.copy(camera.rotation);
    sphere.translateZ(-40);
    
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

animate(0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>

The camera constantly eludes the object, despite attempts to match its position and rotation

Answer №1

Similar questions

Is Jasmine brushing off TypeScript test files?

Steps for utilizing a Get() method to view a response within Angular

Issue with Angular and OIDC - user data is missing upon logging in

React: Eliminate the reliance on two interconnected contexts by implementing a globally accessible constant object

Navigate through collections of objects containing sub-collections of more objects

Having trouble with the pitch of your rotating camera in Three.js?

Encountering a 404 error for core.js and browser.js while loading an Angular 2 app through system.src.js

The Google Books API has reached its limit for requests

What is the best way to send a string literal as a parameter to a method triggered by a click event

Tips for exchanging elements in React Three Fiber / ThreeJs

Some of the compiler options that are not commonly known are those for including and

Testing MatDialog functions in Angular: Learning how to open and close dialogues

Testing a callback function within a method in Angular

Navigate objects by typing

What is the best approach to inheriting from an Injectable class with multiple Injections in Angular 2?

Issues with updating values in Angular form controls are not being resolved even with the use of [formControl].valueChanges

Is there a way to store the result from LiquidJS as a variable?

Ways to modify the access control to permit origin on a specific API URL in React

What is the most effective method for creating a multitude of 2D rectangles using Three.js?

Interactions between faces in Three.js causing artifacts