adapted components to rewritten core

started testing and fixing bugs (not totally done yet)

Author: Sascha Braun

samples/factories/geometries.ts

@@ -0,0 +1,11 @@
+import * as THREE from "three";
+
+import { Application, GeometryFactory } from "../../src";
+
+export const cubeFactory: GeometryFactory = async (app: Application) => {
+  return new THREE.BoxBufferGeometry(1, 1, 1);
+};
+
+export const planeFactory: GeometryFactory = async () => {
+  return new THREE.PlaneBufferGeometry(100, 100);
+};

samples/views/Demo.ts

@@ -3,68 +3,54 @@ import "../FbxLoader";
 import * as THREE from "three";
 import { Component, Vue } from "vue-property-decorator";
 
-import {
-    Application, AssetTypes, CameraFactory, components, GeometryFactory, LightFactory,
-    MaterialFactory
-} from "../../src";
+import { CameraFactory, components, LightFactory, Loader } from "../../src";
+import { cubeFactory, planeFactory } from "../factories/geometries";
 import { HoverBehaviour } from "./HoverBehaviour";
 import { MyBehaviour } from "./MyBehaviour";
+import StandardMaterial from "./StandardMaterial";
+
+Loader.registerExtension("fbx", THREE.FBXLoader);
 
 (window as any).THREE = THREE;
 
 @Component({
   components: {
     ...components,
+    HoverBehaviour,
     MyBehaviour,
-    HoverBehaviour
+    StandardMaterial
   }
 })
-export default class About extends Vue {
-  public cubeFactory: GeometryFactory | null = null;
-  public planeFactory: GeometryFactory | null = null;
-  public cubeMaterialFactory: MaterialFactory | null = null;
-  public waterMaterialFactory: MaterialFactory | null = null;
+export default class Demo extends Vue {
+  public cubeFactory = cubeFactory;
+  public planeFactory = planeFactory;
 
-  public polygonMaterialFactory: MaterialFactory = async (app: Application) => {
-    const texture = await app.assets.get("PolygonMini_Tex", AssetTypes.TEXTURE);
+  public lightFactory: LightFactory = async () => {
+    const light = new THREE.PointLight(0xffffff, 1, 100);
 
-    if (!texture) {
-      throw new Error("Could not find 'PolygonMini_Tex' texture");
-    }
+    light.shadow.mapSize.width = 512; // default
+    light.shadow.mapSize.height = 512; // default
+    light.shadow.camera.near = 0.3; // default
+    light.shadow.camera.far = 500; // default
 
-    const mat = new THREE.MeshStandardMaterial({
-      color: "#eeeeee",
-      metalness: 0.01
-    });
-    mat.map = texture as THREE.Texture;
-    return mat;
+    return light;
   };
-  public polygonDungeonFactory: MaterialFactory = async (app: Application) => {
-    const texture = await app.assets.get(
-      "PolygonDungeon_Tex",
-      AssetTypes.TEXTURE
-    );
-
-    if (!texture) {
-      throw new Error("Could not find 'PolygonDungeon_Tex' texture");
-    }
 
-    const mat = new THREE.MeshStandardMaterial({
-      color: "#eeeeee",
-      metalness: 0.01
-    });
-    mat.map = texture as THREE.Texture;
-    return mat;
+  public cameraFactory: CameraFactory = async () => {
+    const viewAngle = 60;
+    const nearClipping = 0.1;
+    const farClipping = 1000;
+    return new THREE.PerspectiveCamera(
+      viewAngle,
+      window.innerWidth / window.innerHeight,
+      nearClipping,
+      farClipping
+    );
   };
 
-  public lightFactory: LightFactory | null = null;
-  public cameraFactory: CameraFactory | null = null;
-
   public canvas: HTMLCanvasElement | null = null;
-  public canvas2: HTMLCanvasElement | null = null;
 
   public scene1 = {
-    name: "scene1",
     camera: {
       position: {
         x: 0,
@@ -79,17 +65,12 @@ export default class About extends Vue {
     },
     fields: new Array()
   };
-  public scene2 = {
-    name: "scene2"
-  };
 
   public isLoading = true;
   public loadingAmount = 0;
   public loadingTotal = 0;
 
-  public activeScene = this.scene1.name;
-
-  public scenes = [this.scene1, this.scene2];
+  public activeScene = "scene1";
 
   public startLoading() {
     this.isLoading = true;
@@ -105,18 +86,11 @@ export default class About extends Vue {
     console.log("loading progress", `${amount} / ${total}`);
   }
 
-  public changeScene(pScene: any) {
-    this.activeScene = pScene.name;
-    // this.scenes.forEach(scene => {
-    //   scene.active = false;
-    // });
-    // pScene.active = true;
-    console.log("about scene change", this.scenes);
+  public changeScene(pName: string) {
+    this.activeScene = pName;
   }
 
   public created() {
-    console.log("scene", this.scene1);
-
     let idx = 0;
     for (let x = 0; x < 5; ++x) {
       for (let z = 0; z < 5; ++z) {
@@ -129,88 +103,9 @@ export default class About extends Vue {
         ++idx;
       }
     }
-
-    this.cubeFactory = async (app: Application) => {
-      // await new Promise(r => setTimeout(r, 2000));
-      // return new THREE.CylinderBufferGeometry(1, 1, 1, 6, 6);
-
-      return new THREE.BoxBufferGeometry(1, 1, 1);
-    };
-    this.planeFactory = async () => {
-      // await new Promise(r => setTimeout(r, 3000));
-      return new THREE.PlaneBufferGeometry(100, 100);
-    };
-
-    this.cubeMaterialFactory = async (app: Application) => {
-      const texture = await app.assets.get("crateTex", AssetTypes.TEXTURE);
-
-      if (!texture) {
-        throw new Error("Could not find 'crateTex' texture");
-      }
-
-      const mat = new THREE.MeshPhysicalMaterial({
-        color: "#eeeeee",
-        metalness: 0.01
-      });
-      mat.map = texture as THREE.Texture;
-      // mat.color = new THREE.Color("#dddddd");
-      return mat;
-    };
-    this.waterMaterialFactory = async () => {
-      const mat = new THREE.MeshPhysicalMaterial({
-        color: "#9c9cff",
-        metalness: 0.01,
-        fog: true
-      });
-      // mat.color = new THREE.Color("#dddddd");
-      return mat;
-    };
-
-    this.lightFactory = async () => {
-      const light = new THREE.PointLight(0xffffff, 1, 100);
-
-      light.shadow.mapSize.width = 512; // default
-      light.shadow.mapSize.height = 512; // default
-      light.shadow.camera.near = 0.3; // default
-      light.shadow.camera.far = 500; // default
-
-      return light;
-    };
-
-    this.cameraFactory = async () => {
-      const viewAngle = 60;
-      const nearClipping = 0.1;
-      const farClipping = 1000;
-      return new THREE.PerspectiveCamera(
-        viewAngle,
-        window.innerWidth / window.innerHeight,
-        nearClipping,
-        farClipping
-      );
-    };
   }
 
   public mounted() {
     this.canvas = this.$refs.canvas as HTMLCanvasElement;
-    this.canvas2 = this.$refs.canvas2 as HTMLCanvasElement;
   }
 }
-
-// <!-- Asset management update ideas: allow to split up and depend on asset bundles (that can be either preloaded or loaded during runtime) -->
-// <!-- <assets-bundle name="PolygonMini" preload>
-//     <texture name="PolygonMini_Tex" src="/assets/textures/PolygonMinis_Texture_01.png"/>
-//     <material name="PolygonMini_Mat" :factory="polygonMaterialFactory"/>
-
-//     <model name="grassModel" src="/assets/models/SM_Env_Grass_01.fbx" materials="PolygonMini_Mat"/>
-//     <model name="PM_column" src="/assets/models/SM_Tile_Hex_Column_02.fbx" materials="PolygonMini_Mat"/>
-//     <model name="PM_flat" src="/assets/models/SM_Tile_Hex_Flat_01.fbx" materials="PolygonMini_Mat"/>
-// </assets-bundle>
-
-// <assets-bundle name="crate" preload>
-//     <texture name="crateTex" src="/assets/textures/crate.jpg"/>
-// </assets-bundle>
-
-// <assets-bundle name="Scene1" dependencies="crate" preload>
-//     <geometry name="cube" :factory="cubeFactory"/>
-//     <material name="cubeMat" :factory="cubeMaterialFactory"/>
-// </assets-bundle> -->

samples/views/Demo.vue

@@ -4,8 +4,8 @@
   <div class="about">
     <h1>This is an about page</h1>
     <div>
-      <button @click="changeScene(scene1)">Scene 1</button>
-      <button @click="changeScene(scene2)">Scene 2</button>
+      <button @click="changeScene('scene1')">Scene 1</button>
+      <button @click="changeScene('scene2')">Scene 2</button>
     </div>
 
     <div>
@@ -27,7 +27,7 @@
         <asset-bundle name="PolygonMini" preload>
           <texture name="PolygonMini_Tex" src="/assets/textures/PolygonMinis_Texture_01.png"/>
 
-          <material name="PolygonMini_Mat" :factory="polygonMaterialFactory"/>
+          <standard-material name="PolygonMini_Mat" map="PolygonMini_Tex"/>
 
           <model name="grassModel" src="/assets/models/SM_Env_Grass_01.fbx" materials="PolygonMini_Mat"/>
           <model name="PM_column" src="/assets/models/SM_Tile_Hex_Column_02.fbx" materials="PolygonMini_Mat"/>
@@ -37,23 +37,25 @@
         <asset-bundle name="PolygonDungeon" preload>
           <texture name="PolygonDungeon_Tex" src="/assets/textures/Dungeons_Texture_01.png"/>
 
-          <material name="PolygonDungeon_Mat" :factory="polygonDungeonFactory"/>
+          <standard-material name="PolygonDungeon_Mat" map="PolygonDungeon_Tex"/>
 
           <model name="PD_dandelion1" src="/assets/models/SM_Env_Tree_Dandelion_01.fbx" materials="PolygonDungeon_Mat"/>
           <model name="PD_dandelion2" src="/assets/models/SM_Env_Tree_Dandelion_02.fbx" materials="PolygonDungeon_Mat"/>
           <model name="PD_dandelion3" src="/assets/models/SM_Env_Tree_Dandelion_03.fbx" materials="PolygonDungeon_Mat"/>
         </asset-bundle>
 
+
+
         <asset-bundle name="Crate" preload>
           <texture name="crateTex" src="/assets/textures/crate.jpg"/>
-          <material name="cubeMat" :factory="cubeMaterialFactory"/>
+          <standard-material name="cubeMat" map="crateTex"/>
           <geometry name="cube" :factory="cubeFactory"/>
         </asset-bundle>
 
         <asset-bundle dependencies="Crate" name="Scene1" preload>
 
           <geometry name="plane" :factory="planeFactory"/>
-          <material name="waterMat" :factory="waterMaterialFactory"/>
+          <standard-material name="waterMat" color="#9c9cff"/>
 
         </asset-bundle>
 
@@ -97,25 +99,25 @@
             <mesh model="grassModel" name="grass">
               <position :value="{ x: 10, y: 3, z: 10 }"/>
               <scale :value="{ x: 0.05, y: 0.05, z: 0.05 }"/>
-              <shadows cast receive recursive/>
+              <shadows cast receive deep/>
             </mesh>
 
             <mesh model="PD_dandelion1">
               <position :value="{ x: -10, y: 3, z: 10 }"/>
               <!-- <scale :value="{ x: 0.05, y: 0.05, z: 0.05 }"/> -->
-              <shadows cast receive recursive/>
+              <shadows cast receive deep/>
             </mesh>
 
             <group>
               <position :value="{ x: 10, y: 3, z: 10 }"/>
               <scale :value="{ x: 0.01, y: 0.01, z: 0.01 }"/>
-              <shadows cast receive recursive/>
+              <shadows cast receive/>
 
               <mesh model="PM_column" name="column">
-                <shadows cast receive recursive/>
+                <shadows cast receive deep/>
               </mesh>
               <mesh model="PM_flat" name="flat_grass">
-                <shadows cast receive recursive/>
+                <shadows cast receive deep/>
               </mesh>
             </group>
 

samples/views/HoverBehaviour.ts

@@ -1,9 +1,9 @@
 import { Component, Mixins, Prop } from "vue-property-decorator";
 
-import { Behaviour } from "../../src";
+import { BehaviourComponent } from "../../src";
 
 @Component
-export class HoverBehaviour extends Mixins(Behaviour) {
+export class HoverBehaviour extends Mixins(BehaviourComponent) {
   @Prop({ required: true, type: Object })
   public position!: { y: number };
 

samples/views/MyBehaviour.ts

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import { Component, Mixins, Prop } from "vue-property-decorator";
 
-import { Behaviour } from "../../src";
+import { BehaviourComponent } from "../../src";
 import { OrbitControls } from "./OrbitControls";
 
 interface Vec3 {
@@ -11,7 +11,7 @@ interface Vec3 {
 }
 
 @Component
-export class MyBehaviour extends Mixins(Behaviour) {
+export class MyBehaviour extends Mixins(BehaviourComponent) {
   @Prop()
   public data!: {
     position: Vec3;

samples/views/StandardMaterial.ts

@@ -0,0 +1,43 @@
+import { MeshStandardMaterial, Texture } from "three";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+import { Application, components, MaterialFactory } from "../../src";
+
+const { Material } = components;
+
+@Component({
+  components: {
+    Material
+  }
+})
+export default class StandardMaterial extends Vue {
+  @Prop({ required: true, type: String })
+  public name!: string;
+
+  @Prop({ type: String })
+  public map!: string;
+
+  @Prop({ type: String, default: "#ffffff" })
+  public color!: string;
+
+  @Prop({ type: Number, default: 0.01 })
+  public metalness!: number;
+
+  public factory: MaterialFactory | null = null;
+
+  public created() {
+    this.factory = async (app: Application) => {
+      let texture;
+      if (this.map) {
+        texture = await app.assets.textures.get(this.map);
+      }
+
+      const mat = new MeshStandardMaterial({
+        color: this.color,
+        metalness: this.metalness
+      });
+      mat.map = texture as Texture;
+      return mat;
+    };
+  }
+}

samples/views/StandardMaterial.vue

@@ -0,0 +1,5 @@
+<script lang="ts" src="./StandardMaterial.ts"></script>
+
+<template>
+  <material :factory="factory" :name="name"/>
+</template>