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.