diff --git a/src/core/Object3D.ts b/src/core/Object3D.ts index b046b42..0863c8f 100644 --- a/src/core/Object3D.ts +++ b/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, 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 diff --git a/src/core/Renderer.ts b/src/core/Renderer.ts index 452be16..e4f38df 100644 --- a/src/core/Renderer.ts +++ b/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, default: false }, resize: { type: [Boolean, String] as PropType, 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} = () => {} diff --git a/src/materials/Material.ts b/src/materials/Material.ts index ecbe438..e01847a 100644 --- a/src/materials/Material.ts +++ b/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() } diff --git a/src/tools.ts b/src/tools.ts index 8792ec5..d8f1d72 100644 --- a/src/tools.ts +++ b/src/tools.ts @@ -1,5 +1,18 @@ import { toRef, watch } from 'vue' +export function applyOptions(dst: any, options: Record): void { + if (options instanceof Object) { + Object.entries(options).forEach(([key, value]) => { + dst[key] = value + }) + } +} + +export function bindOptions(dst: any, options: Record): void { + applyOptions(dst, options) + watch(() => options, (value) => { applyOptions(dst, value) }, { deep: true }) +} + export function setFromProp(o: Record, prop: Record): void { if (prop instanceof Object) { Object.entries(prop).forEach(([key, value]) => {