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

Question

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

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

感谢您的帮助！

Answer 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();
    }
};

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

Three.js smooth camera move on mousewheel

javascript

scroll

mousewheel

three.js