ThreeJs常用的工具，便于调试和项目效果

1、相机控件OrbitControls.js

通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作,本质上改变的并不是场景，而是相机的参数,通过前面的学习应该知道，相机的位置角度不同，同-个场景的渲染效果是不一样,比如一个相机绕着一个场景旋转, 就像场景旋转-样。
如果你想深入了解相机控制器OrbitControls的每一个功能， OrbitControls是如何对Three.js正投影 相机和透视投影相机对象进行封装的,可以阅读Three.js\examples\js\controls目录下OrbitControls.js文件。
调用OrbitControls的时候需要引入OrbitControls.js文件。

<!-- 引入Three.js相机控件OrbitControls.js -->
旋转缩放平移

如果你想实现一个场景旋转缩放平移的效果，直接把相机对象camera作为OrbitControls构造函数的参数就可以。

鼠标操作:通过拖动鼠标左键可以720旋转展示三维场景，通过拖动鼠标右键可以平移三维场景，通过上下滚动鼠标中键可以缩放三维场景。
// 创建控件对象相机对象camera作为参数/1 控件可以监听鼠标的变化,改变相机对象的属性
var controls =newTHREE.OrbitControls(camera);
禁止旋转平移缩放(.enablePan属性)

比如一个展示-个三维场景， 比如一辆轿车产品， 你不希望鼠标右键拖动会产生一个平移效果。 可以通过设置相机空间对象OrbitControls的.enablePan属性

controls.enablePan =false;  // 禁止右键拖拽
通过.enableZoom属性可以控制是否允许鼠标中键缩放场景，.enableZoom属性默认值true。
controls.enableZoom =false; // 禁止缩放
通过.enableRotate属性可以控制是否允许鼠标左键旋转场景，.enableRotate属性默认值true。
controls.enableRotate =false; // 禁止旋转

设置缩放范围

在实际应用中，你想控制一个产品或一个房间户型的缩放范围, 可以通过相机空间OrbitControls的.minZoom和.maxZoom属性实现
// 缩放范围
controls.minZoom = 0.5;
controls.maxZoom = 2;

设置旋转范围

展示一个三维场景，你想控制360度旋转范围，比如一辆轿车，你不希望用户看到轿车的底盘，你可以通过设置相机的旋转范围属性来实现。

通过.minPolarAngle和.maxPolarAngle属性控制上下360度的旋转范围，通过.minAzimuthAngle和.maxAzimuthAngle属性控制左右360度的旋转范围，上下左右两个360度旋转也就是常说的720旋转展示。
// 上下旋转范围 controls.minPolarAngle =0;
controls.maxPolarAngle =Math.PI;
// 左右旋转范围controls.minAzimuthAngle = -Math.PI * (100/180);
controls.maxAzimuthAngle =Math.PI * (100/180);

●属性
●autoRotate: Boolean默认false。 设定为true时， 相机自动围绕目标旋转但必须在animation中循环调用update();
●autoRotateSpeed: Float当前者为true时默认2.0， 代表每轮60fps用时30s,值越小转动越慢
●rotateSpeed: Float旋转速度(ORBIT的旋转速度，鼠标左键)，默认1
●enableDamping: Boolean默认false。设置为true则启用阻尼(惯性),用来给控制相机一个重量，必须调用update()在你的animation循环中
●dampingFactor: Float前者为true时使用阻尼惯性(可理解为阻止向一个方向移动)
●enabled: Boolean是否启用控件，默认true
●enableKeys: Boolean能否用键盘控制，默认true←-↑-→↓四个键控制物体的移动
●keys: Object控制相机平移的四个键。默认四个箭头键{LEFT: 37,UP: 38,RIGHT: 39,DOWM:40}所有的键值
●enablePan: Boolean相机平移,默认true
●panSpeed: Float移动的速度,默认1
●keyPanSpeed: Float相机平移的速度，默认每按一次控制方向键移动7 .0像素
●enableRotate: Boolean水平垂直旋转相机，默认true。只想控制单轴，通过PolarAngle/AzimuthAngle的最小值和最 大值设置为相同的值，这将导致垂直或
水平旋转固定在该值
●enableZoom: Boolean相机的缩放
●maxAzimuthAngle: Float水平旋转，范围-Math.PI~Math.PI 或者Infinity默认Infinity.
●minAzimuthAngle: Float水平旋转, 范围-Math.PI-Math.PI或者.Infinity默认-Infinity.
●maxPolarAngle: Float 垂直旋转,范围0~Math.PI 默认Math.Pl
●minPolarAngle: Float垂直旋转，范围0~Math.PI 默认0
●maxDistance: Float拉远镜头(只能用在PerspectiveCamera),默认Infinity.

●minDistance: Float拉近镜头，默认0
●maxZoom: Float拉远镜头(只能用在Othorg[ aphicCamera),默认Infinity.
●minZoom: Float拉近镜头，默认Q
●object: Camera正在控制的相机
●zoomSpeed: Float zoom(变焦)的速度，默认1

方法

dispose(): null移除所有的事件监听
getAzimuthalAngle(): radians获得用弧度表示的当前水平旋转角度
getPolarAngle(): radians获得用弧度表示的当前垂直旋转角度
reset(): null通过最近-次调用saveState()或者 初始状态来重置为当前的状态
saveState(): null保存当前控制的状态,可以稍后通过reset()来恢复
update(): false更新控件,在手动改变了摄像机的钻换后必须调用。在设置了autoRotate或enableDamping时也要在循环中调用

2、性能控件

stats性能插件添加了以后，会默人在左上角显示性能帧数，毎次刷新所用时间，占用内存。鼠棕左鍵点去可迸行切换，默人显示毎秒的帧数。
首先需要将stats插件引入，地址是官网下載文件里面的examples/js/libs/stats.min.js.
然后需要突例化一个組件，然后添加到dom当中.

var stats ;
function initStats() {
    stats = new Stats();
    document.body.appendChi1d(stats.dom);
}

需要在requestAnimationFrame()函数调用里面更新stats。

function animate() {
    // 更新控制器
    controls.update() ;
    render() ;
    // 更新性能控件
    stats.update() ;
    requestAnimationFrame(animate) ;
}

就这样，页面当中就会显示出来正常插件效果了。
设置默认显示的监听。
Stats.prototype.setMode()方法可以设置插件的默认监听

stats.setMode(0); // 默认的监听fps 帧数
stats.setMode(1); // 默认监听画面渲染时间
stats.setMode(2); // 默认监听内存

3、坐标系控件AxesHelper
Threejs里通过AxesHelper类，可以创建一个可视化的三维坐标系

AxesHelper ( size : Number )

参数说明

size - - 轴的线的大小，默认为1

eg:

var axes = new THREE.AxisHelper(30) ;
scene.add(axes) ;

说明:
threejs中采用的是右手坐标系
红线是X轴，绿线是Y轴，蓝线是Z轴

ThreeJS 相机控件OrbitControls.js和性能控件/stats.min.js 使用案例。

看一下index.html里面的按钮事件

看一下js/objects/Store3D.js的initMain方法里面的initStats/** 初始化性能监控控件 */、initOrbitControl/** 初始化相机控件 */、initAxisHelper/** 初始化坐标系辅助控件 */方法