Update readme, Add GLTFLoader.ObjectConstructors, three-ts-types update, typescript update, other small fixes.

README.md

@@ -87,6 +87,7 @@ To make changes and run the example, click on the CodePen button on the top righ
     - [AssetImporter](#assetimporter)
     - [AssetExporter](#assetexporter)
     - [MaterialManager](#materialmanager)
+  - [Other classes and interfaces](#other-classes-and-interfaces)
 - [Plugins](#threepipe-plugins)
   - [TonemapPlugin](#tonemapplugin) - Add tonemap to the final screen pass
   - [DropzonePlugin](#dropzoneplugin) - Drag and drop local files to import and load
@@ -112,6 +113,8 @@ To make changes and run the example, click on the CodePen button on the top righ
   - [HDRiGroundPlugin](#hdrigroundplugin) - Add support for ground projected hdri/skybox to the webgl background shader.
   - [VirtualCamerasPlugin](#virtualcamerasplugin) - Add support for rendering virtual cameras before the main one every frame.
   - [EditorViewWidgetPlugin](#editorviewwidgetplugin) - Adds an interactive ViewHelper/AxisHelper that syncs with the main camera.
+  - [Object3DWidgetsPlugin](#object3dwidgetsplugin) - Automatically create light and camera helpers/gizmos when they are added to the scene.
+  - [Object3DGeneratorPlugin](#object3dwidgetsplugin) - Provides UI and API to create scene objecs like lights, cameras, meshes, etc.
   - [Rhino3dmLoadPlugin](#rhino3dmloadplugin) - Add support for loading .3dm files
   - [PLYLoadPlugin](#plyloadplugin) - Add support for loading .ply files
   - [STLLoadPlugin](#stlloadplugin) - Add support for loading .stl files
@@ -1871,6 +1874,9 @@ camera.deactivateMain()
 
 See also [CameraViewPlugin](#cameraviewplugin) for camera focus animation.
 
+Note: The constructor signature of `PerspectiveCamera2` is different `PerspectiveCamera`(from three.js), since it requires the canvas and the controlsMode during creation. 
+Because of this `PerspectiveCamera0` is provided with the same signature as `PerspectiveCamera` for compatibility, in case the controls functionality is not required.
+
 ## AssetManager
 
 Source Code: [src/assetmanager/AssetManager.ts](./src/assetmanager/AssetManager.ts)
@@ -2059,6 +2065,43 @@ materialManager.dispose()
 
 [`materialManager.dispose`](https://threepipe.org/docs/classes/MaterialManager.html#dispose) - Dispose manager and all materials.
 
+## Other classes and interfaces
+
+Threepipe provides various interfaces and classes for for three.js objects with upgraded features like UI events, serialization, etc. 
+These can be used while developing new apps to get better developer experience and features.
+When standard three.js instances are added to the scene, they are automatically upgraded automatically at runtime to make them work with the rest of the framework.
+
+Some important interfaces:
+
+* [IObject3D](https://threepipe.org/docs/interfaces/IObject3D.html) - Interface for an extended version of three.js [Object3D](https://threejs.org/docs/#api/en/core/Object3D).
+* [ILight](https://threepipe.org/docs/interfaces/ILight.html) - Interface for an extended version of three.js [Light](https://threejs.org/docs/#api/en/lights/Light).
+* [ICamera](https://threepipe.org/docs/interfaces/ICamera.html) - Interface for an extended version of three.js [Camera](https://threejs.org/docs/#api/en/cameras/Camera).
+* [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html) - Interface for an extended version of three.js [Material](https://threejs.org/docs/#api/en/materials/Material).
+* [ITexture](https://threepipe.org/docs/interfaces/ITexture.html) - Interface for an extended version of three.js [Texture](https://threejs.org/docs/#api/en/textures/Texture).
+* [IRenderTarget](https://threepipe.org/docs/interfaces/IRenderTarget.html) - Interface for an extended version of three.js [WebGLRenderTarget](https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget).
+* [IGeometry](https://threepipe.org/docs/interfaces/IGeometry.html) - Interface for an extended version of three.js [BufferGeometry](https://threejs.org/docs/#api/en/core/BufferGeometry).
+* [IScene](https://threepipe.org/docs/interfaces/IScene.html) - Interface for an extended version of three.js [Scene](https://threejs.org/docs/#api/en/scenes/Scene).
+* [IRenderManager](https://threepipe.org/docs/interfaces/IRenderManager.html) - Interface for rendering and render target manager.
+
+Some important classes
+
+* [Mesh2](https://threepipe.org/docs/classes/Mesh2.html) - Extends three.js [Mesh](https://threejs.org/docs/#api/en/objects/Mesh) and implements [IObject3D](https://threepipe.org/docs/interfaces/IObject3D.html).
+* [PerspectiveCamera2](https://threepipe.org/docs/classes/PerspectiveCamera2.html) - Extends three.js [PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) and implements [ICamera](https://threepipe.org/docs/interfaces/ICamera.html). (different constructor than PerspectiveCamera)
+* [PerspectiveCamera0](https://threepipe.org/docs/classes/PerspectiveCamera0.html) - Extends three.js [PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) and implements [ICamera](https://threepipe.org/docs/interfaces/ICamera.html). (same constructor than PerspectiveCamera)
+* [BufferGeometry2](https://threepipe.org/docs/classes/BufferGeometry2.html) - Extends three.js [BufferGeometry](https://threejs.org/docs/#api/en/core/BufferGeometry) and implements [IGeometry](https://threepipe.org/docs/interfaces/IGeometry.html).
+* [RootScene](https://threepipe.org/docs/classes/RootScene.html) - Extends three.js [Scene](https://threejs.org/docs/#api/en/scenes/Scene) and implements [IScene](https://threepipe.org/docs/interfaces/IScene.html).
+* [RenderManager](https://threepipe.org/docs/classes/RenderManager.html) - Implements [IRenderManager](https://threepipe.org/docs/interfaces/IRenderManager.html).
+* [PhysicalMaterial](https://threepipe.org/docs/classes/PhysicalMaterial.html) - Extends three.js [MeshPhysicalMaterial](https://threejs.org/docs/#api/en/materials/MeshPhysicalMaterial) and implements [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html).
+* [UnlitMaterial](https://threepipe.org/docs/classes/UnlitMaterial.html) - Extends three.js [MeshBasicMaterial](https://threejs.org/docs/#api/en/materials/MeshBasicMaterial) and implements [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html).
+* [LineMaterial2](https://threepipe.org/docs/classes/LineMaterial2.html) - Extends three.js [LineMaterial](https://threejs.org/docs/#api/en/materials/LineMaterial) and implements [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html).
+* [UnlitLineMaterial](https://threepipe.org/docs/classes/UnlitLineMaterial.html) - Extends three.js [LineBasicMaterial](https://threejs.org/docs/#api/en/materials/LineBasicMaterial) and implements [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html).
+* [DirectionalLight2](https://threepipe.org/docs/classes/DirectionalLight2.html) - Extends three.js [DirectionalLight](https://threejs.org/docs/#api/en/lights/DirectionalLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html).
+* [SpotLight2](https://threepipe.org/docs/classes/SpotLight2.html) - Extends three.js [SpotLight](https://threejs.org/docs/#api/en/lights/SpotLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html).
+* [PointLight2](https://threepipe.org/docs/classes/PointLight2.html) - Extends three.js [PointLight](https://threejs.org/docs/#api/en/lights/PointLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html).
+* [HemisphereLight2](https://threepipe.org/docs/classes/HemisphereLight2.html) - Extends three.js [HemisphereLight](https://threejs.org/docs/#api/en/lights/HemisphereLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html).
+* [AmbientLight2](https://threepipe.org/docs/classes/AmbientLight2.html) - Extends three.js [AmbientLight](https://threejs.org/docs/#api/en/lights/AmbientLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html).
+* [RectAreaLight2](https://threepipe.org/docs/classes/RectAreaLight2.html) - Extends three.js [RectAreaLight](https://threejs.org/docs/#api/en/lights/RectAreaLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html).
+
 # Threepipe Plugins
 
 ThreePipe has a simple plugin system that allows you to easily add new features to the viewer. Plugins can be added to the viewer using the `addPlugin` and `addPluginSync` methods. The plugin system is designed to be modular and extensible. Plugins can be added to the viewer at any time and can be removed using the `removePlugin` and `removePluginSync` methods.
@@ -2813,6 +2856,102 @@ const plugin = viewer.addPluginSync(new EditorViewWidgetPlugin())
 plugin.enabled = false
 ```
 
+## Object3DGeneratorPlugin
+
+[//]: # (todo: image)
+
+[Example](https://threepipe.org/examples/#object3d-generator-plugin/) —
+[Source Code](./src/plugins/extras/Object3DGeneratorPlugin.ts) —
+[API Reference](https://threepipe.org/docs/classes/Object3DGeneratorPlugin.html) 
+
+Object3DGeneratorPlugin adds support for creating different types of lights and camera objects in the viewer.
+Call the `generate` method with any type to generate a type of object(like lights, cameras, mesh etc).
+
+Support for the following types of generators is included in the plugin:
+* camera-perspective - Creates instance of `PerspectiveCamera2`
+* light-directional - Creates instance of `DirectionalLight2`
+* light-ambient - Creates instance of `AmbientLight2`
+* light-point - Creates instance of `PointLight2`
+* light-spot - Creates instance of `SpotLight2`
+* light-hemisphere - Creates instance of `HemisphereLight2`
+* light-rect-area - Creates instance of `RectAreaLight2`
+
+Additional types of generators can be added dynamically or by other plugins by adding a custom generator function to the `Object3DGeneratorPlugin.generators` object. This is done by [GeometryGeneratorPlugin](#threepipeplugin-geometry-generator) to add various type of primitive objects like plane, sphere, etc
+A custom generator can take in any kind object as parameters and should return an `IObject3D`.
+
+Sample Usage
+```typescript
+import {ThreeViewer, Object3DWidgetsPlugin, Object3DGeneratorPlugin, Mesh2} from 'threepipe'
+
+const viewer = new ThreeViewer({...})
+
+const generator = viewer.addPluginSync(Object3DGeneratorPlugin)
+generator.generate('camera-perspective', {
+  position: new Vector3(5, 5, 0),
+  name: 'My Camera'
+})
+const light = generator.generate('light-spot', {
+  position: new Vector3(5, 0, 0),
+})
+
+// to add support for a custom helper
+plugin.generators['custom-object'] = (params)=>{
+  const object = new Mesh2(new PlaneGeometry(1,1), new PhysicalMaterial())
+  object.name = params.name ?? 'Custom Mesh'
+  if(params.position) object.position.copy(params.position)
+  return object
+}
+const obj = generator.generate('custom-object', {
+  position: new Vector3(5, 0, 0),
+})
+
+// Add Object3DWidgetsPlugin to see the added lights and cameras.
+viewer.addPluginSync(new Object3DWidgetsPlugin())
+```
+
+Check the [example](https://threepipe.org/examples/#object3d-generator-plugin/) for the UI.
+
+## Object3DWidgetsPlugin
+
+[//]: # (todo: image)
+
+[Example](https://threepipe.org/examples/#object3d-widgets-plugin/) —
+[Source Code](./src/plugins/extras/Object3DWidgetsPlugin.ts) —
+[API Reference](https://threepipe.org/docs/classes/Object3DWidgetsPlugin.html) 
+
+Object3DWidgetsPlugin adds support for light and camera helpers/gizmos in the viewer.
+A helper is automatically created when any supported light or camera is added to the scene.
+Simply add the plugin to the viewer to see the widget.
+
+Support for additional types of helpers can be added dynamically or by other plugins by pushing a helper constructor to the `Object3DWidgetsPlugin.helpers` array, and calling `Object3DWidgetsPlugin.refresh()`.
+
+The helper class prototype should implement the `IObject3DHelper` interface. Check `DirectionalLightHelper2` for an example.
+
+```typescript
+import {ThreeViewer, Object3DWidgetsPlugin, Object3DGeneratorPlugin} from 'threepipe'
+
+const viewer = new ThreeViewer({...})
+
+// Add the plugin to add support
+const plugin = viewer.addPluginSync(new Object3DWidgetsPlugin())
+
+// Add some lights or cameras to the scene. (This can be done before adding the plugin as well)
+// Using Object3DGeneratorPlugin to create a camera and add it to the scene.
+const generator = viewer.getOrAddPluginSync(Object3DGeneratorPlugin)
+generator.generate('camera-perspective', {
+  position: new Vector3(5, 5, 0),
+  name: 'My Camera'
+})
+
+// to hide the widgets
+plugin.enabled = false
+
+// to add support for a custom helper
+plugin.helpers.push(MyCustomHelper)
+plugin.refresh()
+
+```
+
 
 ## Rhino3dmLoadPlugin
 

package.json

@@ -94,28 +94,28 @@
     "rollup-plugin-postcss": "^4.0.2",
     "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2018/package.tgz",
     "tslib": "^2.5.0",
-    "typedoc": "^0.24.7",
-    "typescript": "^5.0.4",
+    "typedoc": "^0.25.6",
+    "typescript": "^5.3.3",
     "typescript-plugin-css-modules": "^5.0.1",
     "@rollup/plugin-replace": "^5.0.2",
     "popmotion": "^11.0.5"
   },
   "dependencies": {
-    "stats.js": "^0.17.0",
-    "uiconfig.js": "^0.0.9",
-    "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1018/package.tgz",
+    "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1019/package.tgz",
     "@types/webxr": "^0.5.1",
     "@types/wicg-file-system-access": "^2020.9.5",
-    "ts-browser-helpers": "^0.9.0"
+    "stats.js": "^0.17.0",
+    "ts-browser-helpers": "^0.9.0",
+    "uiconfig.js": "^0.0.9"
   },
   "//": {
     "dependencies": {
       "uiconfig.js": "^0.0.9",
       "ts-browser-helpers": "^0.8.0",
-      "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2018/package.tgz",
-      "three-f": "https://github.com/repalash/three.js-modded/archive/refs/tags/v0.152.2018.tar.gz",
-      "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1018/package.tgz",
-      "@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1018.tar.gz",
+      "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2019/package.tgz",
+      "three-f": "https://github.com/repalash/three.js-modded/archive/refs/tags/v0.152.2019.tar.gz",
+      "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1019/package.tgz",
+      "@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1019.tar.gz",
       "@types/three-pkg": "https://gitpkg.now.sh/repalash/three-ts-types/types/three?modded_three"
     },
     "local_dependencies": {

src/assetmanager/AssetManager.ts

@@ -169,7 +169,6 @@ export class AssetManager extends EventDispatcher<BaseEvent&{data: ImportResult}
                     }
                 }
                 for (const light of lights) {
-                    // @ts-expect-error update three-ts-types
                     if ((light as ILight).assetType === 'light') continue
                     if (!light.parent || options.replaceLights === false) {
                         iLightCommons.upgradeLight.call(light)
@@ -182,7 +181,6 @@ export class AssetManager extends EventDispatcher<BaseEvent&{data: ImportResult}
                                         (light as any).isHemisphereLight ? new HemisphereLight2() :
                                             (light as any).isRectAreaLight ? new RectAreaLight2() :
                                                 undefined
-                        // @ts-expect-error update three-ts-types
                         if (light === newLight || !newLight) continue
                         light.parent.children.splice(light.parent.children.indexOf(light), 1, newLight)
                         newLight.parent = light.parent as any

src/assetmanager/import/GLTFLoader2.ts

@@ -1,5 +1,6 @@
-import {GLTF, GLTFLoader, GLTFLoaderPlugin, GLTFParser} from 'three/examples/jsm/loaders/GLTFLoader.js'
-import {LoadingManager, Object3D} from 'three'
+import type {GLTF, GLTFLoaderPlugin, GLTFParser} from 'three/examples/jsm/loaders/GLTFLoader.js'
+import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
+import {LoadingManager, Object3D, OrthographicCamera} from 'three'
 import {AnyOptions, safeSetProperty} from 'ts-browser-helpers'
 import {ThreeViewer} from '../../viewer'
 import {generateUUID} from '../../three'
@@ -17,12 +18,32 @@ import {
 import {RootSceneImportResult} from '../IAssetImporter'
 import {ILoader} from '../IImporter'
 import {ThreeSerialization} from '../../utils'
+import {
+    DirectionalLight2,
+    PerspectiveCamera0,
+    PhysicalMaterial,
+    PointLight2,
+    SpotLight2,
+    UnlitLineMaterial,
+    UnlitMaterial,
+} from '../../core'
 
 export class GLTFLoader2 extends GLTFLoader implements ILoader<GLTF, Object3D|undefined> {
     isGLTFLoader2 = true
     constructor(manager: LoadingManager) {
         super(manager)
         this.preparsers.push(glbEncryptionPreparser)
+
+        GLTFLoader.ObjectConstructors.DirectionalLight = DirectionalLight2 as any
+        GLTFLoader.ObjectConstructors.PointLight = PointLight2 as any
+        GLTFLoader.ObjectConstructors.SpotLight = SpotLight2 as any
+        GLTFLoader.ObjectConstructors.MeshStandardMaterial = PhysicalMaterial as any
+        GLTFLoader.ObjectConstructors.MeshBasicMaterial = UnlitMaterial as any
+        GLTFLoader.ObjectConstructors.MeshPhysicalMaterial = PhysicalMaterial as any
+        GLTFLoader.ObjectConstructors.LineBasicMaterial = UnlitLineMaterial as any
+        // GLTFLoader.ObjectConstructors.PointsMaterial = PointsMaterial2
+        GLTFLoader.ObjectConstructors.PerspectiveCamera = PerspectiveCamera0 // todo set domElement in the AssetManager during process
+        GLTFLoader.ObjectConstructors.OrthographicCamera = OrthographicCamera // todo
     }
 
     static ImportExtensions: ((parser: GLTFParser) => GLTFLoaderPlugin)[] = [
@@ -71,6 +92,7 @@ export class GLTFLoader2 extends GLTFLoader implements ILoader<GLTF, Object3D|un
                 delete node.userData.gltfUUID // have issue with cloning if we don't dispose.
             }
         })
+        // todo: replacing lights and camera, todo: remove and change constructors in GLTFLoader.js
         if (!scene.userData) scene.userData = {}
         if (res.userData) scene.userData.gltfExtras = res.userData // todo: put back in gltf in GLTFExporter2
         if (res.cameras) res.cameras.forEach(c => !c.parent && scene.add(c))

src/core/light/DirectionalLight2.ts

@@ -1,5 +1,5 @@
 import {Color, ColorRepresentation, DirectionalLight, DirectionalLightShadow, Euler, Vector3} from 'three'
-import {ILight, ILightEvent} from './ILight'
+import {ILight, ILightEvent, ILightEventTypes} from './ILight'
 import {iLightCommons} from '../object/iLightCommons'
 import {IObject3D} from '../IObject'
 import {uiColor, uiPanelContainer, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
@@ -8,7 +8,10 @@ import {onChange3} from 'ts-browser-helpers'
 // todo: add LightShadow uiconfig
 // todo: add Light section in the readme detailing these ...2 lights
 @uiPanelContainer('Directional Light')
-export class DirectionalLight2 extends DirectionalLight implements ILight<DirectionalLightShadow> {
+export class DirectionalLight2<
+    E extends ILightEvent = ILightEvent,
+    ET extends ILightEventTypes = ILightEventTypes
+> extends DirectionalLight<E, ET> implements ILight<DirectionalLightShadow> {
     assetType = 'light' as const
     setDirty = iLightCommons.setDirty
     refreshUi = iLightCommons.refreshUi

src/core/light/ILight.ts

@@ -5,7 +5,6 @@ export interface ILight<
     TShadowSupport extends LightShadow | undefined = LightShadow | undefined,
     E extends ILightEvent = ILightEvent,
     ET extends ILightEventTypes = ILightEventTypes
-// @ts-expect-error update three-ts-types
 > extends Light<TShadowSupport, E, ET>, IObject3D<E, ET> {
     assetType: 'light'
     readonly isLight: true

src/core/material/LegacyPhongMaterial.ts

@@ -51,12 +51,13 @@ export class LegacyPhongMaterial extends MeshPhongMaterial<IMaterialEvent, Phong
     envMap: ITexture | null = null
 
     constructor({customMaterialExtensions, ...parameters}: MeshPhongMaterialParameters & IMaterialParameters = {}) {
-        super(parameters)
+        super()
         !this.defines && (this.defines = {})
         this.fog = false
         this.setDirty = this.setDirty.bind(this)
         if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions)
         iMaterialCommons.upgradeMaterial.call(this)
+        this.setValues(parameters)
     }
 
     // region Material Extension

src/core/material/LineMaterial2.ts

@@ -34,11 +34,12 @@ export class LineMaterial2 extends LineMaterial<IMaterialEvent, LineMaterial2Eve
     generator?: IMaterialGenerator
 
     constructor({customMaterialExtensions, ...parameters}: LineMaterialParameters & IMaterialParameters = {}) {
-        super(parameters)
+        super()
         this.fog = false
         this.setDirty = this.setDirty.bind(this)
         if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions)
         iMaterialCommons.upgradeMaterial.call(this)
+        this.setValues(parameters)
     }
 
     // region Material Extension

src/core/material/PhysicalMaterial.ts

@@ -60,12 +60,13 @@ export class PhysicalMaterial extends MeshPhysicalMaterial<IMaterialEvent, Physi
 
 
     constructor({customMaterialExtensions, ...parameters}: MeshPhysicalMaterialParameters & IMaterialParameters = {}) {
-        super(parameters)
+        super()
         this.fog = false
         this.attenuationDistance = 0 // infinite distance (for Ui)
         this.setDirty = this.setDirty.bind(this)
         if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions)
         iMaterialCommons.upgradeMaterial.call(this)
+        this.setValues(parameters)
     }
 
     // region Material Extension

src/core/material/ShaderMaterial2.ts

@@ -54,13 +54,14 @@ export class ShaderMaterial2<E extends IMaterialEvent = IMaterialEvent, ET = IMa
     type: 'ShaderMaterial' | 'RawShaderMaterial' = 'ShaderMaterial'
 
     constructor({customMaterialExtensions, ...parameters}: ShaderMaterialParameters & IMaterialParameters = {}, isRawShaderMaterial = false) {
-        super(parameters)
+        super()
         this.isRawShaderMaterial = isRawShaderMaterial
         if (isRawShaderMaterial) {
             this.type = 'RawShaderMaterial'
         }
         if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions)
         iMaterialCommons.upgradeMaterial.call(this)
+        this.setValues(parameters)
     }
 
     // region Material Extension

src/core/material/UnlitLineMaterial.ts

@@ -38,12 +38,13 @@ export class UnlitLineMaterial extends LineBasicMaterial<IMaterialEvent, UnlitLi
     generator?: IMaterialGenerator
 
     constructor({customMaterialExtensions, ...parameters}: LineBasicMaterialParameters & IMaterialParameters = {}) {
-        super(parameters)
+        super()
         !this.defines && (this.defines = {})
         this.fog = false
         this.setDirty = this.setDirty.bind(this)
         if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions)
         iMaterialCommons.upgradeMaterial.call(this)
+        this.setValues(parameters)
     }
 
     // region Material Extension

src/core/material/UnlitMaterial.ts

@@ -49,12 +49,13 @@ export class UnlitMaterial extends MeshBasicMaterial<IMaterialEvent, UnlitMateri
     envMap: ITexture | null = null
 
     constructor({customMaterialExtensions, ...parameters}: MeshBasicMaterialParameters & IMaterialParameters = {}) {
-        super(parameters)
+        super()
         !this.defines && (this.defines = {})
         this.fog = false
         this.setDirty = this.setDirty.bind(this)
         if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions)
         iMaterialCommons.upgradeMaterial.call(this)
+        this.setValues(parameters)
     }
 
     // region Material Extension

src/three/controls/TransformControls2.ts

@@ -3,6 +3,7 @@ import {MathUtils} from 'three'
 import type {ICamera, IObject3D, ISceneEvent, IWidget} from '../../core'
 import {iObjectCommons} from '../../core'
 import {uiDropdown, uiNumber, uiPanelContainer, uiToggle} from 'uiconfig.js'
+import {onChange2} from 'ts-browser-helpers'
 
 @uiPanelContainer('Transform Controls')
 export class TransformControls2 extends TransformControls implements IWidget, IObject3D {
@@ -134,6 +135,7 @@ export class TransformControls2 extends TransformControls implements IWidget, IO
     // axis: 'X' | 'Y' | 'Z' | 'E' | 'XY' | 'YZ' | 'XZ' | 'XYZ' | 'XYZE' | null
 
     @uiDropdown('Mode', ['translate', 'rotate', 'scale'].map(label=>({label})))
+    @onChange2('setDirty')
         mode: 'translate' | 'rotate' | 'scale'
 
     translationSnap: number | null
@@ -141,14 +143,19 @@ export class TransformControls2 extends TransformControls implements IWidget, IO
     scaleSnap: number | null
 
     @uiDropdown('Space', ['world', 'local'].map(label=>({label})))
+    @onChange2('setDirty')
         space: 'world' | 'local'
     @uiNumber('Size')
+    @onChange2('setDirty')
         size: number
     @uiToggle('Show X')
+    @onChange2('setDirty')
         showX: boolean
     @uiToggle('Show Y')
+    @onChange2('setDirty')
         showY: boolean
     @uiToggle('Show Z')
+    @onChange2('setDirty')
         showZ: boolean
 
     // dragging: boolean

src/three/widgets/CameraHelper2.ts

@@ -14,7 +14,6 @@ import {LineMaterial2} from '../../core'
  */
 export class CameraHelper2 extends ACameraHelperWidget {
     protected _vector = new Vector3()
-    // @ts-expect-error update three-ts-types remove abstract
     protected _camera = new Camera()
 
     line: LineSegments2
@@ -43,7 +42,6 @@ export class CameraHelper2 extends ACameraHelperWidget {
         geometry.setPositions(vertices)
         geometry.setColors(colors)
 
-        // @ts-expect-error update three-ts-types
         this.line = new LineSegments2(geometry, material)
         this.line.frustumCulled = false
         this.add(this.line)

src/three/widgets/DirectionalLightHelper2.ts

@@ -44,14 +44,12 @@ export class DirectionalLightHelper2 extends ALightHelperWidget {
             depthWrite: false,
         })
 
-        // @ts-expect-error update three-ts-types
         this.lightPlane = new Line2(geometry, this.material)
         this.add(this.lightPlane)
 
         geometry = new LineGeometry()
         geometry.setPositions([0, 0, 0, 0, 0, 1])
 
-        // @ts-expect-error update three-ts-types
         this.targetLine = new Line2(geometry, this.material)
         this.add(this.targetLine)
 
@@ -93,9 +91,7 @@ export class DirectionalLightHelper2 extends ALightHelperWidget {
             -this.size, this.size, 0,
         ])
         this.lightPlane.lookAt(this._v2)
-        // @ts-expect-error update three-ts-types
         this.lightPlane.material = this.material
-        // @ts-expect-error update three-ts-types
         this.targetLine.material = this.material
         this.material.color.set(this.color ?? this.light.color)
         this.material.linewidth = this.lineWidth * 0.001

src/three/widgets/PointLightHelper2.ts

@@ -42,7 +42,6 @@ export class PointLightHelper2 extends ALightHelperWidget {
             depthWrite: false,
         })
 
-        // @ts-expect-error update three-ts-types
         this.lightSphere = new Wireframe(geometry, this.material)
         this.lightSphere.computeLineDistances()
         this.add(this.lightSphere)

src/three/widgets/SpotLightHelper2.ts

@@ -60,7 +60,6 @@ export class SpotLightHelper2 extends ALightHelperWidget {
             depthWrite: false,
         })
 
-        // @ts-expect-error update three-ts-types
         this.cone = new LineSegments2(geometry, this.material)
         this.add(this.cone)