How can we smoothly transition between old and new target positions in THREE.js using lookAt?

Question

How can we smoothly transition between old and new target positions in THREE.js using lookAt?

Using the THREE.js "lookAt" function, I am able to align my cone with each target sphere one by one (red, green, yellow, blue).

// Setup

c_geometry = new THREE.CylinderGeometry(3, 40, 120, 40, 10, false);
c_geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2));
c_material = new THREE.MeshNormalMaterial();
myCone = new THREE.Mesh(c_geometry, c_material);
scene.add(myCone);

// Execution (within the Animation loop)

myCone.lookAt(target.position);

Now, my goal is to smoothly and gradually move the cone from the previous target to the new target. To achieve this, I believe I need to calculate intermediate points along a circular arc centered at the cone's position Cxyz, extending from the old target position Pxyz to the new target position Nxyz.

I am seeking guidance on: (a) tools, (b) trigonometry formulas, or (c) code samples that can help me calculate the xyz coordinates of these intermediate points on the arc. I will provide the angle increment between points based on the desired motion speed and frame rate.

javascript three.js

Answer 1

Answer №1

To achieve a seamless transition between different orientations, it is recommended to pre-calculate the target quaternions in your scenario:

myCone.lookAt( s1.position ); 
q1 = new THREE.Quaternion().copy( myCone.quaternion );

myCone.lookAt( s2.position );
q2 = new THREE.Quaternion().copy( myCone.quaternion );

Subsequently, within your render loop:

myCone.quaternion.slerpQuaternions( q1, q2, time ); // 0 < time < 1

This code sample pertains to three.js version r.141

Answer 2

To achieve a seamless transition between different orientations, it is recommended to pre-calculate the target quaternions in your scenario:

myCone.lookAt( s1.position ); 
q1 = new THREE.Quaternion().copy( myCone.quaternion );

myCone.lookAt( s2.position );
q2 = new THREE.Quaternion().copy( myCone.quaternion );

Subsequently, within your render loop:

myCone.quaternion.slerpQuaternions( q1, q2, time ); // 0 < time < 1

This code sample pertains to three.js version r.141

Answer 3

Answer №2

If you're seeking to smoothly move an object while keeping it looking at a target, here's a way to achieve that effect:

function MoveAndMaintainFocus(object: Object3D, targetPosition: Vector3, focusTarget: Vector3){
  const startPosition = object.position.clone();
  const initialFocus = new Vector3(
    0,
    .1, // Adjust as needed to prevent sudden camera rotations
    -object.position.distanceTo(focusTarget) // Note the orientation of THREE.Camera
  );
  object.localToWorld(initialFocus);
  const temporaryFocus = initialFocus.clone();
  function FocusLerp(progress: number){
    // Include this in your update loop
    object.position.lerpVectors(startPosition, targetPosition, progress);
    temporaryFocus.lerpVectors(initialFocus, focusTarget, progress);
    object.lookAt(temporaryFocus);
  }
}

Answer 4

If you're seeking to smoothly move an object while keeping it looking at a target, here's a way to achieve that effect:

function MoveAndMaintainFocus(object: Object3D, targetPosition: Vector3, focusTarget: Vector3){
  const startPosition = object.position.clone();
  const initialFocus = new Vector3(
    0,
    .1, // Adjust as needed to prevent sudden camera rotations
    -object.position.distanceTo(focusTarget) // Note the orientation of THREE.Camera
  );
  object.localToWorld(initialFocus);
  const temporaryFocus = initialFocus.clone();
  function FocusLerp(progress: number){
    // Include this in your update loop
    object.position.lerpVectors(startPosition, targetPosition, progress);
    temporaryFocus.lerpVectors(initialFocus, focusTarget, progress);
    object.lookAt(temporaryFocus);
  }
}

How can we smoothly transition between old and new target positions in THREE.js using lookAt?

Answer №1

Answer №2

Similar questions

How can we stop elements from suddenly moving around in a canvas?

Deduct a digit from a variable

Create waypoints on multiple elements

Activate UpdatePanel upon hovering the mouse cursor over it (displayed as a tooltip)

Personalize headers in v-data-table while preserving default sorting capabilities

How come the parameters in my function are being displayed as boolean values in JSDocs when that is not the intended behavior?

Is there a way for me to automatically update a webpage every 5 minutes, beginning at 8:01 a.m., and subsequently at 8:06 a.m., and so forth?

Tips for concealing an image hidden in the second TD using the data from the table stored in the first TD using JQuery

Navigating to another page after submitting an AngularJS form

What is the process for setting the version in a serverless project?

Can TwitterBootstrap modal interrupt script execution?

What makes componentDidMount the ideal location to initiate AJAX requests?

Detecting the type of request in a Node Express server when handling JSON and HTML data

How is it possible that the fourth element in the array displays a length of 24 when all it contains is the word "Spain"?

Steps to update model in AngularJS when a key is pressed:

Injecting a component in Angular 2 using an HTML selector

JavaScript and Ajax are functioning properly in Mozilla Firefox, however there seem to be some compatibility issues with Google Chrome

The callback function appears to malfunction when utilizing the getJSON function within jQuery

Authenticating with passportjs using a Google Apps email address for verification

JavaScript libraries are not required when using the .append function to add HTML elements