1

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

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

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

4

1 回答 1

2

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

由于我的月亮物体位于场景的原点,我所要做的就是将相机设置为离原点一定距离。我们将它放在正 z 轴上,因此它已经在原点处查看我们的对象。然后我们调用上面的函数来设置控件。我传入一个自定义旋转速度:

controls = initTrackball(camera, 0.8);

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

controls.update(camera);
于 2012-09-10T02:16:43.747 回答