three.js鼠标按下并移动时旋转对象

Question

three.js鼠标按下并移动时旋转对象

javascriptthree.js

8

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

我有两个问题，我无法想出如何限制移动，使其永远不会在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

- just_user

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Troopers · Accepted Answer

使用此代码可以旋转您的场景。

为确保不会旋转到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;
    var 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;
}