像OrbitControls一样旋转一个物体，但只旋转物体本身。

Question

我们非常喜欢three.js！这里是我们几年前使用它构建的页面。 https://www.jgprolock.com 我们正在修订该网站上的动画。

一旦页面加载完成，用户就可以拖动和旋转对象。但实际上这是一个诡计。我们使用轨道控制器来旋转相机，从而围绕我们的场景旋转，因此我们的主要对象位于场景中心（位置x、y、z都为0）。如果我们没有将对象放在中心位置，那么它在旋转时会看起来不平衡，因为相机现在围绕对象没有的中心旋转。

为了使它看起来像对象在左侧，我们最终将画布移到左侧，然后在滚动后将它移回右侧或左侧。

所以，我的问题是...是否有人有一个示例，如何通过旋转实际的对象本身来实现这个功能，而不是使用轨道控件插件围绕整个场景旋转相机？

还是有办法修改轨道控制器，使其围绕对象而不是整个场景旋转？

- Starfs

Answer 1

我已经寻找了一段时间，但就在问这个问题后，我找到了这个链接，其中实际上有一个我们正在尝试做的示例。 https://jsfiddle.net/n6u6asza/1205/

从链接中复制的使其工作的关键：（虽然我不确定这全部意味着什么）

/* */
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
    };
});
/* */

- Starfs

Answer 2

如果您想了解如何在不使用不必要的jquery依赖项的情况下实现此操作，可以查看此处。

此方法使用eventListener来查找mousedown事件发生时的mousemove事件，然后将坐标传递给自定义函数。

   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，这种方法将不起作用！

- user2589273