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;