rewrite object components for better code reusability: package size has reduced by about 30%

Author: Sascha Braun

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-threejs-composer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "build/src/index.js",
   "typings": "build/src/index.d.ts",
   "repository": "https://github.com/sascha245/vue-threejs-composer",

samples/components/behaviours/HoverBehaviour.ts

@@ -18,13 +18,13 @@ export class HoverBehaviour extends Mixins(BehaviourComponent) {
 
   public created() {
     // access app
-    const app = this.app();
+    const app = this.app;
 
     // access scene if behaviour is placed in a scene
-    const scene = this.scene();
+    const scene = this.scene;
 
     // access object if behaviour is placed in an object
-    const object = this.object!();
+    const object = this.object;
 
     this.m_originalY = this.position.y;
 
@@ -43,7 +43,7 @@ export class HoverBehaviour extends Mixins(BehaviourComponent) {
     }
   }
 
-  public beforeDestroy() {
+  public destroyed() {
     // dispose everything that needs to be disposed here
   }
 

src/components/AssetBundle.ts

@@ -26,15 +26,15 @@ export class AssetBundle extends Mixins(AppComponent) {
   private m_bundle!: BundleHandle;
 
   public mounted() {
-    this.m_bundle = this.app().assets.bundles.create(this.name);
+    this.m_bundle = this.app.assets.bundles.create(this.name);
     this.m_bundle.onLoad.on(this.onLoad);
     this.m_bundle.onUnload.on(this.onUnload);
 
     this.m_bundle.preload = this.preload;
   }
 
   public destroyed() {
-    this.app().assets.bundles.dispose(this.name);
+    this.app.assets.bundles.dispose(this.name);
   }
 
   public render(h: any) {
@@ -62,7 +62,7 @@ export class AssetBundle extends Mixins(AppComponent) {
   private getBundles(pDependencies: string | string[]): BundleHandle[] {
     const bundles: BundleHandle[] = [];
     const dependencies = stringToArray(",", pDependencies);
-    const app = this.app();
+    const app = this.app;
 
     dependencies.forEach(name => {
       const bundle = app.assets.bundles.get(name);

src/components/Axes.ts

@@ -1,53 +1,19 @@
-import { AxesHelper } from "three";
-import { Component, Mixins, Prop, Provide } from "vue-property-decorator";
+import * as THREE from "three";
+import { Component, Mixins, Prop } from "vue-property-decorator";
 
-import { ObjectComponent } from "../mixins";
+import { Entity } from "./Entity";
 
 @Component
-export class Axes extends Mixins(ObjectComponent) {
+export class Axes extends Mixins(Entity) {
   @Prop({ type: String, default: "" })
   private name!: string;
 
   @Prop({ type: Number, default: 1 })
   private size!: number;
 
-  @Provide("object")
-  private provideObject = this.getObject;
-
-  private m_axes!: THREE.AxesHelper;
-  private m_created = false;
-
-  public getObject() {
-    return this.m_axes;
-  }
-
-  public async created() {
-    const scene = this.scene() ? this.scene()!.get() : undefined;
-    if (!scene && !this.object()) {
-      throw new Error(
-        "Grid component can only be added as child to an object or mesh component"
-      );
-    }
-
-    this.m_axes = new AxesHelper(this.size);
-    this.m_axes.name = this.name;
-
-    const parent = this.object ? this.object() : scene;
-    parent!.add(this.m_axes);
-
-    this.m_created = true;
-  }
-
-  public destroyed() {
-    const scene = this.scene() ? this.scene()!.get() : undefined;
-    const parent = this.object ? this.object() : scene;
-    parent!.remove(this.m_axes);
-  }
-
-  public render(h: any) {
-    if (!this.m_created) {
-      return null;
-    }
-    return h("div", this.$slots.default);
+  protected async instantiate() {
+    const axes = new THREE.AxesHelper(this.size);
+    axes.name = this.name;
+    return axes;
   }
 }

src/components/Camera.ts

@@ -1,70 +1,29 @@
-import { Component, Mixins, Prop, Provide, Vue } from "vue-property-decorator";
+import { Component, Mixins, Prop } from "vue-property-decorator";
 
-import { CameraFactory, CameraHandle } from "../core";
-import { ObjectComponent } from "../mixins";
+import { Application, CameraFactory, CameraHandle } from "../core";
+import { Entity } from "./Entity";
 
 @Component
-export class Camera extends Mixins(ObjectComponent) {
+export class Camera extends Mixins(Entity) {
   @Prop({ required: true, type: String })
   private name!: string;
 
   @Prop({ required: true, type: Function })
   public factory!: CameraFactory;
 
-  @Provide("object")
-  public provideObject = this.getObject;
-
-  private m_active = false;
-  private m_camera!: CameraHandle;
-
-  public getObject() {
-    return this.m_camera.get();
-  }
-
-  public onActivate = async () => {
-    this.m_active = true;
-  };
-  public onDeactivate = async () => {
-    this.m_active = false;
-    await Vue.nextTick();
-  };
-
-  public async created() {
-    const app = this.app();
-    const sceneHandle = this.scene();
-    const scene = sceneHandle ? this.scene()!.get() : undefined;
-    if (!scene) {
-      throw new Error(
-        "Camera component can only be added as child to an object or scene component"
-      );
-    }
+  private m_handle!: CameraHandle;
 
+  protected async instantiate(app: Application) {
     const camera = await this.factory(app);
     camera.name = this.name;
 
-    this.m_camera = sceneHandle!.cameras.create(this.name);
-    this.m_camera.set(camera);
-    this.m_camera.onActivate.on(this.onActivate);
-    this.m_camera.onDeactivate.on(this.onDeactivate);
-
-    this.m_active = true;
-
-    const parent = this.object ? this.object() : scene;
-    parent!.add(this.m_camera.get()!);
-  }
+    this.m_handle = this.scene!.cameras.create(this.name);
+    this.m_handle.set(camera);
 
-  public destroyed() {
-    const sceneHandle = this.scene();
-    const scene = sceneHandle ? this.scene()!.get() : undefined;
-    const parent = this.object ? this.object() : scene;
-    parent!.remove(this.m_camera.get()!);
-    sceneHandle!.cameras.dispose(this.name);
+    return camera;
   }
 
-  public render(h: any) {
-    if (!this.m_active) {
-      return null;
-    }
-    return h("div", this.$slots.default);
+  protected destroy() {
+    this.scene!.cameras.dispose(this.name);
   }
 }

src/components/Entity.ts

@@ -0,0 +1,57 @@
+import { Camera, Object3D } from "three";
+import { Component, Mixins, Provide } from "vue-property-decorator";
+
+import { Application } from "../core";
+import { ObjectComponent, ObjectType } from "../mixins";
+import { Provider } from "../utils/provider";
+
+@Component
+export class Entity extends Mixins(ObjectComponent) {
+  @Provide("object")
+  public provideObject = Provider.defaultValue<ObjectType>();
+
+  private m_object!: ObjectType;
+  private m_created = false;
+
+  protected instantiate(app: Application): Promise<ObjectType> {
+    return Promise.resolve(new Object3D());
+  }
+  protected destroy() {}
+
+  private async created() {
+    const scene = this.scene ? this.scene.get() : undefined;
+    if (!scene) {
+      const message = `${
+        this.$options.name
+      } component must be placed in a scene component`;
+      throw {
+        message,
+        code: "undefined_scene"
+      };
+    }
+
+    this.m_object = await this.instantiate(this.app);
+    const parent = this.object ? this.object : scene;
+    parent!.add(this.m_object);
+
+    Provider.setValue<ObjectType>(this.provideObject, this.m_object);
+
+    this.m_created = true;
+  }
+
+  private destroyed() {
+    if (this.scene) {
+      this.destroy();
+      const scene = this.scene ? this.scene.get() : undefined;
+      const parent = this.object ? this.object : scene;
+      parent!.remove(this.m_object);
+    }
+  }
+
+  private render(h: any) {
+    if (!this.m_created) {
+      return null;
+    }
+    return h("div", this.$slots.default);
+  }
+}

src/components/Fog.ts

@@ -28,7 +28,7 @@ export class Fog extends Mixins(SceneComponent) {
 
   @Watch("exp2")
   public watchExp() {
-    const scene = this.scene() ? this.scene()!.get() : undefined;
+    const scene = this.scene ? this.scene!.get() : undefined;
     if (this.exp2) {
       this.m_fog = new ThreeFogExp2(this.color, this.density);
     } else {
@@ -59,7 +59,7 @@ export class Fog extends Mixins(SceneComponent) {
   private m_fog!: IFog;
 
   public created() {
-    const scene = this.scene() ? this.scene()!.get() : undefined;
+    const scene = this.scene ? this.scene!.get() : undefined;
     if (!scene) {
       throw new Error(
         "Fog component can only be added as a child to a scene component"
@@ -78,7 +78,7 @@ export class Fog extends Mixins(SceneComponent) {
   }
 
   public destroyed() {
-    const scene = this.scene() ? this.scene()!.get() : undefined;
+    const scene = this.scene ? this.scene!.get() : undefined;
     scene!.fog = null;
   }
 

src/components/Geometry.ts

@@ -12,18 +12,18 @@ export class Geometry extends Mixins(AssetComponent) {
   public factory!: GeometryFactory;
 
   public async created() {
-    const geometry = this.factory(this.app());
+    const geometry = this.factory(this.app);
     if (this.bundle()) {
       this.bundle()!.registerAsset(this.name, geometry);
     }
-    this.app().assets.geometries.set(this.name, geometry);
+    this.app.assets.geometries.set(this.name, geometry);
   }
 
   public async destroyed() {
     if (this.bundle()) {
       this.bundle()!.unregisterAsset(this.name);
     }
-    this.app().assets.geometries.dispose(this.name);
+    this.app.assets.geometries.dispose(this.name);
   }
 
   public render(h: any) {

src/components/Grid.ts

@@ -2,9 +2,10 @@ import * as THREE from "three";
 import { Component, Mixins, Prop, Provide } from "vue-property-decorator";
 
 import { ObjectComponent } from "../mixins";
+import { Entity } from "./Entity";
 
 @Component
-export class Grid extends Mixins(ObjectComponent) {
+export class Grid extends Mixins(Entity) {
   @Prop({ type: String, default: "" })
   private name!: string;
 
@@ -14,43 +15,9 @@ export class Grid extends Mixins(ObjectComponent) {
   @Prop({ type: Number, default: 10 })
   private divisions!: number;
 
-  @Provide("object")
-  private provideObject = this.getObject;
-
-  private m_grid!: THREE.GridHelper;
-  private m_created = false;
-
-  public getObject(): THREE.Object3D {
-    return this.m_grid;
-  }
-
-  public async created() {
-    const scene = this.scene() ? this.scene()!.get() : undefined;
-    if (!scene && !this.object()) {
-      throw new Error(
-        "Grid component can only be added as child to an object or mesh component"
-      );
-    }
-
-    this.m_grid = new THREE.GridHelper(this.size, this.divisions);
-    this.m_grid.name = this.name;
-
-    const parent = this.object ? this.object() : scene;
-    parent!.add(this.m_grid);
-
-    this.m_created = true;
-  }
-
-  public destroyed() {
-    const scene = this.scene() ? this.scene()!.get() : undefined;
-    const parent = this.object ? this.object() : scene;
-    parent!.remove(this.m_grid);
-  }
-
-  public render(h: any) {
-    if (!this.m_created) {
-      return null;
-    }
-    return h("div", this.$slots.default);
+  protected async instantiate() {
+    const grid = new THREE.GridHelper(this.size, this.divisions);
+    grid.name = this.name;
+    return grid;
   }
 }