ThreeJS Helper 1
ArrowHelper
A 3D arrow object for visualizing directions.
Code Example
const dir = new THREE.Vector3( 1, 2, 0 );
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
const origin = new THREE.Vector3( 0, 0, 0 );
const length = 1;
const hex = 0xffff00;
const arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
scene.add( arrowHelper );
Constructor
ArrowHelper(dir : Vector3, origin : Vector3, length : Number, hex : Number, headLength : Number, headWidth : Number )
dir -- direction from origin. Must be a unit vector.
origin -- Point at which the arrow starts.
length -- length of the arrow. Default is 1.
hex -- hexadecimal value to define color. Default is 0xffff00.
headLength -- The length of the head of the arrow. Default is 0.2 * length.
headWidth -- The width of the head of the arrow. Default is 0.2 * headLength.
Properties
See the base Object3D class for common properties.
.line : Line
Contains the line part of the arrowHelper.
.cone : Mesh
Contains the cone part of the arrowHelper.
Methods
See the base Object3D class for common methods.
.setColor (color : Color) : undefined
color -- The desired color.
Sets the color of the arrowHelper.
.setLength (length : Number, headLength : Number, headWidth : Number) : undefined
length -- The desired length.
headLength -- The length of the head of the arrow.
headWidth -- The width of the head of the arrow.
Sets the length of the arrowhelper.
.setDirection (dir : Vector3) : undefined
dir -- The desired direction. Must be a unit vector.
Sets the direction of the arrowhelper.
AxesHelper
An axis object to visualize the 3 axes in a simple way.
The X axis is red. The Y axis is green. The Z axis is blue.
Code Example
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
Constructor
AxesHelper( size : Number )
size -- (optional) size of the lines representing the axes. Default is 1.
Properties
See the base LineSegments class for common properties.
Methods
See the base LineSegments class for common methods.
.setColors ( xAxisColor : Color, yAxisColor : Color, zAxisColor : Color ) : this
Sets the axes colors to xAxisColor, yAxisColor, zAxisColor.
.dispose () : undefined
Disposes of the internally-created material and geometry used by this helper.
BoxHelper
Helper object to graphically show the world-axis-aligned bounding box around an object. The actual bounding box is handled with Box3, this is just a visual helper for debugging. It can be automatically resized with the BoxHelper.update method when the object it's created from is transformed. Note that the object must have a BufferGeometry for this to work, so it won't work with Sprites.
Code Example
const sphere = new THREE.SphereGeometry();
const object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
const box = new THREE.BoxHelper( object, 0xffff00 );
scene.add( box );
Constructor
BoxHelper( object : Object3D, color : Color )
object -- (optional) the object3D to show the world-axis-aligned boundingbox.
color -- (optional) hexadecimal value that defines the box's color. Default is 0xffff00.
Creates a new wireframe box that bounds the passed object. Internally this uses Box3.setFromObject to calculate the dimensions. Note that this includes any children.
Box3Helper
Helper object to visualize a Box3.
Code Example
const box = new THREE.Box3();
box.setFromCenterAndSize( new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 2, 1, 3 ) );
const helper = new THREE.Box3Helper( box, 0xffff00 );
scene.add( helper );
Constructor
Box3Helper( box : Box3, color : Color )
box -- the Box3 to show.
color -- (optional) the box's color. Default is 0xffff00.
Creates a new wireframe box that represents the passed Box3.
Properties
See the base LineSegments class for common properties.
.box : Box3
The Box3 being visualized.
Methods
See the base LineSegments class for common methods.
.updateMatrixWorld ( force : Boolean ) : undefined
This overrides the method in the base Object3D class so that it also updates the wireframe box to the extent of the .box property.
CameraHelper
This helps with visualizing what a camera contains in its frustum.
It visualizes the frustum of a camera using a LineSegments.
Code Example
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const helper = new THREE.CameraHelper( camera );
scene.add( helper );
Constructor
CameraHelper( camera : Camera )
camera -- The camera to visualize.
This create a new CameraHelper for the specified camera.
Properties
See the base LineSegments class for common properties.
.camera : Camera
The camera being visualized.
.pointMap : Object
This contains the points used to visualize the camera.
.matrix : Object
Reference to the camera.matrixWorld.
.matrixAutoUpdate : Object
See Object3D.matrixAutoUpdate. Set to false here as the helper is using the camera's matrixWorld.
Methods
See the base LineSegments class for common methods.
.dispose () : undefined
Disposes of the internally-created material and geometry used by this helper.
.update () : undefined
Updates the helper based on the projectionMatrix of the camera.
DirectionalLightHelper
Helper object to assist with visualizing a DirectionalLight's effect on the scene. This consists of plane and a line representing the light's position and direction.
Code Example
const light = new THREE.DirectionalLight( 0xFFFFFF );
const helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );
Constructor
DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )
light-- The light to be visualized.
size -- (optional) dimensions of the plane. Default is 1.
color -- (optional) if this is not the set the helper will take the color of the light.
Properties
See the base Object3D class for common properties.
.lightPlane : Line
Contains the line mesh showing the location of the directional light.
.light : DirectionalLight
Reference to the directionalLight being visualized.
.matrix : Object
Reference to the light's matrixWorld.
.matrixAutoUpdate : Object
See Object3D.matrixAutoUpdate. Set to false here as the helper is using the light's matrixWorld.
.color : hex
The color parameter passed in the constructor. Default is undefined. If this is changed, the helper's color will update the next time update is called.
Methods
See the base Object3D class for common properties.
.dispose () : undefined
Dispose of the directionalLightHelper.
.update () : undefined
Updates the helper to match the position and direction of the directionalLight being visualized.
GridHelper
The GridHelper is an object to define grids. Grids are two-dimensional arrays of lines.
Code Example
const size = 10;
const divisions = 10;
const gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
Constructor
GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )
size -- The size of the grid. Default is 10.
divisions -- The number of divisions across the grid. Default is 10.
colorCenterLine -- The color of the centerline. This can be a Color, a hexadecimal value and an CSS-Color name. Default is 0x444444
colorGrid -- The color of the lines of the grid. This can be a Color, a hexadecimal value and an CSS-Color name. Default is 0x888888
Creates a new GridHelper of size 'size' and divided into 'divisions' segments per side. Colors are optional.