add properties, behaviours and input manager + clean up old code

Author: Sascha Braun

README.md

@@ -1,24 +1,125 @@
 # Vue Three.js
 
-/!\ This module is still in development and not usable yet. If you want to help out, you can make a pull request with the appropriate fixes or features.
+/!\ This module is still in development and not usable yet as a library.
 
-Contains Vuejs bindings for creating and interacting with Threejs scenes and objects
+Contains Vuejs bindings for creating and interacting with Threejs scenes and objects in a easy and reactive way.
 
 **Features:**
 
-- Asset manager with preload possibility (not 100% finished yet)
+- Only core features will be present in this package
+- Asset manager with preload possibility (loading events not done yet)
 - Scene manager with scene switching / loading
-- Reactive meshes, cameras and lights (not 100% finished yet)
+- Reactive meshes, cameras and lights
 - Asynchronous asset and mesh loading
-- Custom factory functions to create (asynchronously) geometries, materials and lights
+- Custom factory functions to load (asynchronously) custom geometries, materials and textures
+- Input manager
+- Behaviour components for data manipulation
 
 **Todo:**
 
-- Input manager
-- Object behaviour components for data manipulation
-- Stabilize API and clean up code
+- Add delta time ( for now it is equals to 0 all time )
+- Change project to library and add samples
 - Publish first pre-release on npm
 
 ## Usage
 
-Coming once the API has been stabilized
+####Define your scenes
+
+```html
+<div>
+    <canvas ref="canvas" class="webglCanvas"></canvas>
+    <div v-if="canvas">
+    <three :canvas="canvas" antialias>
+
+      <scene name="MyScene" active>
+        <template slot="preload">
+          <material name="cubeMat" :factory="cubeMaterialFactory"/>
+          <geometry name="cube" :factory="cubeFactory"/>
+
+          <material name="waterMat" :factory="waterMaterialFactory"/>
+          <geometry name="plane" :factory="planeFactory"/>
+        </template>
+
+        <camera name="mainCamera" :factory="cameraFactory">
+          <position :value="scene1.camera.position"/>
+          <rotation :value="scene1.camera.rotation" rad/>
+        </camera>
+
+        <light name="light" :factory="lightFactory">
+          <position :value="{x: 0, y: 10, z: 0}"/>
+          <shadows cast/>
+        </light>
+
+        <mesh name="waterPlane" geometry="plane" material="waterMat">
+          <rotation :value="{ x: -90, y: 0, z: 0 }"/>
+          <shadows receive/>
+        </mesh>
+
+        <mesh v-for="field in scene1.fields"
+          :key="field.id"
+          :name="'field-'+field.id"
+          geometry="cube"
+          material="cubeMat"
+          >
+          <position :value="{ x: field.x * 2, y: 0, z: field.y * 2}"/>
+          <scale :value="{ x: 1.2, y: 0.7, z: 1.2}"/>
+          <shadows cast receive/>
+        </mesh>
+
+      </scene>
+
+    </three>
+</div>
+```
+
+####Define custom behaviours
+
+```ts
+import { Component, Mixins, Prop } from "vue-property-decorator";
+
+import { Behaviour } from "vue-threejs-composer";
+
+@Component
+export class MyBehaviour extends Mixins(Behaviour) {
+  @Prop()
+  public data!: {
+    position: Vec3;
+    rotation: Vec3;
+  };
+
+  private m_moveUp = true;
+
+  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();
+
+    // once your component is ready
+    this.ready();
+  }
+
+  // lifecycle function called before each frame (optional)
+  public update(deltaTime: number) {
+    this.data.position.y += 0.01 * (this.m_moveUp ? 1 : -1);
+
+    if (this.data.position.y > 10) {
+      this.m_moveUp = false;
+    } else if (this.data.position.y < 0) {
+      this.m_moveUp = true;
+    }
+  }
+
+  public beforeDestroy() {
+    // dispose everything that needs to be disposed here
+  }
+
+  public render(h: any) {
+    return h("div");
+  }
+}
+```

package.json

@@ -9,9 +9,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@types/events": "^1.2.0",
     "@types/three": "^0.92.24",
-    "events": "^3.0.0",
     "three": "^0.97.0",
     "vue": "^2.5.17",
     "vue-class-component": "^6.0.0",

src/views/About.ts

@@ -1,15 +1,16 @@
 import * as THREE from "three";
 import { Component, Vue } from "vue-property-decorator";
 
-import { components, GeometryFactory, LightFactory, MaterialFactory } from "@/vue-three";
+import {
+    CameraFactory, components, GeometryFactory, LightFactory, MaterialFactory
+} from "@/vue-three";
 
 import { MyBehaviour } from "./MyBehaviour";
 
-console.log(components);
-
 @Component({
   components: {
-    ...components
+    ...components,
+    MyBehaviour
   }
 })
 export default class About extends Vue {
@@ -19,24 +20,39 @@ export default class About extends Vue {
   public waterMaterialFactory: MaterialFactory | null = null;
 
   public lightFactory: LightFactory | null = null;
-
-  public behaviour = MyBehaviour;
+  public cameraFactory: CameraFactory | null = null;
 
   public canvas: HTMLCanvasElement | null = null;
 
   public scene1 = {
     name: "First scene",
     active: true,
+    camera: {
+      position: {
+        x: 0,
+        y: 10,
+        z: 0
+      },
+      rotation: {
+        x: 0,
+        y: 0,
+        z: 0
+      }
+    },
+
     fields: [
       {
+        id: "someId-0",
         x: 0,
         y: 0
       },
       {
+        id: "someId-1",
         x: 1,
         y: 0
       },
       {
+        id: "someId-2",
         x: 2,
         y: 0
       }
@@ -97,6 +113,18 @@ export default class About extends Vue {
 
       return light;
     };
+
+    this.cameraFactory = async ({ width, height }) => {
+      const viewAngle = 60;
+      const nearClipping = 0.1;
+      const farClipping = 1000;
+      return new THREE.PerspectiveCamera(
+        viewAngle,
+        width / height,
+        nearClipping,
+        farClipping
+      );
+    };
   }
 
   public mounted() {

src/views/About.vue

@@ -6,8 +6,8 @@
     <div>
       <button @click="changeScene(scene1)">Scene 1</button>
       <button @click="changeScene(scene2)">Scene 2</button>
-
     </div>
+
     <canvas ref="canvas" class="webglCanvas"></canvas>
     <div v-if="canvas">
       <three :canvas="canvas" antialias>
@@ -21,11 +21,11 @@
             <geometry name="plane" :factory="planeFactory"/>
           </template>
 
-          <behaviour :value="behaviour" :data="{}"/>
+          <camera name="mainCamera" :factory="cameraFactory">
+            <position :value="scene1.camera.position"/>
+            <rotation :value="scene1.camera.rotation" rad/>
 
-          <camera name="mainCamera">
-            <position :value="{x: 0, y: 10, z: 0}"/>
-            <behaviour :value="behaviour"/>
+            <my-behaviour :data="scene1.camera"/>
           </camera>
 
           <light name="light" :factory="lightFactory">
@@ -38,9 +38,9 @@
             <shadows receive/>
           </mesh>
 
-          <mesh v-for="(field, index) in scene1.fields"
-            :key="field.x + ' ' + field.y"
-            :name="'field-'+index"
+          <mesh v-for="field in scene1.fields"
+            :key="field.id"
+            :name="'field-'+field.id"
             geometry="cube"
             material="cubeMat"
             >

src/views/MyBehaviour.ts

@@ -1,16 +1,60 @@
-import { ThreeApplication } from "@/vue-three/core";
-import { BehaviourScript } from "@/vue-three/core/BehaviourScript";
+import * as THREE from "three";
+import { Component, Mixins, Prop } from "vue-property-decorator";
 
-export class MyBehaviour extends BehaviourScript {
-  public onInitialize(app: ThreeApplication, data: any) {
-    console.log("my behaviour props", app, data);
+import { Behaviour } from "@/vue-three";
+
+import { OrbitControls } from "./OrbitControls";
+
+interface Vec3 {
+  x: number;
+  y: number;
+  z: number;
+}
+
+@Component
+export class MyBehaviour extends Mixins(Behaviour) {
+  @Prop()
+  public data!: {
+    position: Vec3;
+    rotation: Vec3;
+  };
+
+  private controls!: OrbitControls;
+  private camera!: THREE.PerspectiveCamera;
+
+  public created() {
+    console.log("created my behaviour", this);
+    if (!this.data) {
+      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.camera.position.set(
+      this.data!.position.x,
+      this.data!.position.y,
+      this.data!.position.z
+    );
+    this.camera.rotation.set(
+      this.data!.rotation.x,
+      this.data!.rotation.y,
+      this.data!.rotation.z
+    );
+    this.data!.position = this.camera.position;
+    this.data!.rotation = this.camera.rotation;
+    this.controls.update();
+
+    this.ready();
   }
 
-  public onUpdate() {
-    // console.log("my behaviour update");
+  public beforeDestroy() {
+    console.log("before destroy mybehaviour");
+    this.controls.dispose();
   }
 
-  public onDestroy() {
-    console.log("my behaviour destroy");
+  public render(h: any) {
+    return h("div");
   }
 }

src/vue-three/core/OrbitCamera.ts renamed to src/views/OrbitControls.ts

@@ -0,0 +1,23 @@
+import { Component, Mixins } from "vue-property-decorator";
+
+import { ThreeComponent, ThreeObjectComponent, ThreeSceneComponent } from "./base";
+
+@Component
+export class Behaviour extends Mixins(
+  ThreeComponent,
+  ThreeSceneComponent,
+  ThreeObjectComponent
+) {
+  public ready() {
+    if ((this as any).update) {
+      this.app().on("update", (this as any).update);
+    }
+  }
+
+  public beforeDestroy() {
+    console.log("before destroy behaviour");
+    if ((this as any).update) {
+      this.app().off("update", (this as any).update);
+    }
+  }
+}