如何使用 Three.js 实现平滑的相机移动，例如 lerping？答案

【问题标题】：How do I implement smooth camera moving like lerping with Three.js?如何使用 Three.js 实现平滑的相机移动，例如 lerping？
【发布时间】：2022-01-17 23:39:50
【问题描述】：

我想用 Three.js 实现一些平滑的相机移动。我现在所拥有的（已编辑，但如下所示）可以正常工作，我可以单击按住并拖动并在我的场景中移动并且我的相机移动。但我希望相机像加速和减速一样平稳移动，比如这个网站：https://annoyingmuseum.zendesk.com/。现在，只要我松开点击并拖动鼠标，相机就会停止。我想要达到的效果类似于 Three.js 的 OrbitalControls 阻尼效果。

import * as THREE from "three";

export default class Experience {
    constructor(options = {}) {
        this.camera = new Camera();
        this.renderer = new Renderer(this.canvas);
        this.drag = new THREE.Vector2();


        this.animate();
        this.onMouseDrag();
    }

    updateCamera(event) {
        if (event.movementX > 0) {
            this.drag.x -= event.movementX * 0.01;
        } else {
            this.drag.x -= event.movementX * 0.01;
        }
        if (event.movementY > 0) {
            this.drag.y -= event.movementY * 0.01;
        } else {
            this.drag.y -= event.movementY * 0.01;
        }
        this.camera.position.x = this.drag.x;
        this.camera.position.z = this.drag.y;
    }

    onMouseDrag() {
        let holder = this.updateCamera.bind(this);

        window.addEventListener("mousedown", () => {
            window.addEventListener("mousemove", holder);
        });
        window.addEventListener("mouseup", () => {
            window.removeEventListener("mousemove", holder);
        });
    }


    animate() {
        requestAnimationFrame(this.animate.bind(this));
        this.renderer.render(this.scene, this.camera);
    }
}

这是我迄今为止尝试过的，但它没有进行任何平滑处理，只会让我的相机在我单击并拖动移动时跳跃和出现故障。但在我松开嘴后，动作很流畅。唯一的问题是它在跳来跳去。

constructor(options = {}) {
    this.cameraTargetPosition = new THREE.Vector3(0, 20, 12); //added starting position
    // ...
}
updateCamera(event) {
    if (event.movementX > 0) {
        this.cameraTargetPosition.x -= event.movementX * 0.01; //changed these from "this.drag"
    } else {
        this.cameraTargetPosition.x -= event.movementX * 0.01;
    }
    if (event.movementY > 0) {
        this.cameraTargetPosition.y -= event.movementY * 0.01;
    } else {
        this.cameraTargetPosition.y -= event.movementY * 0.01;
    }
}

animate() {
    this.camera.position.lerp(this.cameraTargetPosition, 0.4); //added this
    //...
}

【问题讨论】：

标签： javascript three.js camera

【解决方案1】：

没关系，我发布的解决方案有效，我有一些额外的代码导致我的系统出现故障。这具有我想要的抑制“lerping”效果。

constructor(options = {}) {
    this.cameraTargetPosition = new THREE.Vector3(0, 20, 12); //added starting position
    // ...
}
updateCamera(event) {
    if (event.movementX > 0) {
        this.cameraTargetPosition.x -= event.movementX * 0.01; //changed these from "this.drag"
    } else {
        this.cameraTargetPosition.x -= event.movementX * 0.01;
    }
    if (event.movementY > 0) {
        this.cameraTargetPosition.y -= event.movementY * 0.01;
    } else {
        this.cameraTargetPosition.y -= event.movementY * 0.01;
    }
}

animate() {
    this.camera.position.lerp(this.cameraTargetPosition, 0.4); //added this
    //...
}

【讨论】：