Chapter 317: ArrowHelper

Core Idea

An 3D arrow object for visualizing directions.

Key Concepts

• cone : Mesh: The cone part of the arrow helper.
• line : Line: The line part of the arrow helper.

Code Examples

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

• What it demonstrates: Typical usage of ArrowHelper.

Reference Tables

Constructor

Signature
`new ArrowHelper( dir : Vector3, origin : Vector3, length : number, color : number

Properties

Property	Description
.cone : Mesh	The cone part of the arrow helper.
.line : Line	The line part of the arrow helper.

Methods

Method	Description
.dispose()	Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
`.setColor( color : number	Color
.setDirection( dir : Vector3 )	Sets the direction of the helper.
.setLength( length : number, headLength : number, headWidth : number )	Sets the length of the helper.

Key Takeaways

1. ArrowHelper extends: EventDispatcher → Object3D
2. Most relevant properties: cone, line.
3. Key methods: dispose, setColor, setDirection, setLength.

Connects To

• EventDispatcher: parent class
• Object3D: parent class
• Source: src/helpers/ArrowHelper.js