update examples

src/components/Test1.vue

@@ -1,7 +1,7 @@
 <template>
   <Renderer ref="renderer">
     <Camera :position="{ z: 100 }"></Camera>
-    <LambertMaterial id="material" color="#0000ff"></LambertMaterial>
+    <LambertMaterial id="material"></LambertMaterial>
     <Scene>
       <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
       <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
@@ -12,17 +12,17 @@
 <script>
 import {
   Renderer, Camera, Scene,
+  LambertMaterial,
   PointLight,
   Box,
-  LambertMaterial,
 } from '../index.js';
 
 export default {
   components: {
     Renderer, Camera, Scene,
+    LambertMaterial,
     PointLight,
     Box,
-    LambertMaterial,
   },
   mounted() {
     const renderer = this.$refs.renderer;

src/components/Test2.vue

@@ -1,86 +1,100 @@
 <template>
-  <Renderer ref="renderer" :shadow="true" mouse-move="body" :mouse-raycast="true">
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
     <Camera :position="{ z: 200 }"></Camera>
-
+    <StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5"></StandardMaterial>
-    <!-- Not possible to use the same material for Mesh and InstancedMesh -->
+    <Scene id="scene1" background="#000000">
-    <PhongMaterial id="material1" color="#ffffff"></PhongMaterial>
+      <AmbientLight color="#808080"></AmbientLight>
-    <PhongMaterial id="material2" color="#ffffff"></PhongMaterial>
+      <PointLight ref="light" color="#ff6000"></PointLight>
-
+      <PointLight ref="light" color="#0060ff" :intensity="0.5" :position="{ z: 200 }"></PointLight>
-    <Scene id="scene1">
+      <InstancedMesh ref="imesh" material="material" :count="NUM_INSTANCES">
-      <PointLight ref="light" :intensity="0.5" :position="{ z: 200 }" :cast-shadow="true" :shadow-map-size="{ width: 2048, height: 2048 }"></PointLight>
+        <BoxGeometry :width="2" :height="2" :depth="10"></BoxGeometry>
-      <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>
   </Renderer>
 </template>
 
 <script>
-
+import { Object3D, MathUtils, Vector3 } from 'three';
-import { Object3D, MathUtils } from 'three';
 
 import {
-  Renderer, Camera, Scene,
+  Renderer, Camera, Scene, AmbientLight, PointLight,
-  PointLight,
+  StandardMaterial, InstancedMesh, BoxGeometry,
-  PhongMaterial,
-  Plane, InstancedMesh, BoxGeometry,
 } from '../index.js';
 
-import { lerp } from '../tools.js';
+const {
+  randFloat: rnd,
+  randFloatSpread: rndFS,
+} = MathUtils;
 
 export default {
   components: {
-    Renderer, Camera, Scene,
+    Renderer, Camera, Scene, AmbientLight, PointLight,
-    PointLight,
+    StandardMaterial, InstancedMesh, BoxGeometry,
-    PhongMaterial,
+  },
-    Plane, InstancedMesh, BoxGeometry,
+  setup() {
+    const NUM_INSTANCES = 2500;
+    const instances = [];
+    const target = new Vector3();
+    const dummy = new Object3D();
+
+    for (let i = 0; i < NUM_INSTANCES; i++) {
+      instances.push({
+        position: new Vector3(rndFS(200), rndFS(200), rndFS(200)),
+        scale: rnd(0.2, 1),
+        scaleZ: rnd(0.1, 1),
+        velocity: new Vector3(rndFS(2), rndFS(2), rndFS(2)),
+        attraction: 0.03 + rnd(-0.01, 0.01),
+        vlimit: 1.2 + rnd(-0.1, 0.1),
+      });
+    }
+
+    return {
+      NUM_INSTANCES,
+      instances,
+      target,
+      dummy,
+    };
   },
   mounted() {
     this.renderer = this.$refs.renderer;
-    this.three = this.renderer.three;
+    this.imesh = this.$refs.imesh.mesh;
+    this.light = this.$refs.light.light;
     this.init();
   },
   methods: {
     init() {
-      this.updatePlaneSize();
-      this.renderer.onAfterResize(this.updatePlaneSize);
-
       // init instanced mesh matrix
-      const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
+      for (let i = 0; i < this.NUM_INSTANCES; i++) {
-      const imesh = this.$refs.imesh.mesh;
+        const { position, scale } = this.instances[i];
-      const dummy = new Object3D();
+        this.dummy.position.copy(position);
-      for (let i = 0; i < 500; i++) {
+        this.dummy.scale.set(scale, scale, scale);
-        dummy.position.set(rndFS(200), rndFS(200), rnd(10, 50));
+        this.dummy.updateMatrix();
-        dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1));
+        this.imesh.setMatrixAt(i, this.dummy.matrix);
-        // const scale = rnd(0.2, 1);
-        // dummy.scale.set(scale, scale, scale);
-        dummy.updateMatrix();
-        imesh.setMatrixAt(i, dummy.matrix);
       }
-      imesh.instanceMatrix.needsUpdate = true;
+      this.imesh.instanceMatrix.needsUpdate = true;
 
-      // light move
+      // animate
-      const light = this.$refs.light.light;
+      this.renderer.onBeforeRender(this.animate);
-      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() {
+    animate() {
-      const plane = this.$refs.plane.mesh;
+      this.target.copy(this.renderer.three.mouseV3);
-      plane.scale.x = this.three.size.wWidth;
+      this.light.position.copy(this.target);
-      plane.scale.y = this.three.size.wHeight;
+
+      const v = new Vector3();
+      for (let i = 0; i < this.NUM_INSTANCES; i++) {
+        const { position, scale, scaleZ, velocity, attraction, vlimit } = this.instances[i];
+
+        v.copy(this.target).sub(position).normalize().multiplyScalar(attraction);
+        velocity.add(v).clampScalar(-vlimit, vlimit);
+        position.add(velocity);
+
+        this.dummy.position.copy(position);
+        this.dummy.scale.set(scale, scale, scaleZ);
+        this.dummy.lookAt(v.copy(position).add(velocity));
+        this.dummy.updateMatrix();
+        this.imesh.setMatrixAt(i, this.dummy.matrix);
+      }
+      this.imesh.instanceMatrix.needsUpdate = true;
     },
   },
 };

src/components/Test3.vue

@@ -3,8 +3,8 @@
     <Camera :position="{ z: 100 }"></Camera>
     <PhongMaterial id="material" color="#ffffff"></PhongMaterial>
     <Scene id="scene1" background="#ffffff">
-      <!-- <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 20, z: 50 }"></SpotLight> -->
+      <!-- <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></SpotLight> -->
-      <!-- <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -20, z: 50 }"></SpotLight> -->
+      <!-- <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></SpotLight> -->
       <PointLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></PointLight>
       <PointLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></PointLight>
       <InstancedMesh ref="imesh" material="material" :count="1000">
@@ -32,11 +32,10 @@ export default {
     InstancedMesh, SphereGeometry,
   },
   mounted() {
-    // const renderer = this.$refs.renderer;
+    // init instanced mesh matrix
-
-    const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
     const imesh = this.$refs.imesh.mesh;
     const dummy = new Object3D();
+    const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
     for (let i = 0; i < 1000; i++) {
       dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
       const scale = rnd(0.2, 1);
@@ -45,9 +44,6 @@ export default {
       imesh.setMatrixAt(i, dummy.matrix);
     }
     imesh.instanceMatrix.needsUpdate = true;
-
-    // renderer.onBeforeRender(() => {
-    // });
   },
 };
 </script>