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

just_user

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

我有两个问题,我可以弄清楚如何限制运动,以使其永远不会在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

士兵

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

为确保不低于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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Three.JS通过移动设备围绕对象旋转相机

来自分类Dev

Three.js-鼠标移动时沿(0,0,0)旋转对象

来自分类Dev

如何在Three.js中使用鼠标旋转对象?

来自分类Dev

three.js通过轴方向旋转对象

来自分类Dev

Three.js通过圆路径旋转对象

来自分类Dev

three.js旋转面向对象

来自分类Dev

在Three.js的中心旋转mergeometry对象

来自分类Dev

在three.js中旋转对象

来自分类Dev

Three.js-对象跟随鼠标位置

来自分类Dev

Three.js旋转

来自分类Dev

当对象旋转时Three.js旋转相机

来自分类Dev

three.js-通过鼠标单击获取对象名称

来自分类Dev

通过鼠标单击Three.js切换对象位置

来自分类Dev

Three.js将鼠标移动限制为仅场景

来自分类Dev

围绕对象轴THREE.js旋转对象

来自分类Dev

使用Three.js,WebGL显示对象的顶点并旋转对象

来自分类Dev

使用Three.js,WebGL显示对象的顶点并旋转对象

来自分类Dev

Three.js:添加和删除旋转对象的子代

来自分类Dev

Three.js:添加和删除旋转对象的子代

来自分类Dev

Three.js-围绕特定轴旋转对象

来自分类Dev

Three.js 对象返回错误的位置/旋转/缩放值

来自分类Dev

在Three.js中沿样条线(圆)移动对象

来自分类Dev

Three.js将对象移动到相机前面

来自分类Dev

Three.js向前移动对象,无需translateZ

来自分类Dev

Three.js对象居中

来自分类Dev

Three.JS对象裁剪?

来自分类Dev

Three.js对象居中

来自分类Dev

在three.js中根据鼠标位置旋转球体x轴

来自分类Dev

获取面部旋转Three.js