add scene loading events and handle nested assets preloading (nested assets weren't detected previously)

Author: Sascha Braun

README.md

@@ -23,13 +23,9 @@ However, for now, there are still some shipped in features. Some features are bo
 
 **Todo:**
 
-- Add delta time ( for now it is not set and is always equals to 0 )
-
-- Add scene loading events for tracking loading progress
 - Remove scene active prop (can be done with an v-if attribute)
-- Add scene preload nested assets handling
-- Add cube texture component
 
+- Add cube texture component
 - Add default materials and geometries
 
 ## Usage
@@ -123,7 +119,6 @@ export class MyBehaviour extends Mixins(Behaviour) {
   @Prop()
   public data!: {
     position: Vec3;
-    rotation: Vec3;
   };
 
   private m_moveUp = true;
@@ -144,7 +139,8 @@ export class MyBehaviour extends Mixins(Behaviour) {
 
   // lifecycle function called before each frame (optional)
   public update(deltaTime: number) {
-    this.data.position.y += 0.01 * (this.m_moveUp ? 1 : -1);
+    const speed = 5; // 5 y / second
+    this.data.position.y += deltaTime * (this.m_moveUp ? 1 : -1) * speed;
 
     if (this.data.position.y > 10) {
       this.m_moveUp = false;

samples/views/Demo.ts

@@ -4,7 +4,6 @@ import { Component, Vue } from "vue-property-decorator";
 import {
     CameraFactory, components, GeometryFactory, LightFactory, MaterialFactory
 } from "../../src";
-
 import { MyBehaviour } from "./MyBehaviour";
 
 @Component({
@@ -65,6 +64,16 @@ export default class About extends Vue {
 
   public scenes = [this.scene1, this.scene2];
 
+  public startLoading() {
+    console.log("start loading");
+  }
+  public finishLoading() {
+    console.log("finish loading");
+  }
+  public loadingProgress(amount: number, total: number) {
+    console.log("loading progress", `${amount} / ${total}`);
+  }
+
   public changeScene(pScene: any) {
     this.scenes.forEach(scene => {
       scene.active = false;
@@ -77,7 +86,7 @@ export default class About extends Vue {
     console.log(this.scene1);
 
     this.cubeFactory = async () => {
-      // await new Promise(r => setTimeout(r, 3000));
+      await new Promise(r => setTimeout(r, 2000));
       return new THREE.BoxBufferGeometry(1, 2, 1);
     };
     this.planeFactory = async () => {

samples/views/Demo.vue

@@ -12,13 +12,16 @@
     <div v-if="canvas">
       <three :canvas="canvas" antialias>
 
-        <scene :name="scene1.name" :active.sync="scene1.active">
+        <scene :name="scene1.name" :active.sync="scene1.active" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
           <template slot="preload">
-            <material name="cubeMat" :factory="cubeMaterialFactory"/>
-            <geometry name="cube" :factory="cubeFactory"/>
+            <div>
+              <material name="cubeMat" :factory="cubeMaterialFactory"/>
+              <material name="waterMat" :factory="waterMaterialFactory"/>
+            </div>
 
-            <material name="waterMat" :factory="waterMaterialFactory"/>
+            <geometry name="cube" :factory="cubeFactory"/>
             <geometry name="plane" :factory="planeFactory"/>
+
           </template>
 
           <fog exp2/>

src/components/Scene.tsx

@@ -1,8 +1,9 @@
 import * as THREE from "three";
+import { VNode } from "vue";
 import { Component, Mixins, Prop, Provide, Vue, Watch } from "vue-property-decorator";
 
 import { AssetType } from "../types";
-import { ThreeAssetComponent, ThreeComponent } from "./base";
+import { isThreeAssetComponent, ThreeAssetComponent, ThreeComponent } from "./base";
 
 @Component
 export class Scene extends Mixins(ThreeComponent) {
@@ -70,19 +71,37 @@ export class Scene extends Mixins(ThreeComponent) {
     this.m_isReady = true;
   }
 
-  public async preloadAssets() {
-    const assets: Array<Promise<AssetType>> = [];
-    const preloadNodes = this.$slots.preload;
-    if (preloadNodes) {
-      for (const node of preloadNodes) {
+  private recursivePreload(
+    data: { counter: number; assets: Array<Promise<AssetType>> },
+    nodes: VNode[] | undefined
+  ) {
+    if (nodes) {
+      for (const node of nodes) {
         const component = node.componentInstance;
-        if (component instanceof ThreeAssetComponent) {
-          assets.push(component.asset);
+        if (component && isThreeAssetComponent(component)) {
+          const p = component.asset.then(asset => {
+            ++data.counter;
+            this.$emit("load-progress", data.counter, data.assets.length);
+            return asset;
+          });
+          data.assets.push(p);
         }
+        this.recursivePreload(data, node.children);
       }
     }
+  }
+
+  public async preloadAssets() {
+    this.$emit("load");
+
+    const data: { counter: number; assets: Array<Promise<AssetType>> } = {
+      assets: [],
+      counter: 0
+    };
+    this.recursivePreload(data, this.$slots.preload);
 
-    return Promise.all(assets);
+    await Promise.all(data.assets);
+    this.$emit("loaded");
   }
 
   public mounted() {
@@ -109,7 +128,7 @@ export class Scene extends Mixins(ThreeComponent) {
     );
 
     return (
-      <div className="scene">
+      <div class="scene">
         <h2>Scene {this.name}</h2>
         <div>
           <h3>Preload</h3>

src/components/base/ThreeAssetComponent.ts

@@ -6,3 +6,9 @@ import { AssetType } from "../../types";
 export class ThreeAssetComponent extends Vue {
   public asset!: Promise<AssetType>;
 }
+
+export function isThreeAssetComponent(
+  component: Vue
+): component is ThreeAssetComponent {
+  return (component as any).asset instanceof Promise;
+}