Question

我正在尝试在我的场景中获得良好的鼠标移动，以便我可以围绕对象旋转。

我有两个问题，我可以弄清楚如何限制运动，使它在Y轴上永远不会旋转到0度以下。（我不想从下面看到对象，仅在上面）

我无法弄清楚的第二件事是如何使运动平稳。现在我在jsfiddle中取得的成就是在开始旋转之前摄像机移回其起始位置。

我的尝试：http://jsfiddle.net/phacer/FHD8W/4/

这是我没有得到的部分：

var spdy =  (HEIGHT_S / 2 - mouseY) / 100;
var spdx =  (WIDTH / 2 - mouseX) / 100;

root.rotation.x += -(spdy/10);
root.rotation.y += -(spdx/10);

我想要的是不使用额外的库：http://www.mrdoob.com/projects/voxels/#A/afeYl

Answer 1

您可以使用此代码

旋转场景

为确保不在0下旋转，向量（0,0,1）的模拟旋转并检查向量的y是否为负

var mouseDown = false,
        mouseX = 0,
        mouseY = 0;

    function onMouseMove(evt) {
        if (!mouseDown) {
            return;
        }

        evt.preventDefault();

        var deltaX = evt.clientX - mouseX,
            deltaY = evt.clientY - mouseY;
        mouseX = evt.clientX;
        mouseY = evt.clientY;
        rotateScene(deltaX, deltaY);
    }

    function onMouseDown(evt) {
        evt.preventDefault();

        mouseDown = true;
        mouseX = evt.clientX;
        mouseY = evt.clientY;
    }

    function onMouseUp(evt) {
        evt.preventDefault();

        mouseDown = false;
    }

    function addMouseHandler(canvas) {
    canvas.addEventListener('mousemove', function (e) {
        onMouseMove(e);
    }, false);
    canvas.addEventListener('mousedown', function (e) {
        onMouseDown(e);
    }, false);
    canvas.addEventListener('mouseup', function (e) {
        onMouseUp(e);
    }, false);
}

    function rotateScene(deltaX, deltaY) {
    root.rotation.y += deltaX / 100;
    root.rotation.x += deltaY / 100;
}

three.js在鼠标向下旋转对象并移动

1 个答案: