Threejs——Helper

Threejs——Helper

introduction

In the process of using threejs, I found that threejs has many built-in helper classes, so that we can implement some very common functions with a few lines of code, which is simple and convenient to use.

The following is a brief introduction to the built-in helper classes in threejs.

Arrow (ArrowHelper)

Introduction

Arrow Helper, a 3D arrow object used to simulate directions.

Official documentation: ArrowHelper – three.js docs (threejs.org)

parameter

parameter	introduce
dir	The direction based on the origin of the arrow. Must be a unit vector.
origin	origin of arrow
length	The length of the arrow. Defaults to 1 .
hex	Defined hexadecimal color value. The default is 0xffff00.
headLength	The length of the arrow head (cone). The default is 0.2 times the length of the arrow (0.2 * length).
headWidth	The width of the arrow head (cone). The default is 0.2 times the length of the arrow head (0.2 * headLength).

renderings

Axes (AxesHelper)

Introduction

An object for simple simulation of 3 coordinate axes.
Red represents the X axis. Green represents the Y axis. Blue represents the Z axis.

Official documentation: AxesHelper – three.js docs (threejs.org)

parameter

parameter	introduce
size	(Optional) Indicates the length of the segment representing the axis. Defaults to 1 .

renderings

Bounding box (BoxHelper)

Introduction

Helper object used to graphically represent an object's world axis-aligned bounding box. Notice:

• To work properly, the target object must contain a BufferGeometry, so it will not work properly when the target object is a sprite.
• This bounding box contains all child objects of the object.

Official documentation: BoxHelper – three.js docs (threejs.org)

parameter

parameter	introduce
object	(Optional) The object to display the bounding box aligned to the world axis.
color	(Optional) The hexadecimal color value of the wireframe box. Defaults to 0xffff00.

renderings

Bounding box 3 (Box3Helper)

Introduction

A helper object that simulates a 3D bounding box Box3.

Official documentation: Box3Helper – three.js docs (threejs.org)

parameter

parameter	introduce
box	The simulated 3D bounding box.
color	(Optional) The color of the wireframe box. Defaults to 0xffff00.

renderings

Same effect as BoxHelper

Camera (CameraHelper)

Introduction

Helper object for simulating camera frustum.
It uses LineSegments to simulate camera frustum.

Official documentation: CameraHelper – three.js docs (threejs.org)

parameter

parameter	introduce
camera	The simulated camera.

renderings

Parallel light (DirectionalLightHelper)

Introduction

A helper object used to simulate a DirectionalLight in the scene. It contains a plane representing the position of the light and a line segment representing the direction of the light.

Official documentation: DirectionalLightHelper – three.js docs (threejs.org)

parameter

parameter	introduce
light	The light source being simulated.
size	(Optional) The size of the plane. Defaults to 1 .
color	(Optional) If no color is set the color of the light source will be used.

renderings

Grid (GridHelper)

Introduction

Grid helper object. A grid is actually a 2D array of lines.

Official documentation: GridHelper – three.js docs (threejs.org)

parameter

parameter	introduce
size	Grid size. Default is 10.
divisions	Grid subdivision times. Default is 10.
colorCenterLine	Midline color. The value can be Color type, hexadecimal and CSS color name. The default is 0x444444
colorGrid	Midline color. The value can be Color type, hexadecimal and CSS color name. The default is 0x444444

renderings

Polar grid (PolarGridHelper)

Introduction

Polar grid helper object. The grid is actually a 2D array of lines.

Official documentation: PolarGridHelper – three.js docs (threejs.org)

parameter

parameter	introduce
radius	Polar grid radius. Can be any positive number. Default is 10.
sectors	The number of sectors the grid will be divided into. This can be any positive integer. The default value is 16.
rings	number of rings. This can be any positive integer. The default value is 8.
divisions	The number of circle subdivisions. It can be any positive integer greater than or equal to 3. The default is 64.
color1	The first color used by the polar grid. The value can be Color type, hexadecimal and CSS color name. The default is 0x444444
color2	The second color used by the polar grid. The value can be Color type, hexadecimal and CSS color name. The default is 0x888888

renderings

HemisphereLightHelper

Introduction

Creates a virtual spherical mesh Mesh helper object to simulate a hemisphere light source HemisphereLight.

Official documentation: HemisphereLightHelper – three.js docs (threejs.org)

parameter

parameter	introduce
light	The light source being simulated.
sphereSize	Mesh size used to simulate light sources.
color	(Optional) If not assigned a helper will use the light's color.

renderings

Plane (PlaneHelper)

Introduction

A helper object for simulating a plane.

Official documentation: PlaneHelper – three.js docs (threejs.org)

parameter

parameter	introduce
plane	The plane being simulated.
size	(Optional) The side length of the helper object. Defaults to 1.
hex	(Optional) The color of the helper object. Defaults to 0xffff00.

renderings

Point Light (PointLightHelper)

Introduction

Creates a virtual spherical mesh Mesh helper object to simulate a point light source PointLight.

Official documentation: PointLightHelper – three.js docs (threejs.org)

parameter

parameter	introduce
light	The light source to simulate.
sphereSize	(Optional) The size of the spherical helper. Defaults to 1 .
color	(Optional) If not assigned a helper will use the light's color.

renderings

Skeleton (SkeletonHelper)

Introduction

The helper object used to simulate the skeleton Skeleton. The helper object uses the LineBasicMaterial material.

Official documentation: SkeletonHelper – three.js docs (threejs.org)

parameter

parameter	introduce
object	Usually an instance of SkinnedMesh. However, any instance of Object3D can be used if it represents a hierarchy of bones (via Object3D.childs).

renderings

Spotlight (SpotLightHelper)

Introduction

A cone helper object for simulating a SpotLight.

Official documentation: https://threejs.org/docs/api/zh/helpers/SpotLightHelper.html

parameter

parameter	introduce
light	The simulated spotlight SpotLight .
color	(Optional) If not assigned a helper will use the light's color.

renderings

Epilogue:

I am a beginner in threejs, and I welcome criticisms and corrections if I write something wrong.