diff --git a/src/core/Object3D.js b/src/core/Object3D.js index b5cc213..05b3140 100644 --- a/src/core/Object3D.js +++ b/src/core/Object3D.js @@ -1,4 +1,3 @@ -import { watch } from 'vue'; import { bindProp } from '../tools.js'; export default { @@ -7,8 +6,6 @@ export default { position: Object, rotation: Object, scale: Object, - castShadow: Boolean, - receiveShadow: Boolean, loading: Boolean, }, // can't use setup because it will not be used in sub components @@ -25,11 +22,6 @@ export default { bindProp(this, 'rotation', this.o3d.rotation); bindProp(this, 'scale', this.o3d.scale); - ['castShadow', 'receiveShadow'].forEach(p => { - this.o3d[p] = this[p]; - watch(() => this[p], () => { this.o3d[p] = this[p]; }); - }); - if (this.$parent.add) this.$parent.add(this.o3d); }, add(o) { this.o3d.add(o); }, diff --git a/src/lights/Light.js b/src/lights/Light.js index 7d86dd7..f8faed5 100644 --- a/src/lights/Light.js +++ b/src/lights/Light.js @@ -1,25 +1,23 @@ import { Color } from 'three'; import { watch } from 'vue'; +import Object3D from '../core/Object3D.js'; import { bindProp, setFromProp } from '../tools.js'; export default { + extends: Object3D, props: { color: { type: String, default: '#ffffff' }, intensity: { type: Number, default: 1 }, castShadow: { type: Boolean, default: false }, shadowMapSize: { type: Object, default: { x: 512, y: 512 } }, - position: Object, }, // can't use setup because it will not be used in sub components // setup() {}, unmounted() { - this.$parent.remove(this.light); if (this.light.target) this.$parent.remove(this.light.target); }, methods: { initLight() { - bindProp(this, 'position', this.light.position); - if (this.light.target) { bindProp(this, 'target', this.light.target.position); } @@ -39,7 +37,7 @@ export default { }); }); - this.$parent.add(this.light); + this.initObject3D(this.light); if (this.light.target) this.$parent.add(this.light.target); }, }, diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js index a75de03..1e802de 100644 --- a/src/meshes/InstancedMesh.js +++ b/src/meshes/InstancedMesh.js @@ -1,9 +1,12 @@ +import { watch } from 'vue'; import { InstancedMesh } from 'three'; import Object3D from '../core/Object3D.js'; export default { extends: Object3D, props: { + castShadow: Boolean, + receiveShadow: Boolean, count: Number, }, provide() { @@ -22,6 +25,12 @@ export default { methods: { initMesh() { this.mesh = new InstancedMesh(this.geometry, this.material, this.count); + + ['castShadow', 'receiveShadow'].forEach(p => { + this.mesh[p] = this[p]; + watch(() => this[p], () => { this.mesh[p] = this[p]; }); + }); + this.initObject3D(this.mesh); }, setGeometry(geometry) { diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js index 4833622..e609387 100644 --- a/src/meshes/Mesh.js +++ b/src/meshes/Mesh.js @@ -1,9 +1,12 @@ +import { watch } from 'vue'; import { Mesh } from 'three'; import Object3D from '../core/Object3D.js'; export default { extends: Object3D, props: { + castShadow: Boolean, + receiveShadow: Boolean, onHover: Function, onClick: Function, }, @@ -21,6 +24,11 @@ export default { initMesh() { this.mesh = new Mesh(this.geometry, this.material); + ['castShadow', 'receiveShadow'].forEach(p => { + this.mesh[p] = this[p]; + watch(() => this[p], () => { this.mesh[p] = this[p]; }); + }); + if (this.onHover) { this.mesh.onHover = (over) => { this.onHover({ component: this, over }); }; this.three.addIntersectObject(this.mesh);