add 'props'

src/core/Object3D.ts

@@ -1,6 +1,6 @@
 import { Object3D, Scene } from 'three'
 import { ComponentPublicInstance, defineComponent, PropType, watch } from 'vue'
-import { bindProp } from '../tools'
+import { bindOptions, bindProp } from '../tools'
 import { RendererInjectionKey, RendererInterface } from './Renderer'
 import { SceneInjectionKey } from './Scene'
 
@@ -54,7 +54,9 @@ export default defineComponent({
     lookAt: { type: Object as PropType<Vector3PropInterface>, default: null },
     userData: { type: Object, default: () => ({}) },
     visible: { type: Boolean, default: true },
-    autoRemove: { type: Boolean, default: true },
+    props: { type: Object, default: () => ({}) },
+    disableAdd: { type: Boolean, default: false },
+    disableRemove: { type: Boolean, default: false },
   },
   setup(): Object3DSetupInterface {
     // return object3DSetup()
@@ -69,26 +71,30 @@ export default defineComponent({
     }
   },
   unmounted() {
-    if (this.autoRemove) this.removeFromParent()
+    if (!this.disableRemove) this.removeFromParent()
   },
   methods: {
     initObject3D(o3d: Object3D) {
       this.o3d = o3d
 
-      this.$emit('created', o3d)
-
       bindProp(this, 'position', o3d)
       bindProp(this, 'rotation', o3d)
       bindProp(this, 'scale', o3d)
       bindProp(this, 'userData', o3d.userData)
       bindProp(this, 'visible', o3d)
 
+      bindOptions(o3d, this.props)
+
+      this.$emit('created', o3d)
+
       if (this.lookAt) o3d.lookAt(this.lookAt.x ?? 0, this.lookAt.y, this.lookAt.z)
       watch(() => this.lookAt, (v) => { o3d.lookAt(v.x ?? 0, v.y, v.z) }, { deep: true })
 
       this.parent = this.getParent()
-      if (this.addToParent()) this.$emit('ready', this)
-      else console.error('Missing parent (Scene, Group...)')
+      if (!this.disableAdd) {
+        if (this.addToParent()) this.$emit('ready', this)
+        else console.error('Missing parent (Scene, Group...)')
+      }
     },
     getParent(): undefined | ComponentPublicInstance {
       let parent = this.$parent

src/core/Renderer.ts

@@ -2,7 +2,7 @@
 import { Camera, NoToneMapping, PCFShadowMap, Scene, WebGLRenderer } from 'three'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
 import { ComponentPublicInstance, defineComponent, InjectionKey, PropType } from 'vue'
-import { bindProp } from '../tools'
+import { bindOptions } from '../tools'
 import { PointerPublicConfigInterface } from './usePointer'
 import useThree, { SizeInterface, ThreeConfigInterface, ThreeInterface } from './useThree'
 
@@ -107,11 +107,10 @@ export default defineComponent({
     pointer: { type: [Boolean, Object] as PropType<boolean | PointerPublicConfigInterface>, default: false },
     resize: { type: [Boolean, String] as PropType<boolean | string>, default: false },
     shadow: Boolean,
-    shadowType: { type: Number, default: PCFShadowMap },
-    toneMapping: { type: Number, default: NoToneMapping },
     width: String,
     height: String,
     xr: Boolean,
+    props: { type: Object, default: () => ({}) },
     onReady: Function as PropType<(r: RendererInterface) => void>,
     onClick: Function as PropType<(this: HTMLCanvasElement, ev: MouseEvent) => any>,
   },
@@ -137,7 +136,7 @@ export default defineComponent({
     if (props.height) config.height = parseInt(props.height)
 
     const three = useThree(config)
-    bindProp(props, 'toneMapping', three.renderer)
+    bindOptions(three.renderer, props.props)
 
     const renderFn: {(): void} = () => {}
 

src/materials/Material.ts

@@ -1,6 +1,7 @@
 import { ComponentPublicInstance, defineComponent, InjectionKey, PropType, watch } from 'vue'
 import { FrontSide, Material, NormalBlending, Texture } from 'three'
 import { MeshInjectionKey, MeshInterface } from '../meshes/Mesh'
+import { bindOptions } from '../tools'
 
 export interface MaterialSetupInterface {
   mesh?: MeshInterface
@@ -33,6 +34,7 @@ export default defineComponent({
     side: { type: Number, default: FrontSide },
     transparent: Boolean,
     vertexColors: Boolean,
+    props: { type: Object, default: () => ({}) },
   },
   setup(): MaterialSetupInterface {
     return {}
@@ -50,6 +52,7 @@ export default defineComponent({
 
     if (this.createMaterial) {
       this.material = this.createMaterial()
+      bindOptions(this.material, this.props)
       this.mesh.setMaterial(this.material)
       this.addWatchers()
     }

src/tools.ts

@@ -1,5 +1,18 @@
 import { toRef, watch } from 'vue'
 
+export function applyOptions(dst: any, options: Record<string, unknown>): void {
+  if (options instanceof Object) {
+    Object.entries(options).forEach(([key, value]) => {
+      dst[key] = value
+    })
+  }
+}
+
+export function bindOptions(dst: any, options: Record<string, unknown>): void {
+  applyOptions(dst, options)
+  watch(() => options, (value) => { applyOptions(dst, value) }, { deep: true })
+}
+
 export function setFromProp(o: Record<string, unknown>, prop: Record<string, unknown>): void {
   if (prop instanceof Object) {
     Object.entries(prop).forEach(([key, value]) => {