概述

在开发项目时,用到一部分辅助对象,在这里记录一下。

Three JS的辅助对象就是把一些看不到的对象展现出来,便于我们观察与理解。

辅助对象分为:箭头辅助,坐标辅助,相机辅助,面法向量辅助等等。

这里只介绍我用过的辅助对象,其他的可以参考开发文档。

箭头辅助

箭头辅助(ArrowHelper)用于模拟方向的3维箭头对象。

官网案例


var dir = new THREE.Vector3( 1, 2, 0 );

//normalize the direction vector (convert to vector of length 1)
dir.normalize();

var origin = new THREE.Vector3( 0, 0, 0 );
var length = 1;
var hex = 0xffff00;

var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
scene.add( arrowHelper );

其构造函数为


ArrowHelper(dir : Vector3, origin : Vector3, length : Number, hex : Number, headLength : Number, headWidth : Number )

dir -- 基于箭头原点的方向. 必须为单位向量.

origin -- 箭头的原点.

length -- 箭头的长度. 默认为 1.

hex -- 定义的16进制颜色值. 默认为 0xffff00.

headLength -- 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).

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

其方法大致有三个(由于基类是Object3D,因此还有基类的方法),分别为setColor,setLength

坐标系辅助

坐标系辅助(AxesHelper)用于简单模拟三个坐标轴,红色X轴,绿色Y轴,蓝色Z轴,遵守右手螺旋定则。

官网案列


var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

其构造函数


AxesHelper( size : Number 

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

由于其基类为LineSegments,因此其属性和方法参考基类(我没用到)。

盒辅助

盒辅助(BoxHelper)用于展示对象世界轴心对齐的包围盒的辅助对象。

官网案例


var sphere = new THREE.SphereGeometry();
var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
var box = new THREE.BoxHelper( object, 0xffff00 );
scene.add( box );

其构造函数


BoxHelper( object : Object3D, color : Color )

object -- (可选的) 被展示世界轴心对齐的包围盒的对象.

color -- (可选的) 线框盒子的16进制颜色值. 默认为 0xffff00.

其方法我主要用到update().