Chapter 332: VertexNormalsHelper

Core Idea

Visualizes an object's vertex normals.

Requires that normals have been specified in the geometry as a buffer attribute or have been calculated using BufferGeometry#computeVertexNormals.

Key Concepts

• isVertexNormalsHelper : boolean (readonly): This flag can be used for type testing.
• matrixAutoUpdate : boolean: Overwritten and set to false since the object's world transformation is encoded in the helper's geometry data.
• object : Object3D: The object for which to visualize vertex normals.
• size : number: The helper's size.

Code Examples

const geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
const material = new THREE.MeshStandardMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const helper = new VertexNormalsHelper( mesh, 1, 0xff0000 );
scene.add( helper );

• What it demonstrates: Typical usage of VertexNormalsHelper.

Reference Tables

Constructor

Signature
`new VertexNormalsHelper( object : Object3D, size : number, color : number

Properties

Property	Description
.isVertexNormalsHelper : boolean (readonly)	This flag can be used for type testing.
.matrixAutoUpdate : boolean	Overwritten and set to false since the object's world transformation is encoded in the helper's geometry data.
.object : Object3D	The object for which to visualize vertex normals.
.size : number	The helper's size.

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.
.update()	Updates the vertex normals preview based on the object's world transform.

Key Takeaways

1. VertexNormalsHelper extends: EventDispatcher → Object3D → Line → LineSegments
2. Most relevant properties: isVertexNormalsHelper, matrixAutoUpdate, object, size.
3. Key methods: dispose, update.

Connects To

• EventDispatcher: parent class
• Object3D: parent class
• Line: parent class
• LineSegments: parent class
• Source: examples/jsm/helpers/VertexNormalsHelper.js