使用three.js可以围绕其中心旋转平移对象。我创建了一个jsfiddle,http://jsfiddle.net/yKt6h/4/
当我在控制面板中检查自动旋转模式时,我可以围绕其中心旋转平移的立方体。当我尝试用鼠标移动旋转立方体时,是否可能产生类似的效果。
如果可能,请提供示例代码
答案 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 = true
和controls.noPan = true
。
由于我的月球物体位于我的场景的原点,所以我所要做的就是将相机设置在远离原点的位置。我们将它放在正z轴上,因此它已经在原点看着我们的物体。然后我们调用上面的函数来设置控件。我传递自定义旋转速度:
controls = initTrackball(camera, 0.8);
然后在每个帧中你所要做的就是在你的动画循环中调用更新函数:
controls.update(camera);