使用three.js 可以围绕其中心旋转平移对象。我创建了一个 jsfiddle,http://jsfiddle.net/yKt6h/4/
当我检查控制面板中的自动旋转模式时,我能够围绕其中心旋转平移的立方体。当我尝试用鼠标移动来旋转立方体时,是否有可能产生类似的效果。
如果可能,请提供示例代码
使用three.js 可以围绕其中心旋转平移对象。我创建了一个 jsfiddle,http://jsfiddle.net/yKt6h/4/
当我检查控制面板中的自动旋转模式时,我能够围绕其中心旋转平移的立方体。当我尝试用鼠标移动来旋转立方体时,是否有可能产生类似的效果。
如果可能,请提供示例代码
查看您的 jsFiddle 时,我在控制台中遇到错误THREE is not defined
但是,您要问的并不难。轨迹球相机旨在完全按照您的意愿行事。如果您在原点渲染您的对象,您只需要初始化轨迹球控件。我创建了一个使用 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);