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/** 初始化坐标系辅助控件 */方法