Global

Members

(constant) Colors :Object.<String, Number>

RGB colors in hexadecimal.
Type:
  • Object.<String, Number>
Source:

axesHelper :THREE.AxesHelper

Create a helper for the axes (optional). Geometry for the global coordinate axes.
Type:
Source:

axis :String

Current rotation axis.
Type:
  • String
Source:

camera :THREE.PerspectiveCamera

A perspective camera.

Type:
Source:

cameraHelper :THREE.CameraHelper

Create a helper for the shadow camera (optional)
Type:
Source:

(constant) euler :Object.<{x: Number, y: Number, z: Number}>

Keep track of the Euler angles.
Type:
  • Object.<{x: Number, y: Number, z: Number}>
Source:

exporter :ExportToGLTF

Exporter to GLTF.
Type:
Source:

hemisphereLight :THREE.HemisphereLight

A gradient colored light.
Type:
Source:

holder :THREE.Object3D

A container for everything: plane, pilot and local axes.

Set the rotation order for Euler angles for this object container to intrinsic "YZX": head (yaw), pitch, roll.
Type:
Source:

localAxes :THREE.Object3D

Local axes used for intrinsic rotations.
Type:
Source:

(constant) objects

Global Threejs objects in application.
Properties:
Name Type Description
objects Object
Properties
Name Type Description
localAxes THREE.Object3D local axes used for intrinsic rotations.
scene THREE.Scene WebGL scene.
holder THREE.Object3D a container for everything: plane, pilot and local axes.
axesHelper THREE.AxesHelper an axis object to visualize the 3 global axes.
spotLightHelper THREE.SpotLightHelper a cone shaped helper object for a SpotLight.
cameraHelper THREE.CameraHelper depicts the frustum of a camera using LineSegments.
shadowPlane THREE.Mesh a plane for objects cast shadow to.
camera THREE.PerspectiveCamera a perspective camera.
renderer THREE.WebGLRenderer renderer to display the scene using WebGL.
pointLightHelper THREE.PointLightHelper a spherical Mesh for visualizing a PointLight.
Source:

pointLightHelper :THREE.PointLightHelper

Create a helper for the point light (optional)
Type:
Source:

renderer :THREE.WebGLRenderer

A renderer.

Type:
Source:

scene :THREE.Scene

A scene.

Type:
Source:

(constant) selector :Object.<{axes:Boolean, auto_rotate: Boolean, light: Boolean}>

Turn the display of the model axes/animation on/off.
Type:
  • Object.<{axes:Boolean, auto_rotate: Boolean, light: Boolean}>
Source:

shadowPlane :THREE.Mesh

A plane for shadow.

Type:
Source:

spotLightHelper :THREE.SpotLightHelper

Create a helper for the spot light (optional)
Type:
Source:

textGeometry :TextGeometry.TextGeometry

TextGeometry object.
Type:
Source:

Methods

changeBox(geometry, val)

Change the vertex coordinates of a given Box geometry.
Parameters:
Name Type Default Description
geometry THREE.BoxGeometry a box.
val Number 1 coordinate value.
Source:
See:

clipOptions() → {Object.<{animations:Array.<AnimationClip>}>}

Creates an AnimationClip array and returns it into an option object.
Source:
Returns:
options
Type
Object.<{animations:Array.<AnimationClip>}>

createAirPlane(parent) → {AirPlane}

Creates an object AirPlane and adds to the scene.
Parameters:
Name Type Description
parent THREE.Object3D airplane container.
Source:
Returns:
created airplane object.
Type
AirPlane

createLights(scene)

Lighting is certainly one of the trickiest parts when it comes to setting up a scene.

The lights will set the mood of the whole scene and must be determined carefully.
Just make the lightning good enough to make the objects visible.
Parameters:
Name Type Description
scene THREE.Object3D where you place objects, lights and cameras.
Source:
See:

createLights2(scene, target)

A simpler lighting scheme.

Note that, without a global source of light, all surfaces will render black, unless their emissive properties are also set.
This can be avoided, by using an ambient or hemisphere light source.
Parameters:
Name Type Description
scene THREE.Object3D where you place objects, lights and cameras.
target THREE.Object3D scene object target.
Source:
See:

deg2rad(deg) → {Number}

Convert an angle in degrees to radians.
Parameters:
Name Type Description
deg Number angle in degrees.
Source:
See:
Returns:
angle in radians.
Type
Number

displayAngles()

Display the Euler angles in the browser.
Source:

drawGlobalAxes(parent)

Draw three coordinate axes.
Parameters:
Name Type Description
parent THREE.Object3D axis container.
Source:

drawLocalAxes(parent, font)

Draw three local coordinate axes.
Parameters:
Name Type Description
parent THREE.Object3D axis container.
font FontLoader.FontLoader text font.
Source:

drawTwoOctagons(parent)

Draw two local auxiliary octagon.
Parameters:
Name Type Description
parent THREE.Object3D octagon container.
Source:

drawTwoTriangles(parent)

Draw two local auxiliary triangles.
Parameters:
Name Type Description
parent THREE.Object3D triangle container.
Source:

getChar(event) → {String}

Translate keypress events to strings.
Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:
See:
Returns:
key pressed.
Type
String

handleKeyPress(event)

Handler for key press events.
Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:

handleWindowResize()

Callback invoked when the document view (window) has been resized.

Also resizes the canvas and viewport.
Source:
See:

mainEntrance()

Entry point when page is loaded for loading a font and start the application.
Source:
See:

rad2deg(rad) → {Number}

Convert an angle in radians to degrees.
Parameters:
Name Type Description
rad Number angle in radians.
Source:
See:
Returns:
angle in degrees.
Type
Number

render() → {animate}

A closure to render the application.
Source:
See:
Returns:
animation callback.
Type
animate

setAnimationLoop(loop)

A built in function that can be used instead of requestAnimationFrame.

The renderer.setAnimationLoop parameter is a callback, which will be called every available frame.
If null is passed it will stop any already ongoing animation.
Parameters:
Name Type Description
loop function callback.
Source:

start(font)

Entry point when font is loaded.
Parameters:
Name Type Description
font FontLoader.FontLoader text font.
Source:
See:

zoomIn()

Increase zoom.
Source:

zoomOut()

Decrease zoom.
Source:

Type Definitions

animate()

Animation callback.
Source:

Events

KeyboardEvent

Creates a keyboard keydown event.

Parameters:
Name Type Description
key String char code.
Source:
Returns:
a keyboard event.
Type
KeyboardEvent

changeAxes

Executed when the axes checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change. The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeLight

Executed when the light checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change. The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeOctagons

Executed when the octagons checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change. The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeRot

Executed when any rot <input radio>'s checkbox is checked (but not unchecked).

Appends an event listener for events whose type attribute value is change. The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

keydown

Key handler.

Calls handleKeyPress whenever any of these keys is pressed:
  • Space
  • ArrowUp
  • ArrowDown
  • ArrowLeft
  • ArrowRight
Source:

load

Loads the theejs module and the application.

Unfortunately, importmap is only supported by Safari version 16.4 and later.
Since I still use macOS Catalina, my Safari version is 15.6.1, which obliges me to conditionally and dynamically load the threejs module.
Parameters:
Name Type Description
event Event an object has loaded.
function callback function to run when the event occurs.
Source:
See:

resize

Executed when the window is resized.

Appends an event listener for events whose type attribute value is resize.

The callback argument sets the callback that will be invoked when the event is dispatched.

Parameters:
Name Type Description
event Event the document view is resized.
function callback function to run when the event occurs.
useCapture Boolean handler is executed in the bubbling or capturing phase.
Source:
See: