dir – 基于箭头原点的方向. 必须为单位向量.
origin – 箭头的原点.
length – 箭头的长度. 默认为 1.
hex – 定义的16进制颜色值. 默认为 0xffff00.

headLength – 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 length).
headWidth – 箭头的宽度. 默认为箭头头部(锥体)长度的0.2倍(0.2 headLength).

1
2
3
4
5
6
7

// 单位向量
var dir = new THREE.Vector3(2, 3, 0)
dir.normalize()

// 创建一个箭头辅助对象
var arrow = new THREE.ArrowHelper(dir, new THREE.Vector3(0,0,0), 2, 0xff0000, 1, 1)
scene.add(arrow)

AxesHelper( size : Number )

size – (可选的) 表示代表轴的线段长度. 默认为 1.

1
2
3

camera.position.set(2, 1, 8)
var axes = new THREE.AxesHelper(1)
scene.add(axes)

BoxHelper( object : Object3D, color : Color )

object – (可选的) 被展示世界轴心对齐的包围盒的对象.
color – (可选的) 线框盒子的16进制颜色值. 默认为 0xffff00.

1
2
3
4
5
6
7

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial();
var box = new THREE.Mesh(geometry, material);
scene.add(box)

var boxHelper = new THREE.BoxHelper(box, 0xff0000)
scene.add(boxHelper)

CameraHelper( camera : Camera )
camera – 被模拟的相机.

为指定相机创建一个新的相机辅助对象 CameraHelper .

1
2

var cameraHelper = new THREE.CameraHelper(camera)
scene.add(cameraHelper)

DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )

light– 被模拟的光源.
size – (可选的) 平面的尺寸. 默认为 1.
color – (可选的) 如果没有设置颜色将使用光源的颜色.

1
2
3

var directionalLight = new THREE.DirectionalLight();
var directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 1, 0x00ff00);
scene.add(directionalLightHelper)

GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )

size – 坐标格尺寸. 默认为 10.
divisions – 坐标格细分次数. 默认为 10.
colorCenterLine – 中线颜色. 值可以为 Color 类型, 16进制 和 CSS 颜色名. 默认为 0x444444
colorGrid – 坐标格网格线颜色. 值可以为 Color 类型, 16进制 和 CSS 颜色名. 默认为 0x888888

创建一个尺寸为 ‘size’ 和 每个维度细分 ‘divisions’ 次的坐标格. 颜色可选.

1
2

var grid = new THREE.GridHelper(10, 10, 0xff0000);
scene.add(grid);

PolarGridHelper( radius : Number, radials : Number, circles : Number, divisions : Number, color1 : Color, color2 : Color )
radius – 极坐标格半径. 可以为任何正数. 默认为 10.
radials – 径向辐射线数量. 可以为任何正整数. 默认为 16.
circles – 圆圈的数量. 可以为任何正整数. 默认为 8.
divisions – 圆圈细分段数. 可以为任何大于或等于3的正整数. 默认为 64.
color1 – 极坐标格使用的第一个颜色. 值可以为 Color 类型, 16进制 和 CSS 颜色名. 默认为 0x444444
color2 – 极坐标格使用的第二个颜色. 值可以为 Color 类型, 16进制 和 CSS 颜色名. 默认为 0x888888

创建一个半径为’radius’ 包含 ‘radials’ 条径向辐射线 和 ‘circles’ 个细分成 ‘divisions’ 段的圆圈的极坐标格辅助对象. 颜色可选.

1
2

var polarGrid = new THREE.PolarGridHelper();
scene.add(polarGrid)

HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )

light – 被模拟的光源.
size – 用于模拟光源的网格尺寸.
color – (可选的) 如果没有赋值辅助对象将使用光源的颜色.

1
2
3

var light = new THREE.HemisphereLight( 0xffffbb, 0xffffff, 1 );
var helper = new THREE.HemisphereLightHelper( light, 5 );
scene.add( helper );

PlaneHelper( plane : Plane, size : Float, hex : Color )
plane – 被模拟的平面.
size – (可选的) 辅助对象的单边长度. 默认为 1.
color – (可选的) 辅助对象的颜色. 默认为 0xffff00.

先看下平面，在三维空间中无限延伸的二维平面，平面方程用单位长度的法向量和常数表示为海塞法向量Hessian normal form形式。

Plane( normal : Vector3, constant : Float )
normal - (可选参数) 定义单位长度的平面法向量Vector3。默认值为 (1, 0, 0)。
constant - (可选参数) 从原点到平面的有符号距离。 默认值为 0.

创建一个线框辅助对象来表示指定平面.

1
2
3

var plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
var helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
scene.add( helper );

PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )

light – 要模拟的光源.
sphereSize – (可选的) 球形辅助对象的尺寸. 默认为 1.
color – (可选的) 如果没有赋值辅助对象将使用光源的颜色.

1
2
3
4
5
6
7

var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
pointLight.position.set( 10, 10, 10 );
scene.add( pointLight );

var sphereSize = 1;
var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );

SpotLightHelper( light : SpotLight, color : Hex )

light – 被模拟的聚光灯 SpotLight .
color – (可选的) 如果没有赋值辅助对象将使用光源的颜色.

1
2
3
4
5
6

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 10 );
scene.add( spotLight );

var spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );

至此，threejs中的大部分内容我们都接触到了，还有一些基础对象和数学库在用到的时候会学习，接下来开始研究一些示例代码并尝试自己写一些东西。