InstancedMesh test

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

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 [];
+  },
+};

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

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

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