Three.js 在鼠标滚轮上平滑相机移动答案

【问题标题】：Three.js smooth camera move on mousewheelThree.js 在鼠标滚轮上平滑相机移动
【发布时间】：2018-02-10 10:42:23
【问题描述】：

有人可以帮助我吗？我正在尝试找出如何在鼠标滚轮上进行平滑的相机移动（向前/向后）。我有这样的东西，但动作不流畅。

document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
function onDocumentMouseWheel (event) {
    if (event.wheelDeltaY >= 10) {
        camera.position.z -= 100;
    } else {
        camera.position.z += 100;
    }
}

感谢您的帮助！

【问题讨论】：

标签： javascript scroll three.js mousewheel

【解决方案1】：

我有解决办法（我不知道它是否正确，但它的工作原理）

在渲染函数中（更新）

if (Mouse.moving && Mouse.speed > 0) {
    Mouse.speed -= Mouse.maxSpeed / 20;
    Mouse.smooth();
}

鼠标对象：

var Mouse = {
    moving: false,
    movingForward: null,
    speed: 60,
    timeOfSmooth: 2000, // maxTimeOfSmooth

    wheelListener: function () {
        _this = this;
        _this.maxSpeed = _this.speed; // set maxSpeed
        document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
        function onDocumentMouseWheel (event) {
            _this.speed = _this.maxSpeed;
            _this.moving = true;

            if (event.wheelDeltaY >= 10) {
                _this.movingForward = true;
            } else {
                _this.movingForward = false;
            }

            clearTimeout(_this.timeOut);
            _this.timeOut = setTimeout(function () {
                _this.moving = false;
            }, _this.timeOfSmooth);
        }
    },

    smooth: function () {
        if (this.moving) {
            if (_this.movingForward) {
                Engine.camera.position.z -= _this.speed;
            } else {
                Engine.camera.position.z += _this.speed;
            }
        }
    },

    init: function () {
        this.wheelListener();
    }
};

【讨论】：