Question

我们喜欢three.js！这是我们几年前使用它构建的页面。 https://www.jgprolock.com

我们正在修改此网站上的动画。

页面加载后，用户可以拖动和旋转对象。但这真的是一招。我们使用轨道控制来围绕场景旋转摄像机，因此我们的主要对象位于场景中心（位置x，y，z都等于0）。如果我们没有将物体放在中心，它的旋转开始看起来不均匀，因为相机现在围绕物体没有的中心旋转。

为了使对象看起来像在左侧，我们最终将画布向左移动，然后在滚动后继续播放动画时将其重新向右或向左移动。

所以，我的问题是..有没有人有一个例子如何通过旋转实际物体本身来实现这个功能，而不是使用轨道控制插件在整个场景周围旋转相机？

或者是否可以修改轨道控件以围绕对象而不是整个场景旋转？

Answer 1

我一直在寻找这个问题，但在问这个问题之后我偶然发现了这个链接，这实际上是我们想要做的一个例子。 https://jsfiddle.net/n6u6asza/1205/

通过链接复制此工作的关键:(虽然我不是100％确定这一切意味着什么）

/* */
var isDragging = false;
var previousMousePosition = {
    x: 0,
    y: 0
};
$(renderer.domElement).on('mousedown', function(e) {
    isDragging = true;
})
.on('mousemove', function(e) {
    //console.log(e);
    var deltaMove = {
        x: e.offsetX-previousMousePosition.x,
        y: e.offsetY-previousMousePosition.y
    };

    if(isDragging) {

        var deltaRotationQuaternion = new three.Quaternion()
            .setFromEuler(new three.Euler(
                toRadians(deltaMove.y * 1),
                toRadians(deltaMove.x * 1),
                0,
                'XYZ'
            ));

        cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
    }

    previousMousePosition = {
        x: e.offsetX,
        y: e.offsetY
    };
});
/* */

Answer 2

如果您想要一篇关于如何在不使用不必要的jquery依赖项的情况下实现此目标的文章，可以看看here

这会在发生mousemove事件时使用eventListener查找mousedown事件，然后将坐标传递给自定义函数。

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

    var canvas = renderer.domElement    
    
    canvas.addEventListener('mousemove', function (evt) {
            if (!mouseDown) {return}
            //console.log('drag')
            evt.preventDefault();
            var deltaX = evt.clientX - mouseX,
                deltaY = evt.clientY - mouseY;
            mouseX = evt.clientX;
            mouseY = evt.clientY;

            // DO SOMETHING HERE WITH X and Y 
            object.rotation.x += deltaX
            
        }, false);
        
    canvas.addEventListener('mousedown', function (evt) {
        evt.preventDefault();
        mouseDown = true;
        mouseX = evt.clientX;
        mouseY = evt.clientY;
    }, false);
    
    canvas.addEventListener('mouseup', function (evt) {
        evt.preventDefault();
        mouseDown = false;
    }, false);
}

但是，如果您导入了OrbitControls或DragControls，这将不起作用！

旋转像OrbitControls这样的对象，但只旋转对象本身

2 个答案: