three.js轨道控制器OrbitControls.js

学习交流欢迎加群：789723098，博主会将一些demo整理共享

 

轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放，下面介绍轨道控制器的代码实现方式：

//添加轨道控制器
//新建一个轨道控制器
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.target = new THREE.Vector3(0, 0, 0);//控制焦点
orbitControls.autoRotate = false;//将自动旋转关闭
clock = new THREE.Clock();//用于更新轨道控制器

新建一个轨道控制器后，就要让它实时工作和更新，一般写在渲染和动画的函数里面：

elta = clock.getDelta();//获取时间差
orbitControls.update(delta);//更新时间

实际上轨道控制器还有很多属性可以设置，但在本例中没有应用到，详细的用法可参考官方文档：点击打开链接。

 

操控	效果
按住鼠标左键并移动	摄像机围绕场景中心旋转
转动鼠标滑轮或按住中键并移动	放大和缩小
按住鼠标右键并移动	在场景中平移
上、下、左、右方向键	在场景中平移

下面结合实际例子，实现一个场景的轨道控制。（这个例子的静态版本在我的另一篇文章：点击打开链接），加了轨道控制器后，其效果如下图所示：

下面是示例程序代码的呈现：