From 8a01b33031f7334604b8200a4095b1475ac78919 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Wed, 30 Sep 2020 18:10:17 +0200
Subject: [PATCH] update demos

---
 README.md                            |   4 +-
 docs/index.html                      |   2 +-
 src/App.vue                          |   5 +-
 src/components/demos/Demo1.vue       |  57 ++++++++++++--
 src/components/demos/Demo2.vue       | 111 ++++-----------------------
 src/components/demos/Demo3.vue       | 110 ++++++++++++++++++++------
 src/components/demos/Demo4.vue       |  49 ++++++++----
 src/components/examples/Example1.vue |  22 ++++++
 8 files changed, 210 insertions(+), 150 deletions(-)
 create mode 100644 src/components/examples/Example1.vue
diff --git a/README.md b/README.md
index f336374..51c2629 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects
   - [x] Cylinder
   - [x] Dodecahedron
   - [x] Icosahedron
-  - [ ] Image (wip)
+  - [x] Image
   - [x] InstancedMesh
   - [x] Lathe
   - [x] Octahedron
@@ -96,7 +96,7 @@ app.use(TroisJSVuePlugin);
 
 ## PoC
 
-I first made a simple *Proof of Concept*, take a look at [Demo1.vue](/src/components/demos/Demo1.vue) :
+I first made a simple *Proof of Concept*, take a look at [Example1.vue](/src/components/examples/Example1.vue) :
 
 ```html
 <template>
diff --git a/docs/index.html b/docs/index.html
index a9929f4..18cb8e3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -9,7 +9,7 @@
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="index.fc56ae0f.js"></script>
+  <script type="module" src="index.295ca1aa.js"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-178028522-1"></script>
   <script>
diff --git a/src/App.vue b/src/App.vue
index 59e46e9..c7d99ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,17 +11,18 @@
 import Demo1 from './components/demos/Demo1.vue';
 import Demo2 from './components/demos/Demo2.vue';
 import Demo3 from './components/demos/Demo3.vue';
+import Demo4 from './components/demos/Demo4.vue';
 import Slider1 from './components/demos/Slider1.vue';
 import DemoGLTF from './components/demos/DemoGLTF.vue';
 
 export default {
   name: 'App',
   components: {
-    Demo1, Demo2, Demo3, Slider1, DemoGLTF,
+    Demo1, Demo2, Demo3, Demo4, Slider1, DemoGLTF,
   },
   data() {
     return {
-      tests: ['Demo1', 'Demo2', 'Demo3', 'Slider1', 'DemoGLTF'],
+      tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'Slider1', 'DemoGLTF'],
       test: 'Demo1',
     };
   },
diff --git a/src/components/demos/Demo1.vue b/src/components/demos/Demo1.vue
index 23cbd98..911bd5e 100644
--- a/src/components/demos/Demo1.vue
+++ b/src/components/demos/Demo1.vue
@@ -1,21 +1,62 @@
 <template>
-  <Renderer ref="renderer">
-    <Camera :position="{ z: 10 }" />
-    <LambertMaterial id="material" />
-    <Scene>
-      <PointLight :position="{ y: 50, z: 50 }" />
-      <Box ref="box" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material-id="material" />
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+    <Camera :position="{ x: -0, y: -120, z: 30 }" />
+    <Scene background="#ffffff">
+
+      <PointLight ref="light1" color="#0E09DC" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
+      <PointLight ref="light2" color="#1CD1E1" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
+      <PointLight ref="light3" color="#18C02C" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
+      <PointLight ref="light4" color="#ee3bcf" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
+
+      <NoisyText
+        text="TroisJS"
+        font-src="helvetiker_regular.typeface.json"
+        align="center"
+        :size="10"
+        :height="2"
+        :noise-coef="0.03"
+        :z-coef="5"
+        :position="{ x: 0, y: 0, z: 30 }"
+        :rotation="{ x: Math.PI / 2, y: 0, z: 0 }"
+      />
+
+      <NoisyPlane
+        :width="200" :width-segments="100"
+        :height="200" :height-segments="100"
+        :time-coef="0.0003"
+        :noise-coef="0.03"
+        :z-coef="7"
+        :position="{ x: 0, y: 0, z: 0 }"
+      />
+
     </Scene>
   </Renderer>
 </template>
 
 <script>
+import NoisyPlane from '../noisy/NoisyPlane.js';
+import NoisyText from '../noisy/NoisyText.js';
+
 export default {
+  components: { NoisyPlane, NoisyText },
   mounted() {
     const renderer = this.$refs.renderer;
-    const box = this.$refs.box.mesh;
+    const light1 = this.$refs.light1.light;
+    const light2 = this.$refs.light2.light;
+    const light3 = this.$refs.light3.light;
+    const light4 = this.$refs.light4.light;
+
     renderer.onBeforeRender(() => {
-      box.rotation.x += 0.01;
+      const time = Date.now() * 0.001;
+      const d = 100;
+      light1.position.x = Math.sin(time * 0.1) * d;
+      light1.position.y = Math.cos(time * 0.2) * d;
+      light2.position.x = Math.cos(time * 0.3) * d;
+      light2.position.y = Math.sin(time * 0.4) * d;
+      light3.position.x = Math.sin(time * 0.5) * d;
+      light3.position.y = Math.sin(time * 0.6) * d;
+      light4.position.x = Math.sin(time * 0.7) * d;
+      light4.position.y = Math.cos(time * 0.8) * d;
     });
   },
 };
diff --git a/src/components/demos/Demo2.vue b/src/components/demos/Demo2.vue
index c14a99c..74c053c 100644
--- a/src/components/demos/Demo2.vue
+++ b/src/components/demos/Demo2.vue
@@ -1,109 +1,24 @@
 <template>
-  <Renderer ref="renderer" :auto-clear="false" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
-    <Camera :position="{ z: 200 }" />
-    <StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" />
-    <PhongMaterial id="material1" />
-    <Scene>
-      <AmbientLight color="#808080" />
-      <PointLight color="#ff6000" />
-      <PointLight ref="light" color="#0060ff" :intensity="0.5" />
-      <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
-        <BoxGeometry :width="2" :height="2" :depth="10" />
-      </InstancedMesh>
-      <Text
-        text="TroisJS"
-        font-src="helvetiker_regular.typeface.json"
-        material-id="material1"
-        align="center"
-        :size="30"
-        :height="5"
-        :position="{ x: 0, y: 0, z: 0 }"
-        :cast-shadow="true"
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+    <Camera :position="{ x: 0, y: 0, z: 100 }" />
+    <Scene background="#000000">
+      <NoisyImage
+        src="https://assets.codepen.io/33787/img2.jpg"
+        :width="800"
+        :time-coef="0.001"
+        :noise-coef="2"
+        :z-coef="5"
+        :disp-coef="0.015"
+        :rotation="{ x: -Math.PI / 6 }"
       />
     </Scene>
-    <EffectComposer>
-      <RenderPass />
-      <UnrealBloomPass :strength="1" />
-      <HalftonePass :radius="1" :scatter="0" />
-    </EffectComposer>
   </Renderer>
 </template>
 
 <script>
-import { Object3D, MathUtils, Vector3 } from 'three';
-
-const {
-  randFloat: rnd,
-  randFloatSpread: rndFS,
-} = MathUtils;
+import NoisyImage from '../noisy/NoisyImage.js';
 
 export default {
-  setup() {
-    const NUM_INSTANCES = 2000;
-    const instances = [];
-    const target = new Vector3();
-    const dummyO = new Object3D();
-    const dummyV = new Vector3();
-
-    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,
-      dummyO,
-      dummyV,
-    };
-  },
-  mounted() {
-    this.renderer = this.$refs.renderer;
-    this.imesh = this.$refs.imesh.mesh;
-    this.light = this.$refs.light.light;
-    this.init();
-  },
-  methods: {
-    init() {
-      // init instanced mesh matrix
-      for (let i = 0; i < this.NUM_INSTANCES; i++) {
-        const { position, scale, scaleZ } = this.instances[i];
-        this.dummyO.position.copy(position);
-        this.dummyO.scale.set(scale, scale, scaleZ);
-        this.dummyO.updateMatrix();
-        this.imesh.setMatrixAt(i, this.dummyO.matrix);
-      }
-      this.imesh.instanceMatrix.needsUpdate = true;
-
-      // animate
-      this.renderer.onBeforeRender(this.animate);
-    },
-    animate() {
-      this.target.copy(this.renderer.three.mouseV3);
-      this.light.position.copy(this.target);
-
-      for (let i = 0; i < this.NUM_INSTANCES; i++) {
-        const { position, scale, scaleZ, velocity, attraction, vlimit } = this.instances[i];
-
-        this.dummyV.copy(this.target).sub(position).normalize().multiplyScalar(attraction);
-        velocity.add(this.dummyV).clampScalar(-vlimit, vlimit);
-        position.add(velocity);
-
-        this.dummyO.position.copy(position);
-        this.dummyO.scale.set(scale, scale, scaleZ);
-        this.dummyO.lookAt(this.dummyV.copy(position).add(velocity));
-        this.dummyO.updateMatrix();
-        this.imesh.setMatrixAt(i, this.dummyO.matrix);
-      }
-      this.imesh.instanceMatrix.needsUpdate = true;
-    },
-  },
+  components: { NoisyImage },
 };
 </script>
diff --git a/src/components/demos/Demo3.vue b/src/components/demos/Demo3.vue
index 0316e83..c14a99c 100644
--- a/src/components/demos/Demo3.vue
+++ b/src/components/demos/Demo3.vue
@@ -1,43 +1,109 @@
 <template>
-  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
-    <Camera :position="{ z: 100 }" />
-    <PhongMaterial id="material" color="#ffffff" />
+  <Renderer ref="renderer" :auto-clear="false" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
+    <Camera :position="{ z: 200 }" />
+    <StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" />
+    <PhongMaterial id="material1" />
     <Scene>
-      <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
-      <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
-      <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
-        <SphereGeometry :radius="5" />
+      <AmbientLight color="#808080" />
+      <PointLight color="#ff6000" />
+      <PointLight ref="light" color="#0060ff" :intensity="0.5" />
+      <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
+        <BoxGeometry :width="2" :height="2" :depth="10" />
       </InstancedMesh>
+      <Text
+        text="TroisJS"
+        font-src="helvetiker_regular.typeface.json"
+        material-id="material1"
+        align="center"
+        :size="30"
+        :height="5"
+        :position="{ x: 0, y: 0, z: 0 }"
+        :cast-shadow="true"
+      />
     </Scene>
     <EffectComposer>
       <RenderPass />
-      <UnrealBloomPass :strength="2" />
+      <UnrealBloomPass :strength="1" />
+      <HalftonePass :radius="1" :scatter="0" />
     </EffectComposer>
   </Renderer>
 </template>
 
 <script>
-import { Object3D, MathUtils } from 'three';
+import { Object3D, MathUtils, Vector3 } from 'three';
+
+const {
+  randFloat: rnd,
+  randFloatSpread: rndFS,
+} = MathUtils;
 
 export default {
   setup() {
+    const NUM_INSTANCES = 2000;
+    const instances = [];
+    const target = new Vector3();
+    const dummyO = new Object3D();
+    const dummyV = new Vector3();
+
+    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: 2000,
+      NUM_INSTANCES,
+      instances,
+      target,
+      dummyO,
+      dummyV,
     };
   },
   mounted() {
-    // init instanced mesh matrix
-    const imesh = this.$refs.imesh.mesh;
-    const dummy = new Object3D();
-    const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
-    for (let i = 0; i < this.NUM_INSTANCES; i++) {
-      dummy.position.set(rndFS(200), rndFS(200), rndFS(200));
-      const scale = rnd(0.2, 1);
-      dummy.scale.set(scale, scale, scale);
-      dummy.updateMatrix();
-      imesh.setMatrixAt(i, dummy.matrix);
-    }
-    imesh.instanceMatrix.needsUpdate = true;
+    this.renderer = this.$refs.renderer;
+    this.imesh = this.$refs.imesh.mesh;
+    this.light = this.$refs.light.light;
+    this.init();
+  },
+  methods: {
+    init() {
+      // init instanced mesh matrix
+      for (let i = 0; i < this.NUM_INSTANCES; i++) {
+        const { position, scale, scaleZ } = this.instances[i];
+        this.dummyO.position.copy(position);
+        this.dummyO.scale.set(scale, scale, scaleZ);
+        this.dummyO.updateMatrix();
+        this.imesh.setMatrixAt(i, this.dummyO.matrix);
+      }
+      this.imesh.instanceMatrix.needsUpdate = true;
+
+      // animate
+      this.renderer.onBeforeRender(this.animate);
+    },
+    animate() {
+      this.target.copy(this.renderer.three.mouseV3);
+      this.light.position.copy(this.target);
+
+      for (let i = 0; i < this.NUM_INSTANCES; i++) {
+        const { position, scale, scaleZ, velocity, attraction, vlimit } = this.instances[i];
+
+        this.dummyV.copy(this.target).sub(position).normalize().multiplyScalar(attraction);
+        velocity.add(this.dummyV).clampScalar(-vlimit, vlimit);
+        position.add(velocity);
+
+        this.dummyO.position.copy(position);
+        this.dummyO.scale.set(scale, scale, scaleZ);
+        this.dummyO.lookAt(this.dummyV.copy(position).add(velocity));
+        this.dummyO.updateMatrix();
+        this.imesh.setMatrixAt(i, this.dummyO.matrix);
+      }
+      this.imesh.instanceMatrix.needsUpdate = true;
+    },
   },
 };
 </script>
diff --git a/src/components/demos/Demo4.vue b/src/components/demos/Demo4.vue
index 7988c9b..0316e83 100644
--- a/src/components/demos/Demo4.vue
+++ b/src/components/demos/Demo4.vue
@@ -1,28 +1,43 @@
 <template>
-  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
-    <Camera :position="{ z: 250 }" />
-    <BasicMaterial id="material" />
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
+    <Camera :position="{ z: 100 }" />
+    <PhongMaterial id="material" color="#ffffff" />
     <Scene>
-      <Text
-        ref="text"
-        text="TroisJS"
-        font-src="helvetiker_regular.typeface.json"
-        material-id="material"
-        align="center"
-        @ready="anim"
-      ></Text>
+      <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
+      <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
+      <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
+        <SphereGeometry :radius="5" />
+      </InstancedMesh>
     </Scene>
+    <EffectComposer>
+      <RenderPass />
+      <UnrealBloomPass :strength="2" />
+    </EffectComposer>
   </Renderer>
 </template>
 
 <script>
+import { Object3D, MathUtils } from 'three';
+
 export default {
-  methods: {
-    anim() {
-      this.$refs.renderer.onBeforeRender(() => {
-        this.$refs.text.mesh.rotation.x += 0.01;
-      });
-    },
+  setup() {
+    return {
+      NUM_INSTANCES: 2000,
+    };
+  },
+  mounted() {
+    // init instanced mesh matrix
+    const imesh = this.$refs.imesh.mesh;
+    const dummy = new Object3D();
+    const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
+    for (let i = 0; i < this.NUM_INSTANCES; i++) {
+      dummy.position.set(rndFS(200), rndFS(200), rndFS(200));
+      const scale = rnd(0.2, 1);
+      dummy.scale.set(scale, scale, scale);
+      dummy.updateMatrix();
+      imesh.setMatrixAt(i, dummy.matrix);
+    }
+    imesh.instanceMatrix.needsUpdate = true;
   },
 };
 </script>
diff --git a/src/components/examples/Example1.vue b/src/components/examples/Example1.vue
new file mode 100644
index 0000000..23cbd98
--- /dev/null
+++ b/src/components/examples/Example1.vue
@@ -0,0 +1,22 @@
+<template>
+  <Renderer ref="renderer">
+    <Camera :position="{ z: 10 }" />
+    <LambertMaterial id="material" />
+    <Scene>
+      <PointLight :position="{ y: 50, z: 50 }" />
+      <Box ref="box" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material-id="material" />
+    </Scene>
+  </Renderer>
+</template>
+
+<script>
+export default {
+  mounted() {
+    const renderer = this.$refs.renderer;
+    const box = this.$refs.box.mesh;
+    renderer.onBeforeRender(() => {
+      box.rotation.x += 0.01;
+    });
+  },
+};
+</script>
