add better three object properties handling (defined now in separate components instead of props)

Author: Sascha Braun

src/views/About.ts

@@ -3,6 +3,8 @@ import { Component, Vue } from "vue-property-decorator";
 
 import { components, GeometryFactory, LightFactory, MaterialFactory } from "@/vue-three";
 
+console.log(components);
+
 @Component({
   components: {
     ...components

src/views/About.vue

@@ -21,19 +21,30 @@
             <geometry name="plane" :factory="planeFactory"/>
           </template>
 
-          <camera name="mainCamera" :position="{x: 0, y: 10, z: 0}"/>
-          <light name="light" :factory="lightFactory" castShadow :position="{x: 0, y: 10, z: 0}"/>
-          <mesh name="waterPlane" receiveShadow geometry="plane" material="waterMat" :rotation="{ x: -90, y: 0, z: 0 }"/>
+          <camera name="mainCamera">
+            <position :value="{x: 0, y: 10, z: 0}"/>
+          </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, index) in scene1.fields"
             :key="field.x + ' ' + field.y"
             :name="'field-'+index"
-            castShadow
-            receiveShadow
             geometry="cube"
             material="cubeMat"
-            :position="{ x: field.x * 2, y: 0, z: field.y * 2}"
-            />
+            >
+            <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>
 
         <scene :name="scene2.name" :active.sync="scene2.active">

src/vue-three/components/Camera.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { Component, Inject, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Inject, Prop, Provide, Vue, Watch } from "vue-property-decorator";
 
 import { ThreeApplication } from "../core";
 import { OrbitControls } from "../core/OrbitCamera";
@@ -15,49 +15,15 @@ export class Camera extends Vue {
   @Prop({ default: true, type: Boolean })
   private main!: boolean;
 
-  @Prop({
-    default() {
-      return {
-        x: 0,
-        y: 0,
-        z: 0
-      };
-    }
-  })
-  private position!: { x: number; y: number; z: number };
-
-  @Prop({
-    default() {
-      return {
-        x: 0,
-        y: 0,
-        z: 0
-      };
-    }
-  })
-  private rotation!: { x: number; y: number; z: number };
+  @Provide("object")
+  public provideObject = this.object;
 
   private m_isMain = false;
-  private m_camera!: THREE.Camera;
+  private m_camera!: THREE.PerspectiveCamera;
   private m_controls?: OrbitControls;
 
-  @Watch("position", { deep: true })
-  private onChangePosition() {
-    this.m_camera.position.set(
-      this.position.x,
-      this.position.y,
-      this.position.z
-    );
-  }
-
-  @Watch("rotation", { deep: true })
-  private onChangeRotation() {
-    const rad = THREE.Math.degToRad;
-    this.m_camera.rotation.set(
-      rad(this.rotation.x),
-      rad(this.rotation.y),
-      rad(this.rotation.z)
-    );
+  public object(): THREE.Object3D {
+    return this.m_camera;
   }
 
   @Watch("main")
@@ -96,7 +62,8 @@ export class Camera extends Vue {
     manager.main = this.m_camera;
   }
 
-  public mounted() {
+  public created() {
+    console.log("camera created");
     const { width, height } = this.app().renderer.getSize();
     const viewAngle = 60;
     const nearClipping = 0.1;
@@ -109,8 +76,6 @@ export class Camera extends Vue {
       farClipping
     );
 
-    this.onChangePosition();
-    this.onChangeRotation();
     this.m_controls = new OrbitControls(
       this.m_camera,
       this.app().renderer.domElement
@@ -119,6 +84,10 @@ export class Camera extends Vue {
     this.onChangeMain();
   }
 
+  public mounted() {
+    console.log("camera mounted");
+  }
+
   public beforeDestroy() {
     this.onDeactivate();
     if (this.m_camera && this.m_controls) {
@@ -131,6 +100,11 @@ export class Camera extends Vue {
     if (!this.main) {
       return null;
     }
-    return <div className="camera">Camera</div>;
+    return (
+      <div className="camera">
+        <span>Camera</span>
+        <ul>{this.$slots.default}</ul>
+      </div>
+    );
   }
 }

src/vue-three/components/Light.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { Component, Inject, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Inject, Prop, Provide, Vue, Watch } from "vue-property-decorator";
 
 import { ThreeApplication } from "../core";
 import { LightFactory } from "../types";
@@ -18,65 +18,29 @@ export class Light extends Vue {
   @Prop({ default: false, type: Boolean })
   private castShadow!: boolean;
 
-  @Prop({
-    default() {
-      return {
-        x: 0,
-        y: 0,
-        z: 0
-      };
-    }
-  })
-  private position!: { x: number; y: number; z: number };
-
-  @Prop({
-    default() {
-      return {
-        x: 0,
-        y: 0,
-        z: 0
-      };
-    }
-  })
-  private rotation!: { x: number; y: number; z: number };
-
   @Prop({ required: true, type: Function })
   public factory!: LightFactory;
 
-  private m_light!: THREE.Light;
-
-  @Watch("position", { deep: true })
-  private onChangePosition() {
-    this.m_light.position.set(
-      this.position.x,
-      this.position.y,
-      this.position.z
-    );
-  }
+  @Provide("object")
+  public provideObject = this.object;
 
-  @Watch("rotation", { deep: true })
-  private onChangeRotation() {
-    const rad = THREE.Math.degToRad;
-    this.m_light.rotation.set(
-      rad(this.rotation.x),
-      rad(this.rotation.y),
-      rad(this.rotation.z)
-    );
-  }
+  private m_light!: THREE.Light;
+  private m_created = false;
 
   @Watch("castShadow")
   private onChangeCastShadow() {
     this.m_light.castShadow = this.castShadow;
   }
 
-  public async mounted() {
-    this.m_light = await this.factory();
+  public object(): THREE.Object3D {
+    return this.m_light;
+  }
 
-    console.log("light mounted", this.name, this.m_light);
-    this.onChangePosition();
-    this.onChangeRotation();
+  public async created() {
+    this.m_light = await this.factory();
     this.onChangeCastShadow();
     this.scene().add(this.m_light);
+    this.m_created = true;
   }
 
   public beforeDestroy() {
@@ -88,6 +52,14 @@ export class Light extends Vue {
   }
 
   public render(h: any) {
-    return <div className="light">Light {this.name}</div>;
+    if (!this.m_created) {
+      return null;
+    }
+    return (
+      <div className="light">
+        <span>Light {this.name}</span>
+        <ul>{this.$slots.default}</ul>
+      </div>
+    );
   }
 }

src/vue-three/components/Mesh.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { Component, Inject, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Inject, Prop, Provide, Vue, Watch } from "vue-property-decorator";
 
 import { AssetTypes, GeometryType, MaterialType } from "@/vue-three/types";
 
@@ -22,62 +22,17 @@ export class Mesh extends Vue {
   @Prop({ required: true, type: String })
   private geometry!: string;
 
-  @Prop({
-    default() {
-      return {
-        x: 0,
-        y: 0,
-        z: 0
-      };
-    }
-  })
-  private position!: { x: number; y: number; z: number };
-
-  @Prop({
-    default() {
-      return {
-        x: 0,
-        y: 0,
-        z: 0
-      };
-    }
-  })
-  private rotation!: { x: number; y: number; z: number };
-
-  @Prop({ default: false, type: Boolean })
-  private receiveShadow!: boolean;
-
-  @Prop({ default: false, type: Boolean })
-  private castShadow!: boolean;
+  @Provide("object")
+  private provideObject = this.object;
 
   private m_mesh!: THREE.Mesh;
+  private m_created = false;
 
-  @Watch("receiveShadow")
-  private onChangeReceiveShadow() {
-    this.m_mesh.receiveShadow = this.receiveShadow;
-  }
-
-  @Watch("castShadow")
-  private onChangeCastShadow() {
-    this.m_mesh.castShadow = this.castShadow;
-  }
-
-  @Watch("position", { deep: true })
-  private onChangePosition() {
-    this.m_mesh.position.set(this.position.x, this.position.y, this.position.z);
-  }
-
-  @Watch("rotation", { deep: true })
-  private onChangeRotation() {
-    const rad = THREE.Math.degToRad;
-    this.m_mesh.rotation.set(
-      rad(this.rotation.x),
-      rad(this.rotation.y),
-      rad(this.rotation.z)
-    );
+  public object(): THREE.Object3D {
+    return this.m_mesh;
   }
 
-  public async mounted() {
+  public async created() {
     const materialProm = this.app().assets.get(
       this.material,
       AssetTypes.MATERIAL
@@ -110,11 +65,9 @@ export class Mesh extends Vue {
       geometry as GeometryType,
       material as MaterialType
     );
-    this.onChangePosition();
-    this.onChangeRotation();
-    this.onChangeReceiveShadow();
-    this.onChangeCastShadow();
     this.scene().add(this.m_mesh);
+
+    this.m_created = true;
   }
 
   public beforeDestroy() {
@@ -126,6 +79,14 @@ export class Mesh extends Vue {
   }
 
   public render(h: any) {
-    return <div className="mesh">Mesh {this.name}</div>;
+    if (!this.m_created) {
+      return null;
+    }
+    return (
+      <div className="mesh">
+        <span>Mesh {this.name}</span>
+        <ul>{this.$slots.default}</ul>
+      </div>
+    );
   }
 }

src/vue-three/components/index.ts

@@ -6,3 +6,5 @@ export * from "./Scene";
 export * from "./Three";
 export * from "./Camera";
 export * from "./Light";
+
+export * from "./properties";

src/vue-three/components/properties/Position.tsx

@@ -0,0 +1,35 @@
+import * as THREE from "three";
+import { Component, Inject, Prop, Vue, Watch } from "vue-property-decorator";
+
+@Component
+export class Position extends Vue {
+  @Inject()
+  protected object!: () => THREE.Object3D;
+
+  @Prop({
+    default() {
+      return {
+        x: 0,
+        y: 0,
+        z: 0
+      };
+    }
+  })
+  private value!: { x: number; y: number; z: number };
+
+  @Watch("value", { deep: true })
+  private onChange() {
+    this.object().position.set(this.value.x, this.value.y, this.value.z);
+  }
+
+  public created() {
+    this.onChange();
+  }
+
+  public render(h: any) {
+    const valueStringify = `[${this.value.x}, ${this.value.y}, ${
+      this.value.z
+    }]`;
+    return <li>Position {valueStringify}</li>;
+  }
+}