From fb5fcfdb6c663d518d9eaf4ce4af4262a7b96c1a Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Mon, 14 Sep 2020 22:53:30 +0200
Subject: [PATCH] improve poc

---
 src/components/Test.vue       | 20 ++++++++++-----
 src/core/PerspectiveCamera.js |  7 +----
 src/core/Renderer.vue         | 48 +++++++++++++++++------------------
 src/core/Scene.js             |  9 ++++---
 src/core/useThree.js          | 38 +++++++++++++++------------
 src/materials/Material.js     |  4 +--
 src/meshes/Sphere.js          | 10 +++++++-
 7 files changed, 77 insertions(+), 59 deletions(-)

diff --git a/src/components/Test.vue b/src/components/Test.vue
index 7846ccb..c5266c7 100644
--- a/src/components/Test.vue
+++ b/src/components/Test.vue
@@ -1,14 +1,14 @@
 <template>
-  <Renderer ref="renderer">
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
     <PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
 
-    <PhongMaterial name="mat1" color="#ff0000"></PhongMaterial>
-    <LambertMaterial name="mat2" color="#0000ff"></LambertMaterial>
+    <PhongMaterial id="material1" color="#ff0000"></PhongMaterial>
+    <LambertMaterial id="material2" color="#0000ff"></LambertMaterial>
 
-    <Scene>
+    <Scene id="scene1">
       <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
-      <Box ref="box" :size="10" :rotation="{ x: 0.5, y: 0.25 }" material="mat1"></Box>
-      <Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="mat2"></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>
     </Scene>
   </Renderer>
 </template>
@@ -28,5 +28,13 @@ export default {
     Box, Sphere,
     LambertMaterial, PhongMaterial,
   },
+  mounted() {
+    const renderer = this.$refs.renderer;
+    const box = this.$refs.box.mesh;
+
+    renderer.onBeforeRender(() => {
+      box.rotation.x += 0.01;
+    });
+  },
 };
 </script>
diff --git a/src/core/PerspectiveCamera.js b/src/core/PerspectiveCamera.js
index 3c1fe64..afb2055 100644
--- a/src/core/PerspectiveCamera.js
+++ b/src/core/PerspectiveCamera.js
@@ -1,5 +1,4 @@
-import { PerspectiveCamera, Vector3 } from 'three';
-
+import { PerspectiveCamera } from 'three';
 import { setFromProp } from '../tools.js';
 
 export default {
@@ -10,10 +9,6 @@ export default {
       default: 50,
     },
     position: Object,
-    // position: {
-    //   type: Object,
-    //   default: new Vector3(),
-    // },
   },
   created() {
     const camera = new PerspectiveCamera(this.fov);
diff --git a/src/core/Renderer.vue b/src/core/Renderer.vue
index 8f119df..6f364db 100644
--- a/src/core/Renderer.vue
+++ b/src/core/Renderer.vue
@@ -7,30 +7,25 @@
 <script>
 import useThree from './useThree';
 
-const animateCallbacks = [];
-
-export function useAnimate(callback) {
-  animateCallbacks.push(callback);
-};
-
 export default {
   props: {
+    antialias: {
+      type: Boolean,
+      default: true,
+    },
     alpha: {
       type: Boolean,
       default: false,
     },
-    animate: {
-      type: Function,
+    orbitCtrl: {
+      default: false,
     },
   },
-  data() {
-    return {
-      raf: true,
-    };
-  },
   setup(props) {
     return {
       three: useThree(),
+      beforeRender: [],
+      raf: true,
     };
   },
   provide() {
@@ -39,25 +34,30 @@ export default {
     };
   },
   mounted() {
-    // console.log('Renderer mounted');
-    this.three.init({
+    const params = {
       canvas: this.$refs.canvas,
-    });
+      antialias: this.antialias,
+      alpha: this.alpha,
+      orbit_ctrl: this.orbitCtrl,
+    };
 
-    this._animate();
+    if (this.three.init(params)) {
+      this.animate();
+    };
   },
   beforeUnmount() {
-    // console.log('Renderer beforeUnmount');
-    // animateCallbacks.splice(0);
     this.raf = false;
+    this.beforeRender.splice(0);
     this.three.dispose();
   },
   methods: {
-    _animate() {
-      if (this.raf) requestAnimationFrame(this._animate);
-      // if (this.animate) this.animate();
-      animateCallbacks.forEach(c => c());
-      if (this.three.scene) this.three.render(this.three.scene);
+    onBeforeRender(callback) {
+      this.beforeRender.push(callback);
+    },
+    animate() {
+      if (this.raf) requestAnimationFrame(this.animate);
+      this.beforeRender.forEach(c => c());
+      this.three.render();
     },
   },
 };
diff --git a/src/core/Scene.js b/src/core/Scene.js
index a524b65..b4613d5 100644
--- a/src/core/Scene.js
+++ b/src/core/Scene.js
@@ -1,12 +1,14 @@
 import { Scene } from 'three';
 
 export default {
-  emits: ['scene-ready'],
-  inject: ['three'],
-  setup (props) {
+  props: {
+    id: String,
+  },
+  setup () {
     const scene = new Scene();
     return { scene };
   },
+  inject: ['three'],
   provide() {
     return {
       scene: this.scene,
@@ -14,7 +16,6 @@ export default {
   },
   mounted() {
     this.three.scene = this.scene;
-    this.$emit('scene-ready');
   },
   render() {
     return this.$slots.default();
diff --git a/src/core/useThree.js b/src/core/useThree.js
index 150d3a2..b020604 100644
--- a/src/core/useThree.js
+++ b/src/core/useThree.js
@@ -18,9 +18,7 @@ export default function useThree() {
     canvas: null,
     antialias: true,
     alpha: false,
-    camera_fov: 50,
-    camera_pos: new Vector3(0, 0, 100),
-    camera_ctrl: false,
+    orbit_ctrl: false,
     mouse_move: false,
     mouse_raycast: false,
     window_resize: true,
@@ -46,6 +44,7 @@ export default function useThree() {
     camera: null,
     cameraCtrl: null,
     materials: {},
+    scene: null,
     size,
     mouse, mouseV3,
     init,
@@ -66,17 +65,24 @@ export default function useThree() {
 
     obj.renderer = new WebGLRenderer({ canvas: conf.canvas, antialias: conf.antialias, alpha: conf.alpha });
 
-    // obj.camera = new PerspectiveCamera(conf.camera_fov);
-    // obj.camera.position.copy(conf.camera_pos);
+    if (!obj.scene) {
+      console.error('Missing Scene');
+      return;
+    }
 
-    // if (conf.camera_ctrl) {
-    //   obj.cameraCtrl = new OrbitControls(obj.camera, obj.renderer.domElement);
-    //   if (conf.camera_ctrl instanceof Object) {
-    //     for (const [key, value] of Object.entries(conf.camera_ctrl)) {
-    //       obj.cameraCtrl[key] = value;
-    //     }
-    //   }
-    // }
+    if (!obj.camera) {
+      console.error('Missing Camera');
+      return;
+    }
+
+    if (conf.orbit_ctrl) {
+      obj.orbitCtrl = new OrbitControls(obj.camera, obj.renderer.domElement);
+      if (conf.orbit_ctrl instanceof Object) {
+        for (const [key, value] of Object.entries(conf.orbit_ctrl)) {
+          obj.orbitCtrl[key] = value;
+        }
+      }
+    }
 
     if (conf.window_resize) {
       onResize();
@@ -94,9 +100,9 @@ export default function useThree() {
   /**
    * default render
    */
-  function render(scene) {
-    if (obj.cameraCtrl) obj.cameraCtrl.update();
-    obj.renderer.render(scene, obj.camera);
+  function render() {
+    if (obj.orbitCtrl) obj.orbitCtrl.update();
+    obj.renderer.render(obj.scene, obj.camera);
   }
 
   /**
diff --git a/src/materials/Material.js b/src/materials/Material.js
index f65714e..72f58de 100644
--- a/src/materials/Material.js
+++ b/src/materials/Material.js
@@ -1,14 +1,14 @@
 export default {
   inject: ['three'],
   props: {
-    name: String,
+    id: String,
     color: {
       type: String,
       default: '#ffffff',
     },
   },
   mounted() {
-    this.three.materials[this.name] = this.material;
+    this.three.materials[this.id] = this.material;
   },
   render() {
     return [];
diff --git a/src/meshes/Sphere.js b/src/meshes/Sphere.js
index cf5ccea..dd440ef 100644
--- a/src/meshes/Sphere.js
+++ b/src/meshes/Sphere.js
@@ -8,8 +8,16 @@ export default {
   extends: Mesh,
   props: {
     radius: Number,
+    widthSegments: {
+      type: Number,
+      default: 12,
+    },
+    heightSegments: {
+      type: Number,
+      default: 12,
+    },
   },
   created() {
-    this.geometry = new SphereBufferGeometry(this.radius, 32, 32);
+    this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
   },
 };