Add options to remove and assign new materials in object UI config.

.idea/threepipe.iml

@@ -22,6 +22,7 @@
       <excludeFolder url="file://$MODULE_DIR$/plugins/plugin-template-vite" />
       <excludeFolder url="file://$MODULE_DIR$/plugins/svg-renderer/docs" />
       <excludeFolder url="file://$MODULE_DIR$/plugins/tweakpane-editor/docs" />
+      <excludeFolder url="file://$MODULE_DIR$/website/.vitepress/dist" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "threepipe",
-  "version": "0.0.38-dev",
+  "version": "0.0.38",
   "description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/assetmanager/MaterialManager.ts

@@ -118,10 +118,16 @@ export class MaterialManager<T = ''> extends EventDispatcher<BaseEvent, T> {
         const mat = e.target
         if (!mat || mat.assetType !== 'material') return
         mat.setDirty()
-        this._getMapsForMaterial(mat)
-            .forEach(map=>
-                !map.isRenderTargetTexture && map.userData.disposeOnIdle !== false &&
-                map.dispose && !isInScene(map) && map.dispose())
+        for (const map of this._getMapsForMaterial(mat)) {
+            const dispose = !map.isRenderTargetTexture
+                && map.userData.disposeOnIdle !== false
+                && !isInScene(map) // todo <- is this always required? this will be very slow if doing for every map of every material dispose on scene clear
+
+            if (dispose && typeof map.dispose === 'function') {
+                // console.log('disposing texture', map)
+                map.dispose()
+            }
+        }
         // this.unregisterMaterial(mat) // not unregistering on dispose, that has to be done explicitly. todo: make an easy way to do that.
     }
 

src/core/IObject.ts

@@ -172,6 +172,7 @@ export interface IObject3D<E extends Event = IObject3DEvent, ET = IObject3DEvent
     material?: IMaterial | IMaterial[]
     /**
      * Same as material but always returns an array.
+     * To set, just set `material` property
      */
     readonly materials?: IMaterial[]
     // eslint-disable-next-line @typescript-eslint/naming-convention

src/core/object/IObjectUi.ts

@@ -3,6 +3,13 @@ import {IUiConfigContainer, UiObjectConfig} from 'uiconfig.js'
 import {ICamera} from '../ICamera'
 import {Vector3} from 'three'
 import {ThreeViewer} from '../../viewer'
+import {UnlitMaterial} from '../material/UnlitMaterial'
+import {PhysicalMaterial} from '../material/PhysicalMaterial'
+
+// todo move somewhere?
+const defaultMaterial = new UnlitMaterial()
+defaultMaterial.name = 'Default Unlit Material'
+defaultMaterial.uiConfig = undefined as any
 
 export function makeICameraCommonUiConfig(this: ICamera, config: UiObjectConfig): UiObjectConfig[] {
     return [
@@ -225,6 +232,36 @@ export function makeIObject3DUiConfig(this: IObject3D, isMesh?:boolean): UiObjec
                 type: 'folder',
                 children: (this.material as IUiConfigContainer[]).map((a)=>a?.uiConfig).filter(a=>a),
             } : (this.material as IUiConfigContainer)?.uiConfig,
+            {
+                label: 'Remove Material(s)',
+                type: 'button',
+                hidden: ()=>!this.materials?.length || this.materials.length === 1 && this.materials[0] === defaultMaterial,
+                value: ()=>{
+                    const mat = this.materials
+                    this.material = [defaultMaterial]
+                    return ()=> this.material = mat
+                },
+            },
+            {
+                label: 'New Physical Material',
+                type: 'button',
+                hidden: ()=>!(!this.materials?.length || this.materials.length === 1 && this.materials[0] === defaultMaterial),
+                value: ()=>{
+                    const mat = this.materials
+                    this.material = [new PhysicalMaterial()]
+                    return ()=> this.material = mat
+                },
+            },
+            {
+                label: 'New Unlit Material',
+                type: 'button',
+                hidden: ()=>!(!this.materials?.length || this.materials.length === 1 && this.materials[0] === defaultMaterial),
+                value: ()=>{
+                    const mat = this.materials
+                    this.material = [new UnlitMaterial()]
+                    return ()=> this.material = mat
+                },
+            },
         ]
         ;(config.children as UiObjectConfig[]).push(...ui)
     }