wip

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); },

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);
     },
   },

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) {

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);