three.js 笔记八 各类Helper

参考
threejs中的各类helper对象介绍

为了简化编码工作，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(包围盒助手)

20181202150959879.gif

//外面的盒子
//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);

image.png

五、各种光源Helper

• DirectionLightHelper
• PointLightHelper
• RectAreaLightHelper
• SpotLightHelper
• HemisphereLightHelper

参考threejs helpers -2 lightHelper(光源辅助对象)

image.png

六、FaceNormalsHelper

面法向量Helper对象，从三维模型的每个面绘制垂直的直线。

FaceNormalsHelper(object, size, color, linewidth)
object（对象）、size（箭头长度）、color（颜色）、linewidth（箭头宽度）

var faces = new THREE.FaceNormalsHelper( sphere, 20, 0x00ff00, 2 );

scene.add( faces );

image.png

七、GridHelper

展示三维空间的场景中经常需要带横纵刻度的平面以方面用户理解

var helper = new THREE.GridHelper( 2000, 100 );

helper.position.y = - 199;

helper.material.opacity = 0.25;

helper.material.transparent = true;

scene.add( helper );

image.png

八、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)

image.png

九、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);

image.png

十、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 );

20181210211242891.gif

十一、VertexNormalsHelper

顶点法向量Helper类，跟上面说的面法向量类似，区别是从三维模型顶点引出直线。

VertexNormalsHelper( object, size, color, linewidth )
属性：object（对象）、size（箭头长度）、color（颜色）、linewidth（箭头宽度）

var vertexHelper = new THREE.VertexNormalsHelper( sphere, 2, 0x00ff00, 1 );
scene.add( vertexHelper );

image.png

十二、移除的EdgesHelper

参考
Three.js - EdgesGeometry 几何体边框辅助线

EdgesGeometry在老版本中叫做EdgesHelper但是已经被移除。新版本赋予边框辅助参考线，更加灵活的使用方法，可以改变其材质以及其他属性，EdgesGeometry的作用是可以帮助查看几何体对象的边缘。

如果几何体平稳旋转，Edges也要同步。

image.png