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