三.js 在鼠标向下旋转对象并移动 [英] three.js rotate object on mouse down and move

问题描述

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

I'm trying to get a good mouse movement in my scene so I can rotate around the object.

我有两个问题，我可以弄清楚如何限制移动，使其在 Y 轴上的旋转永远不会低于 0 度.(不想从下面看物体，只看上面)

I have two problems, I can figure out how to limit the movement so that it never rotates below 0 degrees on the Y axis. (I dont want to see the object from below, only above)

我想不出的第二件事是如何使运动流畅.现在我在 jsfiddle 中取得的成果是相机在开始旋转之前移回其起始位置.

And the second thing I can't figure out is how to make the movement smooth. Now with what I have achieved in the jsfiddle is that the camera moves back to its starting position before starting to rotate.

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

这是我没有得到的部分:

This is the part I dont get:

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

What I want without using an extra library: http://www.mrdoob.com/projects/voxels/#A/afeYl

推荐答案

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

You can rotate you scene with this code,

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

To ensure to not rotate under 0, simule rotation of a vector (0,0,1) and check if y of vector is negative

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;
}

这篇关于三.js 在鼠标向下旋转对象并移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！