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

时间:2012-07-24 09:52:47

标签: three.js

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

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

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

1 个答案:

答案 0 :(得分:2)

我在查看你的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 = truecontrols.noPan = true

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

controls = initTrackball(camera, 0.8);

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

controls.update(camera);