Merge pull request #1 from sascha245/feature/multiple_renderer

Feature/multiple renderer

Author: sascha245

README.md

@@ -185,3 +185,4 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
 ## Acknowledgments
 
 - First version of a input manager based on [pinput](https://github.com/ichub/pinput)
+- Handling of multiple renderer inspired by [vue-gl](https://github.com/vue-gl/vue-gl)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-threejs-composer",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "build/src/index.js",
   "typings": "build/src/index.d.ts",
   "repository": "https://github.com/sascha245/vue-threejs-composer",
@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "serve": "vue-cli-service serve ./samples/main.ts",
-    "build": "tsc -p tsconfig.prod.json",
+    "build": "rimraf ./build && tsc -p tsconfig.prod.json",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
     "validate": "npm run build && npm run test:unit && npm pack --dry-run"
@@ -33,6 +33,7 @@
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",
     "lint-staged": "^7.2.2",
+    "rimraf": "^2.6.2",
     "three": "^0.97.0",
     "ts-jest": "^23.0.0",
     "tslint-config-prettier": "^1.15.0",

samples/views/Demo.ts

@@ -7,14 +7,16 @@ import {
     Application, AssetTypes, CameraFactory, components, GeometryFactory, LightFactory,
     MaterialFactory
 } from "../../src";
+import { HoverBehaviour } from "./HoverBehaviour";
 import { MyBehaviour } from "./MyBehaviour";
 
 (window as any).THREE = THREE;
 
 @Component({
   components: {
     ...components,
-    MyBehaviour
+    MyBehaviour,
+    HoverBehaviour
   }
 })
 export default class About extends Vue {
@@ -42,10 +44,10 @@ export default class About extends Vue {
   public cameraFactory: CameraFactory | null = null;
 
   public canvas: HTMLCanvasElement | null = null;
+  public canvas2: HTMLCanvasElement | null = null;
 
   public scene1 = {
-    name: "First scene",
-    active: true,
+    name: "scene1",
     camera: {
       position: {
         x: 0,
@@ -58,34 +60,18 @@ export default class About extends Vue {
         z: 0
       }
     },
-
-    fields: [
-      {
-        id: "someId-0",
-        x: 0,
-        y: 0
-      },
-      {
-        id: "someId-1",
-        x: 1,
-        y: 0
-      },
-      {
-        id: "someId-2",
-        x: 2,
-        y: 0
-      }
-    ]
+    fields: new Array()
   };
   public scene2 = {
-    name: "Second scene",
-    active: true
+    name: "scene2"
   };
 
   public isLoading = true;
   public loadingAmount = 0;
   public loadingTotal = 0;
 
+  public activeScene = this.scene1.name;
+
   public scenes = [this.scene1, this.scene2];
 
   public startLoading() {
@@ -103,15 +89,27 @@ export default class About extends Vue {
   }
 
   public changeScene(pScene: any) {
-    this.scenes.forEach(scene => {
-      scene.active = false;
-    });
-    pScene.active = true;
+    this.activeScene = pScene.name;
+    // this.scenes.forEach(scene => {
+    //   scene.active = false;
+    // });
+    // pScene.active = true;
     console.log("about scene change", this.scenes);
   }
 
   public created() {
-    console.log(this.scene1);
+    let idx = 0;
+    for (let x = 0; x < 5; ++x) {
+      for (let z = 0; z < 5; ++z) {
+        this.scene1.fields.push({
+          x,
+          z,
+          id: `field_${idx}`,
+          y: 0
+        });
+        ++idx;
+      }
+    }
 
     this.cubeFactory = async () => {
       // await new Promise(r => setTimeout(r, 2000));
@@ -158,13 +156,13 @@ export default class About extends Vue {
       return light;
     };
 
-    this.cameraFactory = async ({ width, height }) => {
+    this.cameraFactory = async () => {
       const viewAngle = 60;
       const nearClipping = 0.1;
       const farClipping = 1000;
       return new THREE.PerspectiveCamera(
         viewAngle,
-        width / height,
+        window.innerWidth / window.innerHeight,
         nearClipping,
         farClipping
       );
@@ -173,5 +171,25 @@ export default class About extends Vue {
 
   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

@@ -8,19 +8,23 @@
       <button @click="changeScene(scene2)">Scene 2</button>
     </div>
 
-    <div class="screen">
-      <canvas ref="canvas" class="screen-canvas"></canvas>
-      <div class="screen-loading" v-if="isLoading">
-        <div>
-          <p>Loading...</p>
-          <p>{{loadingAmount}} / {{loadingTotal}}</p>
+    <div>
+      <div class="screen">
+        <canvas ref="canvas" class="screen-canvas"></canvas>
+        <div class="screen-loading" v-if="isLoading">
+          <div>
+            <p>Loading...</p>
+            <p>{{loadingAmount}} / {{loadingTotal}}</p>
+          </div>
         </div>
       </div>
     </div>
+
     <div v-if="canvas">
-      <three :canvas="canvas" antialias>
+      <three>
+        <renderer :canvas="canvas" camera="main" :scene="activeScene" antialias shadows/>
 
-        <scene :name="scene1.name" :active.sync="scene1.active" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
+        <scene name="scene1" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
           <template slot="preload">
             <div>
               <texture name="crateTex" src="/assets/textures/crate.jpg"/>
@@ -43,15 +47,20 @@
 
           <fog exp2/>
 
-          <camera :factory="cameraFactory">
+          <camera name="main" :factory="cameraFactory">
             <position :value="scene1.camera.position"/>
             <rotation :value="scene1.camera.rotation" rad/>
 
             <my-behaviour :data="scene1.camera"/>
           </camera>
 
+          <camera name="secondary" :factory="cameraFactory">
+            <position :value="{ x: 0, y: 10, z: 0 }"/>
+            <rotation :value="{ x: -90, y: 0, z: 0 }"/>
+          </camera>
+
           <light name="sun" :factory="lightFactory">
-            <position :value="{x: 0, y: 10, z: 0}"/>
+            <position :value="{x: -5, y: 10, z: -5}"/>
             <shadows cast/>
           </light>
 
@@ -95,15 +104,17 @@
               geometry="cube"
               material="cubeMat"
               >
-              <position :value="{ x: field.x * 2, y: 0.5, z: field.y * 2}"/>
+              <position :value="{ x: field.x * 2, y: field.y + 5, z: field.z * -2}"/>
               <scale :value="{ x: 1.2, y: 1.2, z: 1.2}"/>
               <shadows cast receive/>
+
+              <!-- <hover-behaviour :position="field" :distance="5"/> -->
             </mesh>
           </group>
 
         </scene>
 
-        <scene :name="scene2.name" :active.sync="scene2.active" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
+        <scene name="scene2" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
           <!-- <template slot="preload">
             <material name="scene2_mat" :factory="materialFactory"/>
             <geometry name="scene2_field" :factory="geometryFactory"/>
@@ -121,16 +132,27 @@
 </template>
 
 <style>
+.fullscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  z-index: -1;
+}
+
 .screen {
   position: relative;
-  width: 80%;
-  height: auto;
-  margin: auto;
-  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  /* height: auto; */
+  /* margin: auto; */
+  /* max-height: 100vh; */
 }
 .screen-canvas {
   width: 100% !important;
-  height: auto !important;
+  height: 100% !important;
   max-height: 100vh;
 }
 .screen-loading {

samples/views/HoverBehaviour.ts

@@ -0,0 +1,53 @@
+import { Component, Mixins, Prop } from "vue-property-decorator";
+
+import { Behaviour } from "../../src";
+
+@Component
+export class HoverBehaviour extends Mixins(Behaviour) {
+  @Prop({ required: true, type: Object })
+  public position!: { y: number };
+
+  @Prop({ type: Number, default: 1 })
+  public distance!: number;
+
+  @Prop({ type: Number, default: 1 })
+  public speed!: number;
+
+  private m_moveUp = true;
+  private m_originalY = 0;
+
+  public created() {
+    // access app
+    const app = this.app();
+
+    // access scene if behaviour is placed in a scene
+    const scene = this.scene();
+
+    // access object if behaviour is placed in an object
+    const object = this.object!();
+
+    this.m_originalY = this.position.y;
+
+    // once your component is ready
+    this.ready();
+  }
+
+  // lifecycle function called before each frame (optional)
+  public update(deltaTime: number) {
+    this.position.y += deltaTime * (this.m_moveUp ? 1 : -1) * this.speed;
+
+    if (this.position.y > this.m_originalY + this.distance) {
+      this.m_moveUp = false;
+    } else if (this.position.y < this.m_originalY - this.distance) {
+      this.m_moveUp = true;
+    }
+  }
+
+  public beforeDestroy() {
+    // dispose everything that needs to be disposed here
+  }
+
+  public render(h: any) {
+    return h("div");
+  }
+}

samples/views/MyBehaviour.ts

@@ -26,10 +26,7 @@ export class MyBehaviour extends Mixins(Behaviour) {
       throw new Error("Could not initialize MyBehaviour: data is missing");
     }
     this.camera = new THREE.PerspectiveCamera();
-    this.controls = new OrbitControls(
-      this.camera,
-      this.app().renderer.domElement
-    );
+    this.controls = new OrbitControls(this.camera);
     this.camera.position.set(
       this.data!.position.x,
       this.data!.position.y,