threejs lerp 和相机动画不流畅答案

【问题标题】：threejs lerp and camera the animation is not smooththreejs lerp 和相机动画不流畅
【发布时间】：2019-10-01 18:55:21
【问题描述】：

线性插值有什么问题？
在 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()
为什么会这样？

【问题讨论】：

标签： javascript three.js

【解决方案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);
}

【讨论】：