add grid and axes helper components

increment package version

Author: Sascha Braun

jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
   },
   snapshotSerializers: ["jest-serializer-vue"],
   testMatch: [
-    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
+    "**/tests/unit/**/*.spec.(ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
   ],
   testURL: "http://localhost/"
 };

package.json

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

samples/views/Demo.vue

@@ -26,20 +26,23 @@
 
           <fog exp2/>
 
-          <camera name="mainCamera" :factory="cameraFactory">
+          <camera :factory="cameraFactory">
             <position :value="scene1.camera.position"/>
             <rotation :value="scene1.camera.rotation" rad/>
 
             <my-behaviour :data="scene1.camera"/>
           </camera>
 
-          <light name="light" :factory="lightFactory">
+          <light name="sun" :factory="lightFactory">
             <position :value="{x: 0, y: 10, z: 0}"/>
             <shadows cast/>
           </light>
 
-          <group name="group">
-            <position :value="{ x: 0, y: 0, z: 0 }"/>
+          <grid/>
+          <axes/>
+
+          <group>
+            <position :value="{ x: 0, y: -1, z: 0 }"/>
 
             <mesh name="waterPlane" geometry="plane" material="waterMat">
               <rotation :value="{ x: -90, y: 0, z: 0 }"/>
@@ -48,7 +51,6 @@
 
             <mesh v-for="field in scene1.fields"
               :key="field.id"
-              :name="'field-'+field.id"
               geometry="cube"
               material="cubeMat"
               >

src/components/Axes.tsx

@@ -0,0 +1,56 @@
+import * as THREE from "three";
+import { Component, Mixins, Prop, Provide } from "vue-property-decorator";
+
+import { AssetTypes, GeometryType, MaterialType } from "../types";
+import { ThreeComponent, ThreeObjectComponent, ThreeSceneComponent } from "./base";
+
+@Component
+export class Axes extends Mixins(
+  ThreeComponent,
+  ThreeSceneComponent,
+  ThreeObjectComponent
+) {
+  @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(): THREE.Object3D {
+    return this.m_axes;
+  }
+
+  public async created() {
+    if (!this.scene && !this.object) {
+      throw new Error(
+        "Grid component can only be added as child to an object or mesh component"
+      );
+    }
+
+    this.m_axes = new THREE.AxesHelper(this.size);
+    this.m_axes.name = this.name;
+
+    const parent = this.object ? this.object() : this.scene();
+    parent.add(this.m_axes);
+
+    this.m_created = true;
+  }
+
+  public beforeDestroy() {
+    const parent = this.object ? this.object() : this.scene();
+    parent.remove(this.m_axes);
+  }
+
+  public render(h: any) {
+    if (!this.m_created) {
+      return null;
+    }
+    return <div>{this.$slots.default}</div>;
+  }
+}

src/components/Grid.tsx

@@ -0,0 +1,59 @@
+import * as THREE from "three";
+import { Component, Mixins, Prop, Provide } from "vue-property-decorator";
+
+import { AssetTypes, GeometryType, MaterialType } from "../types";
+import { ThreeComponent, ThreeObjectComponent, ThreeSceneComponent } from "./base";
+
+@Component
+export class Grid extends Mixins(
+  ThreeComponent,
+  ThreeSceneComponent,
+  ThreeObjectComponent
+) {
+  @Prop({ type: String, default: "" })
+  private name!: string;
+
+  @Prop({ type: Number, default: 10 })
+  private size!: number;
+
+  @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() {
+    if (!this.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() : this.scene();
+    parent.add(this.m_grid);
+
+    this.m_created = true;
+  }
+
+  public beforeDestroy() {
+    const parent = this.object ? this.object() : this.scene();
+    parent.remove(this.m_grid);
+  }
+
+  public render(h: any) {
+    if (!this.m_created) {
+      return null;
+    }
+    return <div>{this.$slots.default}</div>;
+  }
+}

src/components/index.ts

@@ -8,5 +8,7 @@ export * from "./Camera";
 export * from "./Light";
 export * from "./Fog";
 export * from "./Group";
+export * from "./Grid";
+export * from "./Axes";
 
 export * from "./properties";