Capítulo 334 de 859

Chapter 334: ViewHelper

Core Idea

A special type of helper that visualizes the camera's transformation in a small viewport area as an axes helper. Such a helper is often wanted in 3D modeling tools or scene editors like the three.js editor.

The helper allows to click on the X, Y and Z axes which animates the camera so it looks along the selected axis.

Key Concepts

  • animating : boolean (readonly): Whether the helper is currently animating or not.
  • camera : Camera: The camera whose transformation is visualized. It can be reassigned at any time to rebind the helper to a different camera.
  • center : Vector3: The helper's center point.
  • isViewHelper : boolean (readonly): This flag can be used for type testing.
  • location : Object: Controls the position of the helper in the viewport. Use top/bottom for vertical positioning and left/right for horizontal. If `lef…

Code Examples

import { ViewHelper } from 'three/addons/helpers/ViewHelper.js';
  • What it demonstrates: Typical usage of ViewHelper.

Reference Tables

Constructor

Signature
new ViewHelper( camera : Camera, domElement : HTMLElement )

Properties

PropertyDescription
.animating : boolean (readonly)Whether the helper is currently animating or not.
.camera : CameraThe camera whose transformation is visualized. It can be reassigned at any time to rebind the helper to a different camera.
.center : Vector3The helper's center point.
.isViewHelper : boolean (readonly)This flag can be used for type testing.
.location : ObjectControls the position of the helper in the viewport. Use top/bottom for vertical positioning and left/right for horizontal. If left is null, right is used. If top is null, bottom

Methods

MethodDescription
.dispose()Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
.handleClick( event : PointerEvent ) : booleanThis method should be called when a click or pointer event has happened in the app.
`.render( renderer : WebGLRendererWebGPURenderer )`
.setLabelStyle( font : string, color : string, radius : number )Sets the label style. Has no effect when the axes are unlabeled.
`.setLabels( labelX : stringundefined, labelY : string
.update( delta : number )Updates the helper. This method should be called in the app's animation loop.

Key Takeaways

  1. ViewHelper extends: EventDispatcher → Object3D
  2. Most relevant properties: animating, camera, center, isViewHelper.
  3. Key methods: dispose, handleClick, render, setLabelStyle.

Connects To