The animation in threejs using lerp and camera transitions lacks fluidity

Question

The animation in threejs using lerp and camera transitions lacks fluidity

Why does linear interpolation pose a problem?
When calling zoomCamera() inside an update() function that is being animated, there is a smooth lerp effect. However, when called within the onObjectsClick() function, the lerp is sharp.

function onObjectsClick(event) {
            event.preventDefault();
            setPickPosition(event);
            raycasting(pickPosition, scene, camera);
            pickedObject = intersectedObjects[0].object;
            const notebook = pickedObject.getObjectByName('notebook');
            const laptop = pickedObject.getObjectByName('laptop');

            if (notebook || laptop) {

                zoomCamera();
            }

        }
canvas.addEventListener('click', onObjectsClick, false);

Within the if statement, there is no smooth lerp effect like in the update(), only a sharp transition. What am I missing?

function zoomCamera() {
            const vec = new THREE.Vector3(-1, 2, 2);
            const alpha = .1;
            camera.position.lerp(vec, alpha);
            console.log('zoom');
        }

Also, why is onObjectsClick() being called within the animate() function?

javascript three.js

Answer 1

Answer №1

Avoid placing your OnObjectsClick() function inside your animation loop as it can disrupt the system by generating multiple versions of the same function every second.

Furthermore, refrain from creating a new instance of THREE.Vector3 every time you invoke the zoomCamera() function. Instead, establish a single target and continuously move the camera towards that target within your animation loop. Modify the camera's target position upon detecting a click event, as demonstrated below:

// Define initial camera target position
var cameraTarget = new THREE.Vector3(3, 4, 4);

// Click event listener placed outside the animation loop
function onObjectsClick(event) {

    // ...

    if (notebook || laptop) {
        // Update target position when conditions are met
        cameraTarget.set(-1, 2, 2);
    }

    // ...

}

animate() {
    // Smoothly transition camera towards target on each frame
    camera.position.lerp(cameraTarget, 0.1);
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

Answer 2

Avoid placing your OnObjectsClick() function inside your animation loop as it can disrupt the system by generating multiple versions of the same function every second.

Furthermore, refrain from creating a new instance of THREE.Vector3 every time you invoke the zoomCamera() function. Instead, establish a single target and continuously move the camera towards that target within your animation loop. Modify the camera's target position upon detecting a click event, as demonstrated below:

// Define initial camera target position
var cameraTarget = new THREE.Vector3(3, 4, 4);

// Click event listener placed outside the animation loop
function onObjectsClick(event) {

    // ...

    if (notebook || laptop) {
        // Update target position when conditions are met
        cameraTarget.set(-1, 2, 2);
    }

    // ...

}

animate() {
    // Smoothly transition camera towards target on each frame
    camera.position.lerp(cameraTarget, 0.1);
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

The animation in threejs using lerp and camera transitions lacks fluidity

Answer №1

Similar questions

Access the information from the text box and text area, then store it into a cookie using either jQuery or JavaScript

Difficulty resolving react-dom/client version 17.0.1 with React Three Drei library

Exploring connections among Array Objects on a Map

Error: Attempting to access the value property of a null object within a React Form is not possible

The process of sending JSON data to a Vue instance

Is it possible to refrain from using the object variable name in an ng-repeat loop?

Utilizing Vue.js: Dynamically linking v-model to route parameters depending on the current state

Transform CSV data into JSON format to generate an empty JSON file

"Embedding PHP code within HTML tags, which is then embedded within

Is there a way to eliminate an object from a multidimensional nested array in JavaScript and retrieve the parent array?

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

Implement jquery styling to ajax response

What is the best way to save characters from different languages into variables?

How can I switch out an item within FabricJS?

Tips for real-time editing a class or functional component in Storybook

When I try to access localhost, it directs me to http://localhost:3000/myprofile%20 instead of localhost:/3000/myprofile

What possible reasons could cause an API request to result in an empty array being returned?

Getting a value from a Child component to a Parent component in Nuxt.js - a step-by-step guide

Issue with Vue.js 2.0 transition not triggering on changing routes dynamically

Avoiding conflicts between banners, text, and images for HTML/CSS design