javascript - Threejs lerp和相机动画不流畅

Question

线性插值有什么问题？
在 update() 中，如果这是 animate() 当我在 update() 中调用 ZoomCamera() 时，有 lerp 具有 smooth 但是当我打电话到这里时

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 个版本的同一函数。

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

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