javascript 三.js 在鼠标向下旋转对象并移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19588602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
three.js rotate object on mouse down and move
提问by just_user
I'm trying to get a good mouse movement in my scene so I can rotate around the object.
我试图在我的场景中获得良好的鼠标移动，以便我可以围绕对象旋转。
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)
我有两个问题，我可以弄清楚如何限制运动，使其永远不会在 Y 轴上旋转低于 0 度。（我不想从下面看物体，只在上面看）
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.
我想不通的第二件事是如何使运动顺畅。现在我在 jsfiddle 中取得的成果是相机在开始旋转之前移回其起始位置。
My try: http://jsfiddle.net/phacer/FHD8W/4/
我的尝试：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);
What I want without using an extra library: http://www.mrdoob.com/projects/voxels/#A/afeYl
不使用额外库的情况下我想要什么：http: //www.mrdoob.com/projects/voxels/#A/afeYl
回答by Troopers
You can rotate you scene with this code,
您可以使用此代码旋转场景，
To ensure to not rotate under 0, simule rotation of a vector (0,0,1) and check if y of vector is negative
为确保不在 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;
}
