From 7b147453afd9d56848838ecb787c3f0a6bf627cb Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Tue, 15 Sep 2020 00:07:46 +0200
Subject: [PATCH] InstancedMesh test

---
 src/components/Test.vue     | 29 ++++++++++++++++++++++++-----
 src/geometries/index.js     | 37 +++++++++++++++++++++++++++++++++++++
 src/index.js                |  1 +
 src/meshes/InstancedMesh.js | 32 ++++++++++++++++++++++++++++++++
 src/meshes/index.js         |  2 ++
 5 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 src/geometries/index.js
 create mode 100644 src/meshes/InstancedMesh.js

diff --git a/src/components/Test.vue b/src/components/Test.vue
index c5266c7..f1a38fd 100644
--- a/src/components/Test.vue
+++ b/src/components/Test.vue
@@ -1,5 +1,5 @@
 <template>
-  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+  <Renderer ref="renderer"> <!-- :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"> -->
     <PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
 
     <PhongMaterial id="material1" color="#ff0000"></PhongMaterial>
@@ -7,18 +7,24 @@
 
     <Scene id="scene1">
       <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
-      <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4 }" material="material1"></Box>
-      <Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="material2"></Sphere>
+      <!-- <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4 }" material="material1"></Box>
+      <Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="material2"></Sphere> -->
+      <InstancedMesh ref="iMesh" material="material2" :count="1000">
+        <BoxGeometry :size="2"></BoxGeometry>
+      </InstancedMesh>
     </Scene>
   </Renderer>
 </template>
 
 <script>
+import { Object3D, MathUtils } from 'three';
+
 import {
   Renderer, PerspectiveCamera, Scene,
   PointLight,
   Box, Sphere,
   LambertMaterial, PhongMaterial,
+  InstancedMesh, BoxGeometry,
 } from '../index.js';
 
 export default {
@@ -27,13 +33,26 @@ export default {
     PointLight,
     Box, Sphere,
     LambertMaterial, PhongMaterial,
+    InstancedMesh, BoxGeometry,
   },
   mounted() {
     const renderer = this.$refs.renderer;
-    const box = this.$refs.box.mesh;
+    // const box = this.$refs.box.mesh;
+
+    const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
+    const iMesh = this.$refs.iMesh.mesh;
+    const dummy = new Object3D();
+    for (let i = 0; i < 1000; i++) {
+      dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
+      dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1));
+      // dummy.scale.set(rnd(0.1, 1), rnd(0.1, 1), rnd(0.1, 1));
+      dummy.updateMatrix();
+      iMesh.setMatrixAt(i, dummy.matrix);
+    }
+    iMesh.instanceMatrix.needsUpdate = true;
 
     renderer.onBeforeRender(() => {
-      box.rotation.x += 0.01;
+      // box.rotation.x += 0.01;
     });
   },
 };
diff --git a/src/geometries/index.js b/src/geometries/index.js
new file mode 100644
index 0000000..4e9dc5a
--- /dev/null
+++ b/src/geometries/index.js
@@ -0,0 +1,37 @@
+import { BoxBufferGeometry } from 'three';
+
+export const BoxGeometry = {
+  inject: ['parent'],
+  props: {
+    size: {
+      type: Number,
+    },
+    width: {
+      type: Number,
+      default: 1,
+    },
+    height: {
+      type: Number,
+      default: 1,
+    },
+    depth: {
+      type: Number,
+      default: 1,
+    },
+  },
+  mounted() {
+    if (!this.parent) {
+      console.error('Missing parent Mesh');
+      return;
+    }
+
+    if (this.size) {
+      this.parent.geometry = new BoxBufferGeometry(this.size, this.size, this.size);
+    } else {
+      this.parent.geometry = new BoxBufferGeometry(this.width, this.height, this.depth);
+    }
+  },
+  render() {
+    return [];
+  },
+};
diff --git a/src/index.js b/src/index.js
index 7aa724f..16e7623 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 export * from './core/index.js';
+export * from './geometries/index.js';
 export * from './lights/index.js';
 export * from './materials/index.js';
 export * from './meshes/index.js';
diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js
new file mode 100644
index 0000000..6405883
--- /dev/null
+++ b/src/meshes/InstancedMesh.js
@@ -0,0 +1,32 @@
+import { InstancedMesh } from 'three';
+
+export default {
+  inject: ['three', 'scene'],
+  props: {
+    material: String,
+    count: Number,
+  },
+  setup() {
+    return {
+      conf: {},
+    };
+  },
+  provide() {
+    return {
+      parent: this.conf,
+    };
+  },
+  beforeMount() {
+    console.log(this.conf);
+    if (!this.$slots.default) {
+      console.error('Missing Geometry');
+    }
+  },
+  mounted() {
+    this.mesh = new InstancedMesh(this.conf.geometry, this.three.materials[this.material], this.count);
+    this.scene.add(this.mesh);
+  },
+  render() {
+    return this.$slots.default();
+  },
+};
diff --git a/src/meshes/index.js b/src/meshes/index.js
index ff7879e..12818c7 100644
--- a/src/meshes/index.js
+++ b/src/meshes/index.js
@@ -1,2 +1,4 @@
 export { default as Box } from './Box.js';
 export { default as Sphere } from './Sphere.js';
+
+export { default as InstancedMesh } from './InstancedMesh.js';