Logo

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.

Related Topics

ThreeJS Helpers 2

PolarGridHelper The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines. Code Example const radius = 10; const radials = 16; const circles = 8; const divisions = 64; const helper =...

4 minutes read.

ThreeJS Layers

A Layers object assigns an Object3D to one or more of the 32 layers numbered 0 to 31 - the layers are internally stored as a bit mask, and all...

1 minute read.

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,...

5 minutes read.

ThreeJS Keyframe Tracks and Animation

A KeyframeTrack is a timed series of keyframes that are made up of lists of times and related values and are used to animate an object's unique property. BooleanKeyframeTrack A Track of...

3 minutes read.

ThreeJS Object3D

This is the base class for most three.js objects, and it provides a set of properties and methods for manipulating objects in 3D space. It should be noted that this can...

9 minutes read.

ThreeJS Lines and Texts

Drawing Lines Let's say you want to draw a line or a circle, not a wireframe Mesh. First, we need to set up the renderer, scene, and camera. Here is the...

3 minutes read.

ThreeJS Geometries-1

BoxGeometry BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. On creation, the cuboid is centered on the origin, with each edge parallel to...

7 minutes read.

ThreeJS InterleavedBuffer

The term "interleaved" refers to the packing of multiple attributes, possibly of different types (e.g., position, normal, uv, colour) into a single array buffer. Constructor InterleavedBuffer( array : TypedArray, stride : Integer...

3 minutes read.

ThreeJS Renderers

WebGLMultipleRenderTargets A special render target that enables a fragment shader to write to several textures. This approach is useful for advanced rendering techniques like post-processing or deferred rendering. Heads up: WebGLMultipleRenderTargets...

15 minutes read.

ThreeJS AnimationMixer

The AnimationMixer is a player that allows you to play animations on a specific object in the scene. When many items in a scene are animated individually, each object may...

2 minutes read.

ThreeJS Math

Box2 Represents an axis-aligned bounding box (AABB) in 2D space. Constructor Box2( min : Vector2, max : Vector2 ) min - (optional) Vector2 representing the lower (x, y) boundary of the box. Default is...

48 minutes read.

ThreeJS Property Binding and Mixer

PropertyBinding Internally, this holds a reference to real property in the scene graph. Constructor PropertyBinding( rootNode : Object3D, path, parsedPath ) -- rootNode: -- path -- parsedPath (optional) Properties The properties are as follows: .path : Number.parsedPath...

2 minutes read.

ThreeJS Material - Mesh

MeshBasicMaterial A material for drawing geometries in a simple shaded (flat or wireframe) way. This material is not affected by lights. Constructor MeshBasicMaterial( parameters : Object ) parameters - (optional) an object with one or...

24 minutes read.

ThreeJS Compatibiliy Check and Running Locally

Even though this is becoming less of an issue, some devices or browsers may still be incompatible with WebGL. The method below enables you to check if it is supported...

3 minutes read.

ThreeJS AnimationObjectGroup and Utils

AnimationObjectGroup A group of objects that receives a shared animation state. Usage Add items you'd normally send as 'root' to AnimationMixer's function Object() { [native code] } or clipAction method, and instead pass...

2 minutes read.

ThreeJS BufferGeometry

A mesh, line, or point geometry representation. Included within buffers are vertex positions, face indices, normals, colours, UVs, and custom attributes, lowering the cost of passing all of this data...

5 minutes read.

ThreeJS BufferAttribute

This class stores data for an attribute associated with a BufferGeometry (such as vertex positions, face indices, normals, colours, UVs, and any custom attributes), allowing for more efficient data passing...

4 minutes read.

ThreeJS Loading 3D Models

There are hundreds of file formats for 3D models, each with its own purpose, set of features, and level of complexity. Although three.js has a lot of loaders, choosing the...

2 minutes read.

ThreeJS Loader 1

AnimationLoader Class for loading AnimationClips in JSON format. This uses the FileLoader internally for loading files. Code Example // instantiate a loader const loader = new THREE.AnimationLoader(); // load a resource loader.load( // resource URL 'animations/animation.js', // onLoad callback function...

8 minutes read.

ThreeJS Animation Systems

You may animate many aspects of your models with the three.js animation system, including the bones of a skinned and rigged model, morph targets, multiple material properties (colours, opacity, booleans),...

3 minutes read.