wip

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>

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

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

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>

src/geometries/Geometry.js

@@ -1,6 +1,6 @@
 export default {
   inject: ['parent'],
-  created() {
+  beforeMounted() {
     if (!this.parent) {
       console.error('Missing parent Mesh');
     }

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

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

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: {
+    castShadow: {
-      type: Number,
+      type: Boolean,
-      default: 0,
+      default: false,
-    },
-    decay: {
-      type: Number,
-      default: 1,
     },
     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 [];

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

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

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

src/meshes/InstancedMesh.js

@@ -17,7 +17,6 @@ export default {
     };
   },
   beforeMount() {
-    console.log(this.conf);
     if (!this.$slots.default) {
       console.error('Missing Geometry');
     }