From 355576b8ae6778c2e5e82df35d8f14ff4345a313 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Tue, 15 Sep 2020 11:30:30 +0200
Subject: [PATCH] wip

---
 README.md                        |  2 +-
 src/App.vue                      |  5 +--
 src/components/Test2.vue         |  9 ++---
 src/components/Test3.vue         | 57 ++++++++++++++++++++++++++++++++
 src/geometries/Geometry.js       |  2 +-
 src/geometries/SphereGeometry.js |  3 +-
 src/lights/AmbientLight.js       |  9 +++++
 src/lights/Light.js              | 16 +++------
 src/lights/PointLight.js         | 10 ++++++
 src/lights/SpotLight.js          | 27 +++++++++++++++
 src/lights/index.js              |  2 ++
 src/meshes/InstancedMesh.js      |  1 -
 12 files changed, 121 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Test3.vue
 create mode 100644 src/lights/AmbientLight.js
 create mode 100644 src/lights/SpotLight.js

diff --git a/README.md b/README.md
index 7bf1497..e113009 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ I wanted to try to write a lib similar to [react-three-fiber](https://github.com
 
 ## PoC
 
-I first made a simple *Proof of Concept*, take a look at [Test.vue](/src/components/Test.vue) :
+I first made a simple *Proof of Concept*, take a look at [Test1.vue](/src/components/Test1.vue) :
 
 ```html
   <Renderer>
diff --git a/src/App.vue b/src/App.vue
index 2d4d6ab..343b97d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,15 +10,16 @@
 <script>
 import Test1 from './components/Test1.vue';
 import Test2 from './components/Test2.vue';
+import Test3 from './components/Test3.vue';
 
 export default {
   name: 'App',
   components: {
-    Test1, Test2,
+    Test1, Test2, Test3,
   },
   data() {
     return {
-      tests: ['Test1', 'Test2'],
+      tests: ['Test1', 'Test2', 'Test3'],
       test: 'Test1',
     };
   },
diff --git a/src/components/Test2.vue b/src/components/Test2.vue
index ba416e9..5cf1981 100644
--- a/src/components/Test2.vue
+++ b/src/components/Test2.vue
@@ -1,6 +1,6 @@
 <template>
   <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
-    <PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
+    <Camera :position="{ z: 100 }"></Camera>
 
     <PhongMaterial id="material" color="#ff0000"></PhongMaterial>
 
@@ -17,7 +17,7 @@
 import { Object3D, MathUtils } from 'three';
 
 import {
-  Renderer, PerspectiveCamera, Scene,
+  Renderer, Camera, Scene,
   PointLight,
   PhongMaterial,
   InstancedMesh, BoxGeometry,
@@ -25,7 +25,7 @@ import {
 
 export default {
   components: {
-    Renderer, PerspectiveCamera, Scene,
+    Renderer, Camera, Scene,
     PointLight,
     PhongMaterial,
     InstancedMesh, BoxGeometry,
@@ -39,7 +39,8 @@ export default {
     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));
+      // const scale = rnd(0.2, 1);
+      // dummy.scale.set(scale, scale, scale);
       dummy.updateMatrix();
       imesh.setMatrixAt(i, dummy.matrix);
     }
diff --git a/src/components/Test3.vue b/src/components/Test3.vue
new file mode 100644
index 0000000..aed48b7
--- /dev/null
+++ b/src/components/Test3.vue
@@ -0,0 +1,57 @@
+<template>
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+    <Camera :position="{ z: 100 }"></Camera>
+
+    <PhongMaterial id="material" color="#ffffff"></PhongMaterial>
+
+    <Scene id="scene1">
+      <!-- <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>
+      <PointLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></PointLight>
+
+      <InstancedMesh ref="imesh" material="material" :count="1000">
+        <SphereGeometry :radius="2"></SphereGeometry>
+      </InstancedMesh>
+    </Scene>
+  </Renderer>
+</template>
+
+<script>
+import { Object3D, MathUtils } from 'three';
+
+import {
+  Renderer, Camera, Scene,
+  PointLight, SpotLight,
+  PhongMaterial,
+  InstancedMesh, SphereGeometry,
+} from '../index.js';
+
+export default {
+  components: {
+    Renderer, Camera, Scene,
+    PointLight, SpotLight,
+    PhongMaterial,
+    InstancedMesh, SphereGeometry,
+  },
+  mounted() {
+    const renderer = this.$refs.renderer;
+
+    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));
+      const scale = rnd(0.2, 1);
+      dummy.scale.set(scale, scale, scale);
+      dummy.updateMatrix();
+      imesh.setMatrixAt(i, dummy.matrix);
+    }
+    imesh.instanceMatrix.needsUpdate = true;
+
+    // renderer.onBeforeRender(() => {
+    // });
+  },
+};
+</script>
diff --git a/src/geometries/Geometry.js b/src/geometries/Geometry.js
index ef891dd..3b067d5 100644
--- a/src/geometries/Geometry.js
+++ b/src/geometries/Geometry.js
@@ -1,6 +1,6 @@
 export default {
   inject: ['parent'],
-  created() {
+  beforeMounted() {
     if (!this.parent) {
       console.error('Missing parent Mesh');
     }
diff --git a/src/geometries/SphereGeometry.js b/src/geometries/SphereGeometry.js
index f79dcfc..d003480 100644
--- a/src/geometries/SphereGeometry.js
+++ b/src/geometries/SphereGeometry.js
@@ -3,7 +3,6 @@ import Geometry from './Geometry.js';
 
 export default {
   extends: Geometry,
-  inject: ['parent'],
   props: {
     radius: Number,
     widthSegments: {
@@ -16,6 +15,6 @@ export default {
     },
   },
   mounted() {
-    this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
+    this.parent.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
   },
 };
diff --git a/src/lights/AmbientLight.js b/src/lights/AmbientLight.js
new file mode 100644
index 0000000..2e55579
--- /dev/null
+++ b/src/lights/AmbientLight.js
@@ -0,0 +1,9 @@
+import { AmbientLight } from 'three';
+import Light from './Light.js';
+
+export default {
+  extends: Light,
+  created() {
+    this.light = new AmbientLight(this.color, this.intensity);
+  },
+};
diff --git a/src/lights/Light.js b/src/lights/Light.js
index 5bf75b7..9ea9223 100644
--- a/src/lights/Light.js
+++ b/src/lights/Light.js
@@ -1,7 +1,3 @@
-import {
-  Vector3,
-} from 'three';
-
 import { setFromProp } from '../tools.js';
 
 export default {
@@ -15,19 +11,17 @@ export default {
       type: Number,
       default: 1,
     },
-    distance: {
-      type: Number,
-      default: 0,
-    },
-    decay: {
-      type: Number,
-      default: 1,
+    castShadow: {
+      type: Boolean,
+      default: false,
     },
     position: Object,
   },
   mounted() {
     setFromProp(this.light.position, this.position);
+    this.light.castShadow = this.castShadow;
     this.scene.add(this.light);
+    if (this.light.target) this.scene.add(this.light.target);
   },
   render() {
     return [];
diff --git a/src/lights/PointLight.js b/src/lights/PointLight.js
index f607a59..7165330 100644
--- a/src/lights/PointLight.js
+++ b/src/lights/PointLight.js
@@ -3,6 +3,16 @@ import Light from './Light.js';
 
 export default {
   extends: Light,
+  props: {
+    distance: {
+      type: Number,
+      default: 0,
+    },
+    decay: {
+      type: Number,
+      default: 1,
+    },
+  },
   created() {
     this.light = new PointLight(this.color, this.intensity, this.distance, this.decay);
   },
diff --git a/src/lights/SpotLight.js b/src/lights/SpotLight.js
new file mode 100644
index 0000000..cdca565
--- /dev/null
+++ b/src/lights/SpotLight.js
@@ -0,0 +1,27 @@
+import { SpotLight } from 'three';
+import Light from './Light.js';
+
+export default {
+  extends: Light,
+  props: {
+    distance: {
+      type: Number,
+      default: 0,
+    },
+    angle: {
+      type: Number,
+      default: Math.PI / 3,
+    },
+    penumbra: {
+      type: Number,
+      default: 0,
+    },
+    decay: {
+      type: Number,
+      default: 1,
+    },
+  },
+  created() {
+    this.light = new SpotLight(this.color, this.intensity, this.distance, this.angle, this.penumbra, this.decay);
+  },
+};
diff --git a/src/lights/index.js b/src/lights/index.js
index eaa3996..c92b624 100644
--- a/src/lights/index.js
+++ b/src/lights/index.js
@@ -1 +1,3 @@
+export { default as AmbientLight } from './AmbientLight.js';
 export { default as PointLight } from './PointLight.js';
+export { default as SpotLight } from './SpotLight.js';
diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js
index 6405883..6299945 100644
--- a/src/meshes/InstancedMesh.js
+++ b/src/meshes/InstancedMesh.js
@@ -17,7 +17,6 @@ export default {
     };
   },
   beforeMount() {
-    console.log(this.conf);
     if (!this.$slots.default) {
       console.error('Missing Geometry');
     }