From 26ab54bd6603f7cb533f9cc124f9fe48659bd883 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Tue, 15 Sep 2020 14:59:34 +0200
Subject: [PATCH] wip

---
 public/test.glb                       | Bin 0 -> 4848 bytes
 src/App.vue                           |   5 ++--
 src/components/Test2.vue              |   9 +++++---
 src/components/TestGLTF.vue           |  14 +++++++++++
 src/components/viewers/GLTFViewer.vue |  32 ++++++++++++++++++++++++++
 src/core/Scene.js                     |   5 +++-
 src/lights/Light.js                   |   6 +++--
 7 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 public/test.glb
 create mode 100644 src/components/TestGLTF.vue
 create mode 100644 src/components/viewers/GLTFViewer.vue

diff --git a/public/test.glb b/public/test.glb
new file mode 100644
index 0000000000000000000000000000000000000000..d632e5fea520c3b7b4c3e65f70e6d702ee7bf9d5
GIT binary patch
literal 4848
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

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 343b97d..dfebf2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,15 +11,16 @@
 import Test1 from './components/Test1.vue';
 import Test2 from './components/Test2.vue';
 import Test3 from './components/Test3.vue';
+import TestGLTF from './components/TestGLTF.vue';
 
 export default {
   name: 'App',
   components: {
-    Test1, Test2, Test3,
+    Test1, Test2, Test3, TestGLTF,
   },
   data() {
     return {
-      tests: ['Test1', 'Test2', 'Test3'],
+      tests: ['Test1', 'Test2', 'Test3', 'TestGLTF'],
       test: 'Test1',
     };
   },
diff --git a/src/components/Test2.vue b/src/components/Test2.vue
index a83eded..6c74dcc 100644
--- a/src/components/Test2.vue
+++ b/src/components/Test2.vue
@@ -5,7 +5,7 @@
     <PhongMaterial id="material" color="#ff0000"></PhongMaterial>
 
     <Scene id="scene1">
-      <PointLight :position="{ x: 0, y: 150, z: 150 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }"></PointLight>
+      <PointLight ref="light" :position="{ x: 0, y: 150, z: 150 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }"></PointLight>
       <InstancedMesh ref="imesh" material="material" :count="1000" :cast-shadow="true" :receive-shadow="true">
         <BoxGeometry :size="5"></BoxGeometry>
       </InstancedMesh>
@@ -31,8 +31,6 @@ export default {
     InstancedMesh, BoxGeometry,
   },
   mounted() {
-    const renderer = this.$refs.renderer;
-
     const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
     const imesh = this.$refs.imesh.mesh;
     const dummy = new Object3D();
@@ -46,7 +44,12 @@ export default {
     }
     imesh.instanceMatrix.needsUpdate = true;
 
+    const renderer = this.$refs.renderer;
+    const light = this.$refs.light.light;
     renderer.onBeforeRender(() => {
+      const t = Date.now() * 0.0001;
+      const c1 = Math.cos(t), c2 = c1 * Math.sin(t * 1.4), c3 = c2 * Math.cos(t * 0.3);
+      light.position.set(c1 * 100, c2 * 100, c3 * 100);
     });
   },
 };
diff --git a/src/components/TestGLTF.vue b/src/components/TestGLTF.vue
new file mode 100644
index 0000000..1efaa75
--- /dev/null
+++ b/src/components/TestGLTF.vue
@@ -0,0 +1,14 @@
+<template>
+  <GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
+    <AmbientLight></AmbientLight>
+  </GLTFViewer>
+</template>
+
+<script>
+import { AmbientLight } from '../index.js';
+import GLTFViewer from './viewers/GLTFViewer.vue';
+
+export default {
+  components: { GLTFViewer, AmbientLight },
+};
+</script>
diff --git a/src/components/viewers/GLTFViewer.vue b/src/components/viewers/GLTFViewer.vue
new file mode 100644
index 0000000..1129fc9
--- /dev/null
+++ b/src/components/viewers/GLTFViewer.vue
@@ -0,0 +1,32 @@
+<template>
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+    <Camera ref="camera" :position="cameraPosition"></Camera>
+    <Scene>
+      <slot></slot>
+    </Scene>
+  </Renderer>
+</template>
+
+<script>
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { Renderer, Camera, Scene } from '../../index.js';
+import { setFromProp } from '../../tools.js';
+
+export default {
+  components: { Renderer, Camera, Scene },
+  props: {
+    src: String,
+    cameraPosition: Object,
+  },
+  mounted() {
+    this.renderer = this.$refs.renderer;
+
+    setFromProp(this.$refs.camera.position, this.cameraPosition);
+
+    const loader = new GLTFLoader();
+    loader.load(this.src, (gltf) => {
+      this.renderer.three.scene.add(gltf.scene);
+    });
+  },
+};
+</script>
diff --git a/src/core/Scene.js b/src/core/Scene.js
index b4613d5..caf7783 100644
--- a/src/core/Scene.js
+++ b/src/core/Scene.js
@@ -18,6 +18,9 @@ export default {
     this.three.scene = this.scene;
   },
   render() {
-    return this.$slots.default();
+    if (this.$slots.default) {
+      return this.$slots.default();
+    }
+    return [];
   },
 };
diff --git a/src/lights/Light.js b/src/lights/Light.js
index 8d525df..dfdb13e 100644
--- a/src/lights/Light.js
+++ b/src/lights/Light.js
@@ -21,8 +21,10 @@ export default {
   mounted() {
     setFromProp(this.light.position, this.position);
 
-    this.light.castShadow = this.castShadow;
-    setFromProp(this.light.shadow.mapSize, this.shadowMapSize);
+    if (this.light.shadow) {
+      this.light.castShadow = this.castShadow;
+      setFromProp(this.light.shadow.mapSize, this.shadowMapSize);
+    }
 
     this.scene.add(this.light);
     if (this.light.target) this.scene.add(this.light.target);