WML Three

The WML Three.js library provides a streamlined way to integrate Three.js into your Angular applications. 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

Terminal window npm install -s --verbose @windmillcode/wml-three @windmillcode/wml-components-base three

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

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

MethodsMethodReturn TypeDescriptioninit(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()voidPerforms preliminary checks to ensure that the environment supports Three.js (e.g., checking for the presence of the document object).animate()voidDefault animation loop function that calls all functions in animateFunctions and renders the current scene with the current camera.addRendererToDOM()voidAppends the renderer’s canvas to the rendererParentElement and sets up initial renderer configurations like size, pixel ratio, and shadow map settings.initCameras(props?)voidInitializes cameras with optional parameters like field of view angle, near and far clipping planes.initControls()voidSets up user interaction controls, such as OrbitControls, associated with the current camera and renderer.initLights()voidAdds 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()voidInitializes GUI inspectors for real-time parameter adjustments during development.initRayCasters()voidSets up raycasters for detecting user interactions with objects in the scene, including event listeners for pointer movements.listenForWindowResize()voidAdds 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()SceneReturns the current scene being used.getCurentCamera()CameraReturns the current camera being used.getCurrentRenderer()RendererReturns the current renderer being used.getCurrentControls()Controls<any>Returns the current control mechanism being used.getCurrentRayCaster()WMLThreeRayCasterPropsReturns the current raycaster configuration being used.

InspectorOptions PropertyTypeDescriptionguiDatGUI | LilGUIAn 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 PropertyTypeDescriptionvalueanyThe initial value of the option to be controlled via the inspector.onChange(value: any, init: boolean) => voidOptional function to be called when the value changes.minnumberOptional minimum value for numerical controls.maxnumberOptional maximum value for numerical controls.

WMLThreeCommonProps PropertyTypeDescriptionsceneSceneGetter and setter for the current scene.cameraCameraGetter and setter for the current camera.rendererWebGLRendererGetter and setter for the current renderer.controlOrbitControlsGetter and setter for the current control mechanism, specifically OrbitControls.

WMLThreeObjectProps

WMLCommonThreeObjectProps PropertyTypeDescriptiongeometryBufferGeometryGetter and setter for the primary geometry.materialMaterial | Material[]Getter and setter for the primary material(s).meshObject3D | GLTFGetter and setter for the primary mesh or model.textureWMLThreeTexturesPropsGetter and setter for the primary texture configuration.

WMLThreeLightProps

WMLThreeTexturesProps

TextureLoadOption PropertyTypeDescriptionurlstringThe URL of the texture to be loaded.loaderLoaderThe loader instance to use for loading the texture.onLoad(data: any) => voidOptional callback function to be called upon successful loading.onProgress(event: ProgressEvent) => voidOptional callback for progress updates during loading.onError(err: unknown) => voidOptional callback to handle errors during loading.

WMLThreeRayCasterProps

Changelog

v18.2.4100 [9/16/24]

first version of library