wip

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

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

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>

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>

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

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