本文主要是介绍Three.js - TrackballControls 轨迹球控件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
THREE.TrackballControls()轨迹球控件，最常用的控件，可以使用鼠标轻松的移动、平移，缩放场景。
示例
https://ithanmang.gitee.io/threejs/home/201809/20180903/01-TrackballControls.html
1、加入库文件
加入正确的js文件
<script src="../../libs/examples/js/controls/TrackballControls.js"></script>
2、创建实例
然后,创建控件并绑定到相机上
/* 轨迹球控件 */
controls = new THREE.TrackballControls(camera, renderer.domElement);
这里需要两个参数camere和render.domELement，第二个参数可选，但是默认为当前文档的document，如果你只想控制某个画布，可以添加画布的domLement元素。
2.1、构造函数
THREE.TrackballControls = function ( object, domElement )
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
2.2、设置属性
/* 属性参数 */
controls.rotateSpeed = 0.2;// 旋转速度
controls.zoomSpeed = 0.2;// 缩放速度
controls.panSpeed = 0.1;// 平controlscontrols.staticMoving = false;// 静止移动，为 true 则没有惯性
controls.dynamicDampingFactor = 0.2;// 阻尼系数 越小 则滑动越大controls.minDistance = 50; // 最小视角
controls.maxDistance = 350;// 最大视角 Infinity 无穷大
这是一些常需要设置的属性，也可以直接默认。
2.3、更新 controls
需要在循环函数中不断的更新 controls
/* 数据更新 */function update() {stats.update();controls.update();}
4、操作方式
| 操控 | 动作 |
|---|---|
| 按住左键，拖动 | 场景旋转，翻滚 |
| 滚轮、中键 | 缩放 |
| 右键 | 平移 |
5、示例代码
示例中用到了一个处理颜色的js库文件，可以去https://github.com/gka/chroma.js 下载，官方文档http://gka.github.io/chroma.js/#color-rgba 。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>TrackballControls 轨迹球控件</title><style>body {margin: 0;overflow: hidden; /* 溢出隐藏 */}#loading {position: fixed;top: 50%;left: 50%;color: #FFFFFF;font-size: 20px;margin-top: -30px;margin-left: -40px;}</style><script src="../../libs/build/three-r93.js"></script><script src="../../libs/examples/js/Detector.js"></script><script src="../../libs/examples/js/libs/dat.gui.min.js"></script><script src="../../libs/examples/js/libs/stats.min.js"></script>这篇关于Three.js - TrackballControls 轨迹球控件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
