為了簡化編碼工作，threejs中內置了許多各類helper類，通過helper類，讓我們能添加一兩行代碼展現很酷的功能。還有一些看不見的對象（如光源，邊界等），helper對象可以將它們展現出來，也方便我們理解。
- ArrowHelper
- AxesHelper
- BoxHelper
- Box3Helper
- CameraHelper
- DirectionLightHelper
- FaceNormalsHelper
- GridHelper
- HemisphereLightHelper
- PlaneHelper
- PointLightHelper
- PolarGridHelper
- RectAreaLightHelper
- SkeletonHelper
- SpotLightHelper
- VertexNormalsHelper
一、ArrowHelper
https://threejs.org/docs/#api/zh/helpers/ArrowHelper
箭頭Helper對象，功能很簡單就是添加一個箭頭。
function ArrowHelper( dir, origin, length, color, headLength, headWidth )
dir（方向向量）、origin（起點）、length（長度）、hex（顏色）、headLength（箭頭長度）、headWidth（箭頭寬度）
var dir = new THREE.Vector3(0, 10, 10);
dir.normalize();
var origin = new THREE.Vector3(0, 0, 0);
var length = 30;
var hex = 0xffff00;
var headLength = 0.5;。
var headWidth = 0.2;
var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex,headLength,headWidth);
scene.add(arrowHelper);
二、AxesHelper
坐標軸Helper對象，可以在當前空間添加一個三維坐標軸，x軸紅色、y軸綠色、z軸藍色
構造：AxisHelper(size)
屬性：size（軸線長）
示例代碼：
var axisHelper = new THREE.AxisHelper( 1000 );
axisHelper.position.y = -200;
axisHelper.material.opacity = 0.75;
axisHelper.material.transparent = true;
scene.add( axisHelper );
三、BoxHelper Box3Helper
1.什么是Box3
參考three.js 數學方法之Box3
Box3在3D空間中表示一個包圍盒。其主要用于表示物體在世界坐標中的邊界框。它方便我們判斷物體和物體、物體和平面、物體和點的關系等等。 構造器參數Box3( min : Vector3, max : Vector3 )，其參數為兩個三維向量，第一個向量為Box3在3D空間中各個維度的最小值，第二個參數為Box3在3D空間中各個維度的最大值，代碼如下。
var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));
這個box就表示3D空間中中心點在(0,0,0)，長寬高為4的包圍盒。
2.示例
threeJS-Helper03-BoxHelperAndBox3Helper(包圍盒助手)
//外面的盒子
//SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )
sphere = new THREE.SphereGeometry(1.5);
var object = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial(0xff0000));
box = new THREE.BoxHelper(object, 0xffff00);
scene.add(box);
//里面的盒子
//Box3( min, max )
var box3 = new THREE.Box3();
box3.setFromCenterAndSize(new THREE.Vector3(0, 0, 0), new THREE.Vector3(2, 2, 2));
var helper = new THREE.Box3Helper(box3, 0xffff00);
四、CameraHelper
參考
threejs CameraHelper 查看照相機的觀察范圍
ThreeJS中CameraHelper的使用
var cameraHelper = new THREE.CameraHelper(camera);
scene.add(cameraHelper);
五、各種光源Helper
- DirectionLightHelper
- PointLightHelper
- RectAreaLightHelper
- SpotLightHelper
- HemisphereLightHelper
參考threejs helpers -2 lightHelper(光源輔助對象)
六、FaceNormalsHelper
面法向量Helper對象，從三維模型的每個面繪制垂直的直線。
FaceNormalsHelper(object, size, color, linewidth)
object（對象）、size（箭頭長度）、color（顏色）、linewidth（箭頭寬度）
var faces = new THREE.FaceNormalsHelper( sphere, 20, 0x00ff00, 2 );
scene.add( faces );
七、GridHelper
展示三維空間的場景中經常需要帶橫縱刻度的平面以方面用戶理解，通過 Three.js 類 GridHelper 可以創建一個坐標網格對象。
GridHelper 本質上是對線模型對象 Line 的封裝，縱橫交錯的直線構成一個矩形網格模型對象。
參數說明
GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )
size -- 網格寬度，默認為 10.
divisions -- 等分數，默認為 10.
colorCenterLine -- 中心線顏色，默認 0x444444
colorGrid -- 網格線顏色，默認為 0x888888
eg:
var gridHelper = new THREE.GridHelper( 100, 30, 0x2C2C2C, 0x888888 );
scene.add(gridHelper);
八、PlaneHelper
平面
var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
planeHelper = new THREE.PlaneHelper(plane, 1000, 0xffffff);
planeHelper.position.set(0,-20,0);
scene.add(planeHelper)
九、PolarGridHelper
極坐標網格helper對象，用來構建一個極坐標的網格平面。
function PolarGridHelper( radius, radials, circles, divisions, color1, color2 )
- radius – 極坐標格半徑. 可以為任何正數. 默認為 10.
- radials – 徑向輻射線數量. 可以為任何正整數. 默認為 16.
- circles – 圓圈的數量. 可以為任何正整數. 默認為 8.
- divisions – 圓圈細分段數. 可以為任何大于或等于3的正整數. 默認為 64.
- color1 – 極坐標格使用的第一個顏色. 值可以為 Color 類型, 16進制 和 CSS 顏色名. 默認為 0x444444
- color2 – 極坐標格使用的第二個顏色. 值可以為 Color 類型, 16進制 和 CSS 顏色名. 默認為 0x888888
創建一個半徑為’radius’ 包含 ‘radials’ 條徑向輻射線 和 ‘circles’ 個細分成 ‘divisions’ 段的圓圈的極坐標格輔助對象. 顏色可選.
示例代碼：
var polarGridHelper=new THREE.PolarGridHelper(1000, 16, 8, 64, 0x0000ff, 0x808080);
polarGridHelper.position.set(0,-200,0);
scene.add(polarGridHelper);
十、SkeletonHelper
參考
threeJS-Helper13-SkeletonHelper(骨骼顯示助手)
骨骼Helper對象，用來模擬骨骼 Skeleton 的輔助對象， 使用 LineBasicMaterial 材質。
- object -- 可以是任何擁有一組骨 Bone 作為子對象的對象.比如, 一個骨骼 Skeleton 或 一個蒙皮網格 SkinnedMesh.
var bones = [];
var shoulder = new THREE.Bone();
var elbow = new THREE.Bone();
var hand = new THREE.Bone();
shoulder.add( elbow );
elbow.add( hand );
bones.push( shoulder );
bones.push( elbow );
bones.push( hand );
shoulder.position.y = 0;
elbow.position.y = -1;
hand.position.y = -0.5;
var armSkeleton = new THREE.Skeleton( bones );
十一、VertexNormalsHelper
頂點法向量Helper類，跟上面說的面法向量類似，區別是從三維模型頂點引出直線。
VertexNormalsHelper( object, size, color, linewidth )
屬性：object（對象）、size（箭頭長度）、color（顏色）、linewidth（箭頭寬度）
var vertexHelper = new THREE.VertexNormalsHelper( sphere, 2, 0x00ff00, 1 );
scene.add( vertexHelper );
十二、移除的EdgesHelper
參考
Three.js - EdgesGeometry 幾何體邊框輔助線
EdgesGeometry在老版本中叫做EdgesHelper但是已經被移除。新版本賦予邊框輔助參考線，更加靈活的使用方法，可以改變其材質以及其他屬性，EdgesGeometry的作用是可以幫助查看幾何體對象的邊緣。
如果幾何體平穩旋轉，Edges也要同步。
