From 440a854417cc43c8cf08c7baaa53c9ff0521c5d6 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Sat, 3 Oct 2020 11:15:52 +0200
Subject: [PATCH] wip

---
 src/meshes/Box.js           |  2 +-
 src/meshes/InstancedMesh.js | 39 ++++++++++++++++++++++---------------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/meshes/Box.js b/src/meshes/Box.js
index afb1e25..dbd77a1 100644
--- a/src/meshes/Box.js
+++ b/src/meshes/Box.js
@@ -5,7 +5,7 @@ import Mesh from './Mesh.js';
 export default {
   extends: Mesh,
   props: {
-    size: { type: Number },
+    size: Number,
     width: { type: Number, default: 1 },
     height: { type: Number, default: 1 },
     depth: { type: Number, default: 1 },
diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js
index e773d73..d5f0497 100644
--- a/src/meshes/InstancedMesh.js
+++ b/src/meshes/InstancedMesh.js
@@ -22,27 +22,34 @@ export default {
     }
   },
   mounted() {
-    this.mesh = new InstancedMesh(this.geometry, this.three.materials[this.materialId], this.count);
-
-    useBindProp(this, 'position', this.mesh.position);
-    useBindProp(this, 'rotation', this.mesh.rotation);
-    useBindProp(this, 'scale', this.mesh.scale);
-
-    ['castShadow', 'receiveShadow'].forEach(p => {
-      this.mesh[p] = this[p];
-      watch(() => this[p], () => { this.mesh[p] = this[p]; });
-    });
-
-    // watch(() => this.materialId, () => {
-    //   this.mesh.material = this.three.materials[this.materialId];
-    // });
-
-    this.scene.add(this.mesh);
+    this.initMesh();
   },
   unmounted() {
     this.scene.remove(this.mesh);
   },
   methods: {
+    initMesh() {
+      if (!this.material && this.materialId) {
+        this.material = this.three.materials[this.materialId];
+      }
+
+      this.mesh = new InstancedMesh(this.geometry, this.material, this.count);
+
+      useBindProp(this, 'position', this.mesh.position);
+      useBindProp(this, 'rotation', this.mesh.rotation);
+      useBindProp(this, 'scale', this.mesh.scale);
+
+      ['castShadow', 'receiveShadow'].forEach(p => {
+        this.mesh[p] = this[p];
+        watch(() => this[p], () => { this.mesh[p] = this[p]; });
+      });
+
+      // watch(() => this.materialId, () => {
+      //   this.mesh.material = this.three.materials[this.materialId];
+      // });
+
+      this.scene.add(this.mesh);
+    },
     setGeometry(geometry) {
       this.geometry = geometry;
       if (this.mesh) this.mesh.geometry = geometry;