improve poc

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>
+    <PhongMaterial id="material1" color="#ff0000"></PhongMaterial>
-    <LambertMaterial name="mat2" color="#0000ff"></LambertMaterial>
+    <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>
+      <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4 }" material="material1"></Box>
-      <Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="mat2"></Sphere>
+      <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>

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);

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: {
+    orbitCtrl: {
-      type: Function,
+      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');
+    const params = {
-    this.three.init({
       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() {
+    onBeforeRender(callback) {
-      if (this.raf) requestAnimationFrame(this._animate);
+      this.beforeRender.push(callback);
-      // if (this.animate) this.animate();
+    },
-      animateCallbacks.forEach(c => c());
+    animate() {
-      if (this.three.scene) this.three.render(this.three.scene);
+      if (this.raf) requestAnimationFrame(this.animate);
+      this.beforeRender.forEach(c => c());
+      this.three.render();
     },
   },
 };

src/core/Scene.js

@@ -1,12 +1,14 @@
 import { Scene } from 'three';
 
 export default {
-  emits: ['scene-ready'],
+  props: {
-  inject: ['three'],
+    id: String,
-  setup (props) {
+  },
+  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();

src/core/useThree.js

@@ -18,9 +18,7 @@ export default function useThree() {
     canvas: null,
     antialias: true,
     alpha: false,
-    camera_fov: 50,
+    orbit_ctrl: false,
-    camera_pos: new Vector3(0, 0, 100),
-    camera_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);
+    if (!obj.scene) {
-    // obj.camera.position.copy(conf.camera_pos);
+      console.error('Missing Scene');
+      return;
+    }
 
-    // if (conf.camera_ctrl) {
+    if (!obj.camera) {
-    //   obj.cameraCtrl = new OrbitControls(obj.camera, obj.renderer.domElement);
+      console.error('Missing Camera');
-    //   if (conf.camera_ctrl instanceof Object) {
+      return;
-    //     for (const [key, value] of Object.entries(conf.camera_ctrl)) {
+    }
-    //       obj.cameraCtrl[key] = value;
+
-    //     }
+    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) {
+  function render() {
-    if (obj.cameraCtrl) obj.cameraCtrl.update();
+    if (obj.orbitCtrl) obj.orbitCtrl.update();
-    obj.renderer.render(scene, obj.camera);
+    obj.renderer.render(obj.scene, obj.camera);
   }
 
   /**

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 [];

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);
   },
 };