Threejs lerp和相机动画不流畅

Question

线性插值有什么问题？
在 update() 中，如果这是 animate() 并且当我在 update() 中调用 ZoomCamera() 时，有平滑的 lerp 但当我在这里调用时

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);

如果 没有平滑的 lerp 但急剧的过渡我会错过什么？

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

onObjectsClick 是在 animate() 中，
为什么会发生？

Answer 1

不要将您的OnObjectsClick()函数包含在动画循环中，这将使您的系统变得混乱，因为它可能每秒创建 60 个版本的同一函数。

另外，不要THREE.Vector3每次调用该zoomCamera()函数时都创建一个新的。相反，创建一个目标，并让相机在动画循环中不断向该目标倾斜。当您检测到点击时，更改相机目标位置的值。像这样：

// Set camera to original position
var cameraTarget = new THREE.Vector3(3, 4, 4);

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

    // ...

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

    // ...

}

animate() {
    // Camera will lerp closer to target on each frame
    camera.position.lerp(cameraTarget, 0.1);
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}