轨迹球控件

更新时间: 2021-05-08 14:08:48

使用TrackballControls之前，你首先要在网页中包含正确的JavaScript文件：

<script type="text/javascript" src="../libs/TrackballControls.js"></script>

包含了这个文件之后，我们就可以创建控件，并将它绑定到相机上:

var trackballControls = new THREE.TracballControls(camera)
trackballControls.rotateSpeed = 1.0
trackballControls.zoomSpeed = 1.0
trackballControls.panSpeed = 1.0

1
2
3
4

更新相机的位置可以在render循环中完成:

var clock = new THREE.Clock()
function render(){
    var delta = clock.getDelta()
    trackballControls.update(delta)
    requestAnimationFrame(render)
    webGLRenderer.render(scene,camera)
}

1
2
3
4
5
6
7

在前面这段代码里，我们会看到一个新的Three.js对象：THREE.Clock。THREE.Clock可以用来精确地计算出上次调用后经过的时间，或者渲染循环耗费的时间。你只要调用clock.getDelta()函数即可。这个函数会返回此次调用和上次调用之间经过的时间。要更新相机的位置，我们可以调用trackballControls.update()函数。在这个函数里我们需要提供自上次update()函数调用以来经过的时间。为此我们要使用THREE.Clock对象的getDelta()函数。你获取会奇怪为什么部门不直接把帧频（1/60）传给update函数。原因是当我们请求动画帧时，我们期待的帧频是60fps，但这并不能得到保证。受外部因素影响，帧频可能会有不同。为了保证相机能够平缓地移动和旋转，我们需要传入精确的时间差。

你可以用下面的方式来操控相机：

操控	动作
按住左键，拖动	在场景中旋转、翻滚相机
转动滚轮	放大和缩小
按住中间，拖动	放大和缩小
按住右键，拖动	在场景中平移

← 使用相机飞行控件 →