The concept of tweening camera.lookat in Three.js

Question

The concept of tweening camera.lookat in Three.js

Struggling to smoothly tween the camera.lookAt method in Three.js using Tween.js. The current implementation rotates the camera directly to the object's position.

Here is the code snippet that sort of works:

    selectedHotspot = object;

    var tween = new TWEEN.Tween(camera.lookAt(object.position), 600).start();

However, the rotation isn't as smooth as desired. How can a smoother transition be achieved?

This function handles rendering:

function update() {

    lat = Math.max(-85, Math.min(85, lat));
    phi = THREE.Math.degToRad(90 - lat);
    theta = THREE.Math.degToRad(lon);

    target.x = 512 * Math.sin(phi) * Math.cos(theta);
    target.y = 512 * Math.cos(phi);
    target.z = 512 * Math.sin(phi) * Math.sin(theta);


    if (!selectedHotspot)
        camera.lookAt(target);


    renderer.render(scene, camera);

}

UPDATE

After further testing, it seems I am unable to properly tween the camera. There might be another issue lingering. Is there something missing from the render function?

javascript three.js tween.js

Answer 1

Answer №1

To achieve the desired effect in your code, consider implementing it like this:

// Save original rotation
var initialRotation = new THREE.Euler().copy( camera.rotation );

// Set final rotation (using lookAt)
camera.lookAt( object.position );
var targetRotation = new THREE.Euler().copy( camera.rotation );

// Reset to initial rotation
camera.rotation.copy( initialRotation );

// Tween animation
new TWEEN.Tween( camera ).to( { rotation: targetRotation }, 600 ).start();

Answer 2

To achieve the desired effect in your code, consider implementing it like this:

// Save original rotation
var initialRotation = new THREE.Euler().copy( camera.rotation );

// Set final rotation (using lookAt)
camera.lookAt( object.position );
var targetRotation = new THREE.Euler().copy( camera.rotation );

// Reset to initial rotation
camera.rotation.copy( initialRotation );

// Tween animation
new TWEEN.Tween( camera ).to( { rotation: targetRotation }, 600 ).start();

Answer 3

Answer №2

A modified version of mrdoob's solution using quaternions

// store initial rotation
var originalRotation = camera.quaternion.clone();

// calculate desired rotation (using lookAt)
camera.lookAt( target );
var finalRotation = camera.quaternion.clone();

// reset to initial rotation
camera.quaternion.copy( originalRotation );

// Apply Tween for smooth transition
var rotationTween = new TWEEN.Tween( camera.quaternion ).to( finalRotation, 600 ).start();

Answer 4

A modified version of mrdoob's solution using quaternions

// store initial rotation
var originalRotation = camera.quaternion.clone();

// calculate desired rotation (using lookAt)
camera.lookAt( target );
var finalRotation = camera.quaternion.clone();

// reset to initial rotation
camera.quaternion.copy( originalRotation );

// Apply Tween for smooth transition
var rotationTween = new TWEEN.Tween( camera.quaternion ).to( finalRotation, 600 ).start();

Answer 5

Answer №3

Using a positional tween in my code for smooth camera movement, I have implemented this function with a duration parameter:

function createSmoothTransition (currentPosition, targetPosition, duration)
{
    TWEEN.removeAll();    // clears previous tweens if any

    new TWEEN.Tween(currentPosition)
        .to(targetPosition, duration)
        .easing(TWEEN.Easing.Bounce.InOut)
        .onUpdate(function() {
            // update camera position during tween
            camera.position.copy(currentPosition);
        })
        .start();
}

This function is invoked like this:

createSmoothTransition(camera.position.clone(), new THREE.Vector3(x, y, z), 7500);

This results in a 7.5-second gradual transition.

Answer 6

Using a positional tween in my code for smooth camera movement, I have implemented this function with a duration parameter:

function createSmoothTransition (currentPosition, targetPosition, duration)
{
    TWEEN.removeAll();    // clears previous tweens if any

    new TWEEN.Tween(currentPosition)
        .to(targetPosition, duration)
        .easing(TWEEN.Easing.Bounce.InOut)
        .onUpdate(function() {
            // update camera position during tween
            camera.position.copy(currentPosition);
        })
        .start();
}

This function is invoked like this:

createSmoothTransition(camera.position.clone(), new THREE.Vector3(x, y, z), 7500);

This results in a 7.5-second gradual transition.

Answer 7

Answer №4

Thank you everyone,

After struggling with tweening the camera, I decided to implement a different approach

if (target.y < selectedHotspot.position.y - 2)
        lat += 0.1;
    else if (target.y > selectedHotspot.position.y + 2)
            lat -= 0.1; 

    if (target.x < selectedHotspot.position.x - 5)
        lon += 0.5;
    else if (target.x > selectedHotspot.position.x + 5)
        lon -= 0.5;
    else {

        camera.lookAt(selectedHotspot.position);

        if (camera.fov > selectedHotspot.bubble.distance*0.05){
            camera.fov -= 0.1;

        }
        if(sceneReady)
            loadScene();
    }

    camera.updateProjectionMatrix();

This logic was integrated into a function called within the render loop, yielding successful results.

Answer 8

Thank you everyone,

After struggling with tweening the camera, I decided to implement a different approach

if (target.y < selectedHotspot.position.y - 2)
        lat += 0.1;
    else if (target.y > selectedHotspot.position.y + 2)
            lat -= 0.1; 

    if (target.x < selectedHotspot.position.x - 5)
        lon += 0.5;
    else if (target.x > selectedHotspot.position.x + 5)
        lon -= 0.5;
    else {

        camera.lookAt(selectedHotspot.position);

        if (camera.fov > selectedHotspot.bubble.distance*0.05){
            camera.fov -= 0.1;

        }
        if(sceneReady)
            loadScene();
    }

    camera.updateProjectionMatrix();

This logic was integrated into a function called within the render loop, yielding successful results.

Answer 9

Answer №5

Utilizing controls.target for tweening the rotation of the camera has been highly effective in my project.

createjs.Tween.get(controls.target)
.to({
  x: tweenPos.x + 4,
  y: tweenPos.y - 9,
  z: tweenPos.z + 0.002
}, 900, createjs.Ease.linear);

Answer 10

Utilizing controls.target for tweening the rotation of the camera has been highly effective in my project.

createjs.Tween.get(controls.target)
.to({
  x: tweenPos.x + 4,
  y: tweenPos.y - 9,
  z: tweenPos.z + 0.002
}, 900, createjs.Ease.linear);

The concept of tweening camera.lookat in Three.js

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Clicking on the initial link will in turn prompt clicks on the subsequent links

What is the best way to access a DOM node within a withStyle component?

.npmignore failing to exclude certain files from npm package

Attempting to utilize Vue js to connect to an API

jquery survey quiz

Footer div is being covered by the page

View the gathered HTML content in a fresh browser tab

Not all divs are triggering the hover event as expected

Obtain the dimensions of the outermost layer in a JSON file

Alter the navigation but keep the URL intact without modifying the view

Unable to execute any actions on object in JavaScript

Tips for obtaining the final document in a VueFire query

challenges surrounding the use of getElementByTagName

I can't seem to get anything to show up on my React

Jest - experiencing intermittent test failures on initial run, yet succeeding on subsequent runs

Discovering the specific DOM element that has been clicked using only JavaScript

The use of HTML5 required attribute is ineffective when submitting forms via AJAX

The content section sits discreetly behind the sidebar

Is there a jQuery function that can produce repeated output and append content with each successive click?

Update the useState function individually for every object within an array