wip

package.json

@@ -23,7 +23,7 @@
     "rollup-plugin-vue": "^6.0.0-beta.10",
     "sass": "^1.26.10",
     "vite": "^1.0.0-rc.4",
-    "vue": "^3.0.0-rc.11"
+    "vue": "^3.0.0-rc.10"
   },
   "main": "build/trois.js",
   "module": "build/trois.module.js",

src/App.vue

@@ -41,8 +41,20 @@ export default {
     li {
       display: inline-block;
       margin: 1em;
+      padding: 5px;
+      background: rgba(255, 255, 255, 0.5);
+      color: #000;
+      border-radius: 5px;;
       cursor: pointer;
+      transition: background-color 0.4s;
+      &:hover {
+        background: rgba(255, 255, 255, 1);
+      }
     }
   }
+
+  canvas {
+    display: block;
+  }
 }
 </style>

src/components/Test2.vue

@@ -1,12 +1,15 @@
 <template>
-  <Renderer ref="renderer" :shadow="true" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+  <Renderer ref="renderer" :shadow="true" mouse-move="body" :mouse-raycast="true">
-    <Camera :position="{ z: 100 }"></Camera>
+    <Camera :position="{ z: 200 }"></Camera>
 
-    <PhongMaterial id="material" color="#ff0000"></PhongMaterial>
+    <!-- Not possible to use the same material for Mesh and InstancedMesh -->
+    <PhongMaterial id="material1" color="#ffffff"></PhongMaterial>
+    <PhongMaterial id="material2" color="#ffffff"></PhongMaterial>
 
     <Scene id="scene1">
-      <PointLight ref="light" :position="{ x: 0, y: 150, z: 150 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }"></PointLight>
+      <PointLight ref="light" :intensity="0.5" :position="{ z: 200 }" :cast-shadow="true" :shadow-map-size="{ width: 2048, height: 2048 }"></PointLight>
-      <InstancedMesh ref="imesh" material="material" :count="1000" :cast-shadow="true" :receive-shadow="true">
+      <Plane ref="plane" material="material1" :receive-shadow="true"></Plane>
+      <InstancedMesh ref="imesh" material="material2" :count="500" :cast-shadow="true" :receive-shadow="true">
         <BoxGeometry :size="5"></BoxGeometry>
       </InstancedMesh>
     </Scene>
@@ -14,43 +17,71 @@
 </template>
 
 <script>
+
 import { Object3D, MathUtils } from 'three';
 
 import {
   Renderer, Camera, Scene,
   PointLight,
   PhongMaterial,
-  InstancedMesh, BoxGeometry,
+  Plane, InstancedMesh, BoxGeometry,
 } from '../index.js';
 
+import { lerp } from '../tools.js';
+
 export default {
   components: {
     Renderer, Camera, Scene,
     PointLight,
     PhongMaterial,
-    InstancedMesh, BoxGeometry,
+    Plane, InstancedMesh, BoxGeometry,
   },
   mounted() {
-    const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
+    this.renderer = this.$refs.renderer;
-    const imesh = this.$refs.imesh.mesh;
+    this.three = this.renderer.three;
-    const dummy = new Object3D();
+    this.init();
-    for (let i = 0; i < 1000; i++) {
+  },
-      dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
+  methods: {
-      dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1));
+    init() {
-      const scale = rnd(0.2, 1);
+      this.updatePlaneSize();
-      dummy.scale.set(scale, scale, scale);
+      this.renderer.onAfterResize(this.updatePlaneSize);
-      dummy.updateMatrix();
-      imesh.setMatrixAt(i, dummy.matrix);
-    }
-    imesh.instanceMatrix.needsUpdate = true;
 
-    const renderer = this.$refs.renderer;
+      // init instanced mesh matrix
-    const light = this.$refs.light.light;
+      const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
-    renderer.onBeforeRender(() => {
+      const imesh = this.$refs.imesh.mesh;
-      const t = Date.now() * 0.0001;
+      const dummy = new Object3D();
-      const c1 = Math.cos(t), c2 = c1 * Math.sin(t * 1.4), c3 = c2 * Math.cos(t * 0.3);
+      for (let i = 0; i < 500; i++) {
-      light.position.set(c1 * 100, c2 * 100, c3 * 100);
+        dummy.position.set(rndFS(200), rndFS(200), rnd(10, 50));
-    });
+        dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1));
+        // const scale = rnd(0.2, 1);
+        // dummy.scale.set(scale, scale, scale);
+        dummy.updateMatrix();
+        imesh.setMatrixAt(i, dummy.matrix);
+      }
+      imesh.instanceMatrix.needsUpdate = true;
+
+      // light move
+      const light = this.$refs.light.light;
+      this.renderer.onBeforeRender(() => {
+        const pos = this.three.mouseV3;
+        // light.position.x = pos.x;
+        // light.position.y = pos.y;
+        light.position.x = lerp(light.position.x, pos.x, 0.05);
+        light.position.y = lerp(light.position.y, pos.y, 0.05);
+      });
+
+      // const light = this.$refs.light.light;
+      // this.renderer.onBeforeRender(() => {
+      //   const t = Date.now() * 0.0001;
+      //   const c1 = Math.cos(t), c2 = c1 * Math.sin(t * 1.4);
+      //   light.position.set(c1 * 100, c2 * 100, 150);
+      // });
+    },
+    updatePlaneSize() {
+      const plane = this.$refs.plane.mesh;
+      plane.scale.x = this.three.size.wWidth;
+      plane.scale.y = this.three.size.wHeight;
+    },
   },
 };
 </script>

src/components/Test3.vue

@@ -2,7 +2,7 @@
   <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
     <Camera :position="{ z: 100 }"></Camera>
     <PhongMaterial id="material" color="#ffffff"></PhongMaterial>
-    <Scene id="scene1">
+    <Scene id="scene1" background="#ffffff">
       <!-- <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 20, z: 50 }"></SpotLight> -->
       <!-- <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -20, z: 50 }"></SpotLight> -->
       <PointLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></PointLight>
@@ -32,7 +32,7 @@ export default {
     InstancedMesh, SphereGeometry,
   },
   mounted() {
-    const renderer = this.$refs.renderer;
+    // const renderer = this.$refs.renderer;
 
     const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
     const imesh = this.$refs.imesh.mesh;