WML Three

The WML Three.js library provides a streamlined way to integrate Three.js into your applications. THIS LIBRARY DOES NOT DEPEND ON ANGULAR SO YOU CAN USE IN ANY PROJECT, Astro, React, Svelte, Vue, Next.js, etc. . It offers a set of classes and utilities that simplify the creation and management of 3D scenes, renderers, cameras, controls, lights, objects, and animations. This library is designed to help developers quickly set up interactive 3D graphics without dealing with the boilerplate code typically associated with Three.js.

Installation

npm install -s --verbose @windmillcode/wml-three @windmillcode/wml-components-base three lil-gui

Roadmap

• multiple renderers need to be able to accurately choose the correct object from the mouse
• examples with the effect composers
• any unifed and comphesive progress loader for all features in a threejs prop

Caveats

• must set in tsconfig.json compilerOptions

"noImplicitAny": false,
"skipLibCheck": true

• also when you know a property exists on an object you must use @ts-ignore and debug the property to make sure until we can have more advanced typescript types, for our classes we provide getters for different types of the same property but for threejs objects thats harder if not impossible to do
• sometimes it seems there is a resize needed in order to see the threejs scene. you need to set a delay now before calling WMLThreeProps.init because there seems to be an issue with Angular v19 where the height of the element will be 0 before initial navigation of an element. It might be we have to listen for the resize on the element itself
• ensure you are using the exact version that this package is using or you might get severe type errors, these can be ignored as fundamental changes in three.js features truly require you to change the version but if you can get past types that will be great

Usage

Getting Started

Animating Elements

Adding An Inspector

Multiple Renderers

Different Light Types

Selecting Objects With Your Mouse

Loading Various Types of Models

Disable Features

Full Example

References

WMLThreeProps

Property	Type	Description
renderers	Array<any | Renderer>	List of renderers used in the application, defaulting to a WebGLRenderer with antialiasing enabled. It is an array because effect composers are renderers
rendererParentElement	HTMLElement	The DOM element to which the renderer’s canvas will be appended. Defaults to document.body.
scenes	Array<Scene>	Array of Three.js scenes. Defaults to a single new Scene.
cameras	Array<Camera>	List of cameras used in the scenes.
controls	Array<Controls<any>>	Array of control mechanisms like OrbitControls for user interaction.
inspectors	Array<InspectorOptions>	Configuration for GUI inspectors like DatGUI or LilGUI, including options for real-time parameter adjustments.
lights	Array<WMLThreeLightProps>	List of light configurations, each containing a THREE.Light object and related properties like helpers and shadow helpers.
rayCasters	Array<WMLThreeRayCasterProps>	Raycaster configurations used for detecting user interactions with objects in the scene.
objects	Array<WMLThreeObjectProps>	List of object configurations, including geometries, materials, meshes, and textures.
clock	Clock	Three.js Clock object used for tracking time in animations.
animateFunctions	Array<Function>	List of custom functions to be called on each frame of the animation loop. Each function receives an object containing the Clock as a parameter.

Methods

Method	Return Type	Description
init(props?)	Promise<void>	Initializes the Three.js environment with optional parameters to enable or disable specific initialization steps like cameras, controls, lights, objects, and animations.
preCheck()	void	Performs preliminary checks to ensure that the environment supports Three.js (e.g., checking for the presence of the document object).
animate()	void	Default animation loop function that calls all functions in animateFunctions and renders the current scene with the current camera for every renderer in the renderers array.
initRenderers()	void	Appends the renderer’s canvas to the rendererParentElement and sets up initial renderer configurations like size, pixel ratio, and shadow map settings.
initCameras(props?)	void	Initializes cameras with optional parameters like field of view angle, near and far clipping planes.
initControls()	void	Sets up user interaction controls, such as OrbitControls, associated with the current camera and renderer.
initLights()	void	Adds lights to the scene based on the configurations in lights, including optional helpers and shadow helpers for debugging and visualization.
initObjects()	Promise<void>	Loads and adds objects to the scene, handling both regular meshes and loaded assets like textures and GLTF models.
initInspectors()	void	Initializes GUI inspectors for real-time parameter adjustments during development.
initRayCasters()	void	Sets up raycasters for detecting user interactions with objects in the scene, including event listeners for pointer movements.
listenForWindowResize()	void	Adds an event listener to handle window resizing, updating camera aspects and renderer sizes accordingly.
getRendererParentDetails()	{ width: number; height: number; }	Retrieves the dimensions of the rendererParentElement to configure renderer and camera settings.
getCurentScene()	Scene	Returns the current scene being used.
getCurentCamera()	Camera	Returns the current camera being used.
getCurrentRenderer()	Renderer	Returns the current renderer being used.
getCurrentControls()	Controls<any>	Returns the current control mechanism being used.
getCurrentRayCaster()	WMLThreeRayCasterProps	Returns the current raycaster configuration being used.

InspectorOptions

Property	Type	Description
gui	DatGUI | LilGUI	An instance of the GUI inspector to be used for real-time adjustments of properties on three js objects.
values	{ [key: string]: InspectorOption }	Configuration options for the inspector, including values and change handlers.
options	{ [key: string]: any }	Internal state management for the inspector options.

InspectorOption

Property	Type	Description
value	any	The initial value of the option to be controlled via the inspector.
onChange	(value: any, init: boolean) => void	Optional function to be called when the value changes.
min	number	Optional minimum value for numerical controls.
max	number	Optional maximum value for numerical controls.

WMLThreeCommonProps

Property	Type	Description
scene	Scene	Getter and setter for the current scene.
camera	Camera	Getter and setter for the current camera.
renderer	WebGLRenderer	Getter and setter for the current renderer.
control	OrbitControls	Getter and setter for the current control mechanism, specifically OrbitControls.

Method	Return Type	Description
updateCameraPosition(props?)	void	Updates the camera’s position and optionally its orientation using lookAt. Also updates controls if applicable.

WMLThreeObjectProps

Property	Type	Description
geometries	Array<BufferGeometry>	List of geometries to be used in creating meshes.
materials	Array<Material | Material[]>	List of materials or arrays of materials for the meshes.
meshes	Array<Object3D | GLTF | CSS2DObject>	List of meshes or loaded models to be added to the scene.
textures	Array<WMLThreeTexturesProps>	List of texture configurations to be loaded and applied to materials or meshes.
regularMeshes	Array<Mesh>	Returns the array as type Mesh from the meshes property.
gltfMeshes	Array<GLTF>	Returns the array as type GLTF from the meshes property.
css2dMeshes	Array<CSS2DObject>	Returns the array as type CSS2DObject from the meshes property.
instancedMeshes	Array<InstancedMesh>	Returns the array as type InstancedMesh from the meshes property.

WMLThreeCommonObjectProps

Property	Type	Description
geometry	BufferGeometry	Getter and setter for the primary geometry of the object.
material	Material | Material[]	Getter and setter for the primary material(s) used by the object.
mesh	Object3D | GLTF | CSS2DObject	Getter and setter for the primary mesh or model used by the object.
regularMesh	Mesh	Getter and setter for the regular mesh from the meshes property.
gltfMesh	GLTF	Getter and setter for the GLTF mesh from the meshes property.
css2dMesh	CSS2DObject	Getter and setter for the CSS2DObject from the meshes property.
instancedMesh	InstancedMesh	Getter and setter for the instanced mesh from the meshes property.
texture	WMLThreeTexturesProps	Getter and setter for the primary texture configuration of the object.

Methods

Name	Signature	Description
toggleShadow	(props: {cast?: boolean, receive?: boolean}) => void	Toggles the shadow casting and receiving properties of the regularMesh based on the provided arguments.
makeModelLieFlat	() => void	Rotates the regularMesh so that it lies flat, intended for use with planes.
createMesh	(geometry: BufferGeometry, material: Material) => Mesh	Creates and returns a new Mesh object using the provided geometry and material.

WMLThreeLightProps

Property	Type	Description
light	Light	The Three.js light object to be added to the scene.
addHelper	boolean	Flag indicating whether to add a helper object for visualizing the light. The helper class is based on the class of the light property
helper	Object3D	The helper object associated with the light, if any.
addShadowHelper	boolean	Flag indicating whether to add a shadow camera helper for debugging shadows. its class is the CameraHelper
shadowHelper	CameraHelper	The shadow camera helper associated with the light’s shadow camera, if any.

Method	Return Type	Description
toggleShadow(props?)	void	Toggles the shadow casting and receiving properties of the light.
updateCamera()	void	Updates the light’s shadow camera projection matrix and associated helpers.

WMLThreeTexturesProps

Property	Type	Description
manager	LoadingManager	The loading manager to manage multiple texture loading operations.
group	Array<TextureLoadOption>	Array of texture load options, each containing URL, loader, and optional callbacks for load events.

TextureLoadOption

Property	Type	Description
url	string	The URL of the texture to be loaded.
loader	Loader	The loader instance to use for loading the texture.
onLoad	(data: any) => void	Optional callback function to be called upon successful loading.
onProgress	(event: ProgressEvent) => void	Optional callback for progress updates during loading.
onError	(err: unknown) => void	Optional callback to handle errors during loading.

WMLThreeRayCasterProps

Property	Type	Description
raycaster	Raycaster	The Three.js Raycaster instance used for detecting intersections.
mousePosition	Vector2	The normalized mouse position used for raycasting calculations.
hasMouseEnteredRenderer	boolean	Flag to indicate whether the mouse has entered the renderer area, used to optimize raycasting checks.

Name	Signature	Description
intersectCallback	(intersects: Intersection<Object3D<Object3DEventMap>>[]) => void	Callback function to handle the results of raycasting intersections.

Changelog

v18.2.4100 [9/19/24]

• first version of library

v18.2.4200 [9/20/24]

• [BREAKING CHANGE] all references that started with WMLCommonThree are now WMLThreeCommon all references to addRendererToDOM are now initRenderers

• [UPDATE] added CSS2DRenderer support to support html elements in three.js

v18.2.4200 [9/21/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.5001 [9/22/24]

• updated package to reflect the version 18.2.5 of @angular/core package

v18.2.6000 [10/1/24]

• updated package to reflect the version 18.2.6 of @angular/core package

v18.2.7000 [10/2/24]

• updated package to reflect the version 18.2.7 of @angular/core package

v18.2.7001 [10/6/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.7010 [10/9/2024 11:43:22 AM EST]

[UPDATE] projects/wml-three/package.json updated @types/three and three dependencies from 0.168.0 to 0.169.0. This brings you up to speed with the latest Three.js improvements.

[UPDATE] projects/wml-three/src/lib/models.ts added support for InstancedMesh. Now you can access instancedMeshes and instancedMesh for handling instanced meshes, making your rendering more efficient.

[PATCH] projects/wml-three/src/lib/models.ts added makeModelLieFlat() method. This helps you easily rotate plane meshes to lie flat, useful for flat objects like floors or ground planes.

[PATCH] projects/wml-three/tsconfig.lib.json added skipDefaultLibCheck and skipLibCheck for skipping certain library type checks, which should help with invalid typescript errors

v18.2.7020 [10/10/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.8000 [10/10/24]

• updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8000 [10/11/24]

• updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8001 [10/11/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.9000 [10/23/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.10000 [10/31/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.11000 [11/7/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.12000 [11/15/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.12001 [11/17/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.0 [11/19/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.3 [11/20/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.4 [11/26/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.1000 [11/26/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.2000 [12/4/24]

• updated package to reflect the version 19.0.2 of @angular/core package

v19.0.3000 [12/6/24]

• updated package to reflect the version 19.0.3 of @angular/core package

v19.0.4000 [12/12/24]

• updated package to reflect the version 19.0.4 of @angular/core package

v19.0.5000 [12/19/24]

• updated package to reflect the version 19.0.5 of @angular/core package

v19.0.5001 [12/28/24]

• updated package to conform with @windmillcode/wml-components-base
• updated packge to support SSR enviroments

v19.0.5100 [12/29/24]

• updated package to conform with @windmillcode/wml-components-base
• [MAJOR UPDATE] updated packge to support SSR enviroments
• [BREAKING CHANGE] - library no longer uses dat.gui as its 3 years old and does not work in SSR environments. Was kept for compatibility now removed. You can still attempt to use it in the consuming application however its recommended to leverage lil-gui instead

v19.0.6000 [1/12/25]

• updated package to reflect the version 19.0.6 of @angular/core package

v19.0.7000 [1/16/25]

• updated package to reflect the version 19.0.7 of @angular/core package

v19.1.0 [1/17/25]

• updated package to reflect the version 19.1.0 of @angular/core package

v19.1.1000 [1/17/25]

• updated package to reflect the version 19.1.1 of @angular/core package

v19.1.2000 [1/23/25]

• updated package to reflect the version 19.1.2 of @angular/core package

v19.1.3000 [1/23/25]

• updated package to reflect the version 19.1.3 of @angular/core package

v19.1.3100 [1/23/25]

• update package to support the react native ecosystem

v19.1.3111 [1/27/25]

• updated package to conform with @windmillcode/wml-components-base

v19.1.3112 [1/28/25]

• updated package to conform with @windmillcode/wml-components-base

v19.1.4000 [1/31/25]

• updated package to reflect the version 19.1.4 of @angular/core package

v19.1.5000 [2/8/25]

• updated package to reflect the version 19.1.5 of @angular/core package

v19.1.6000 [2/13/25]

• updated package to reflect the version 19.1.6 of @angular/core package

v19.1.7000 [2/21/25]

• updated package to reflect the version 19.1.7 of @angular/core package

v19.1.8000 [3/4/25]

• updated package to reflect the version 19.1.8 of @angular/core package

v19.2.0 [3/4/25]

• updated package to reflect the version 19.2.0 of @angular/core package

v19.2.1000 [3/9/25]

• updated package to reflect the version 19.2.1 of @angular/core package

v19.2.2000 [3/15/25]

• updated package to reflect the version 19.2.2 of @angular/core package

v19.2.3000 [3/21/25]

• updated package to reflect the version 19.2.3 of @angular/core package

v19.2.4000 [3/27/25]

• updated package to reflect the version 19.2.4 of @angular/core package

v19.2.5000 [4/3/25]

• updated package to reflect the version 19.2.5 of @angular/core package

v19.2.5001 [4/6/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.5100 [4/10/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.6000 [4/10/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.7000 [4/21/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.8000 [4/24/25]

• updated package to reflect the version 19.2.8 of @angular/core package

v19.2.9000 [5/1/25]

• updated package to reflect the version 19.2.9 of @angular/core package

v19.2.10000 [5/8/25]

• updated package to reflect the version 19.2.10 of @angular/core package