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.
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
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.
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.
[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
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