three.js - 像 OrbitControls 一样旋转对象，但只旋转对象本身

Question

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

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

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

为了让它看起来像对象在左侧，我们最终将 Canvas 向左移动，然后随着动画在滚动后继续进行，我们将它移回右侧或左侧。

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

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

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