Logo

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 = new THREE.PolarGridHelper( radius, radials, circles, divisions );
scene.add( helper );

Constructor

PolarGridHelper( radius : Number, radials : Number, circles : Number, divisions : Number, color1 : Color, color2 : Color )

radius -- The radius of the polar grid. This can be any positive number. Default is 10.

radials -- The number of radial lines. This can be any positive integer. Default is 16.

circles -- The number of circles. This can be any positive integer. Default is 8.

divisions -- The number of line segments used for each circle. This can be any positive integer that is 3 or greater. Default is 64.

color1 -- The first color used for grid elements. This can be a Color, a hexadecimal value and an CSS-Color name. Default is 0x444444

color2 -- The second color used for grid elements. This can be a Color, a hexadecimal value and an CSS-Color name. Default is 0x888888

Creates a new PolarGridHelper of radius 'radius' with 'radials' number of radials and 'circles' number of circles, where each circle is smoothed into 'divisions' number of line segments. Colors are optional.

HemisphereLightHelper

Creates a visual aid consisting of a spherical Mesh for a HemisphereLight.

Code Example

const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
const helper = new THREE.HemisphereLightHelper( light, 5 );
scene.add( helper );

Constructor

HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )

light -- The light being visualized.

size -- The size of the mesh used to visualize the light.

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.

.light : HemisphereLight

Reference to the HemisphereLight being visualized.

.matrix : Object

Reference to the hemisphereLight's matrixWorld.

.matrixAutoUpdate : Object

See Object3D.matrixAutoUpdate. Set to false here as the helper is using the hemisphereLight'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 methods.

.dispose () : undefined

Dispose of the hemisphereLightHelper.

.update () : undefined

Updates the helper to match the position and direction of the .light.

PlaneHelper

Helper object to visualize a Plane.

Code Example

const plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
const helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
scene.add( helper );
Constructor
PlaneHelper( plane : Plane, size : Float, hex : Color )
plane -- the plane to visualize.
size -- (optional) side length of plane helper. Default is 1.
color -- (optional) the color of the helper. Default is 0xffff00.

Creates a new wireframe representation of the passed plane.

Properties

See the base LineSegments class for common properties.

.plane : Plane

The plane being visualized.

.size : Float

The side lengths of plane helper.

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 helper object according to the .plane and .size properties.

PointLightHelper

This displays a helper object consisting of a spherical Mesh for visualizing a PointLight.

Code Example

const pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
pointLight.position.set( 10, 10, 10 );
scene.add( pointLight );


const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );

Constructor

PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )

light -- The light to be visualized.

sphereSize -- (optional) The size of the sphere helper. Default is 1.

color -- (optional) if this is not the set the helper will take the color of the light.

Properties

See the base Mesh class for common properties.

.light : PointLight

The PointLight that is being visualized.

.matrix : Object

Reference to the pointLight's matrixWorld.

.matrixAutoUpdate : Object

See Object3D.matrixAutoUpdate. Set to false here as the helper is using the pointLight'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 Mesh class for common methods.

.dispose () : undefined

Dispose of the pointLightHelper.

.update () : undefined

Updates the helper to match the position of the .light.

SkeletonHelper

A helper object to assist with visualizing a Skeleton. The helper is rendered using a LineBasicMaterial.

Code Example

const helper = new THREE.SkeletonHelper( skinnedMesh );
scene.add( helper );

Constructor

SkeletonHelper( object : Object3D )

object -- Usually an instance of SkinnedMesh. However, any instance of Object3D can be used if it represents a hierarchy of Bones (via Object3D.children).

Properties

.bones : Array

The list of bones that the helper renders as Lines.

.root : Object3D

The object passed in the constructor.

SpotLightHelper

This displays a cone shaped helper object for a SpotLight.

Code Example

const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 10 );
scene.add( spotLight );


const spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );

Constructor

SpotLightHelper( light : SpotLight, color : Hex )

light -- The SpotLight to be visualized.

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.

.cone : LineSegments

LineSegments used to visualize the light.

.light : SpotLight

Reference to the SpotLight being visualized.

.matrix : Object

Reference to the spotLight's matrixWorld.

.matrixAutoUpdate : Object

See Object3D.matrixAutoUpdate. Set to false here as the helper is using the spotLight'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 methods.

.dispose () : undefined

Disposes of the light helper.

.update () : undefined

Updates the light helper.

Related Topics

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 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 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 Shadows

LightShadow Serves as a base class for the other shadow classes. Constructor LightShadow( camera : Camera ) camera - the light's view of the world. Create a new LightShadow. This is not intended to be...

7 minutes read.

ThreeJS Materials 3

RawShaderMaterial This class works just like ShaderMaterial, except that definitions of built-in uniforms and attributes are not automatically prepended to the GLSL shader code. Code Example const material = new THREE.RawShaderMaterial( {    ...

9 minutes 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 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 Matrix Transformations

Three.js encodes 3D transformations using matrices for translations (position), rotations, and scaling. Every Object3D instance has a matrix that records the location, rotation, and scale of the object. This page...

2 minutes read.

ThreeJS Loaders 2

ImageBitmapLoader A loader that converts an image to an ImageBitmap. An ImageBitmap provides an asynchronous and resource-efficient path for preparing textures for WebGL rendering. ImageBitmapLoader, unlike FileLoader, does not prevent multiple concurrent...

8 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 Using post-processing

Many three.js applications render their 3D objects directly to the screen. Sometimes, however, you want to apply one or more graphical effects like Depth-Of-Field, Bloom, Film Grain or various types...

2 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 Managers

DefaultLoadingManager When no custom manager is specified, most loaders use a global instance of the LoadingManager. This will suffice for most purposes, but there may be times when you want separate loading...

4 minutes read.

ThreeJS AnimationAction

AnimationActions are used to schedule the playback of animations saved in AnimationClips. Note that the majority of AnimationAction's methods can be chained together. The "Animation System" page in the "Next Steps" part...

6 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 Material

Abstract base class for materials. Materials describe the appearance of objects. They are defined in a (mostly) renderer-independent way, so you don't have to rewrite materials if you decide to use...

6 minutes read.

ThreeJS Interpolant

CubicInterpolant Code Example const interpolant = new THREE.CubicInterpolant(new Float32Array( 2 ),new Float32Array( 2 ),1,new Float32Array( 1 ));interpolant.evaluate( 0.5 ); Constructor CubicInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer ) parameterPositions -- array of positions sampleValues -- array of samples sampleSize...

2 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 Tutorial

What is Three.JS? Three.js is a cross-browser JavaScript library and application programming interface that uses WebGL to create and display animated 3D computer graphics in a web browser. The source code...

6 minutes read.

ThreeJS Disposing an Object

The disposal of unwanted library entities is a crucial component of improving performance and avoiding memory leaks in your programme. When you create a three.js type instance, you set aside...

4 minutes read.