Question

使用three.js可以围绕其中心旋转平移对象。我创建了一个jsfiddle，http://jsfiddle.net/yKt6h/4/

当我在控制面板中检查自动旋转模式时，我可以围绕其中心旋转平移的立方体。当我尝试用鼠标移动旋转立方体时，是否可能产生类似的效果。

如果可能，请提供示例代码

Answer 1

我在查看你的jsFiddle THREE is not defined时在控制台中收到错误但是，你要问的并不困难。轨迹球摄像机的设计完全符合您的要求。如果要在原点渲染对象，则只需初始化轨迹球控件。我创建了一个简单的moon demo that uses TrackballControls。您无需在TrackballControls.js中进行任何修改。

在上面的演示中，我调用一个函数初始化轨迹球控件，函数在我的ThreeUtil.js文件中定义为：

function initTrackball(camera, rotate, zoom, pan, damping) {
    var controls = new THREE.TrackballControls(camera);
    controls.rotateSpeed = rotate || 1.0;
    controls.zoomSpeed = zoom || 1.2;
    controls.panSpeed = pan || 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = damping || 0.3;
    return controls;
}

如果您不希望用户能够平移或缩放，只能旋转对象，只需在上面的函数中设置controls.noZoom = true和controls.noPan = true。

由于我的月球物体位于我的场景的原点，所以我所要做的就是将相机设置在远离原点的位置。我们将它放在正z轴上，因此它已经在原点看着我们的物体。然后我们调用上面的函数来设置控件。我传递自定义旋转速度：

controls = initTrackball(camera, 0.8);

然后在每个帧中你所要做的就是在你的动画循环中调用更新函数：

controls.update(camera);

如何使用three.js围绕中心旋转平移对象？

1 个答案: