From 5e70d3d69a254b5a6329e951346ccf9d195f0cae Mon Sep 17 00:00:00 2001
From: Paul Graffam <paul.graffam@isobar.com>
Date: Mon, 6 Jul 2020 17:23:21 -0400
Subject: [PATCH] Moved to components

---
 src/js/app/components/animation.js | 27 ++++++++++++++++++++
 src/js/app/components/geometry.js  | 41 ++++++++++++++++++++++++++++++
 src/js/app/components/material.js  | 22 ++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 src/js/app/components/animation.js
 create mode 100644 src/js/app/components/geometry.js
 create mode 100644 src/js/app/components/material.js

diff --git a/src/js/app/components/animation.js b/src/js/app/components/animation.js
new file mode 100644
index 0000000..0caaed5
--- /dev/null
+++ b/src/js/app/components/animation.js
@@ -0,0 +1,27 @@
+import * as THREE from 'three';
+
+export default class Animation {
+  constructor(obj, clip) {
+    // Scene that the clip will be applied to
+    this.obj = obj;
+
+    // Initialize animation mixer
+    this.mixer = new THREE.AnimationMixer(this.obj);
+
+    // Simple animation player
+    this.playClip(clip);
+  }
+
+  playClip(clip) {
+    this.action = this.mixer.clipAction(clip);
+
+    this.action.play();
+  }
+
+  // Call update in loop
+  update(delta) {
+    if(this.mixer) {
+      this.mixer.update(delta);
+    }
+  }
+}
diff --git a/src/js/app/components/geometry.js b/src/js/app/components/geometry.js
new file mode 100644
index 0000000..a403144
--- /dev/null
+++ b/src/js/app/components/geometry.js
@@ -0,0 +1,41 @@
+import * as THREE from 'three';
+
+import Material from './material';
+import Config from '../../data/config';
+
+// This helper class can be used to create and then place geometry in the scene
+export default class Geometry {
+  constructor(scene) {
+    this.scene = scene;
+    this.geo = null;
+  }
+
+  make(type) {
+    if(type === 'plane') {
+      return (width, height, widthSegments = 1, heightSegments = 1) => {
+        this.geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
+      };
+    }
+
+    if(type === 'sphere') {
+      return (radius, widthSegments = 32, heightSegments = 32) => {
+        this.geo = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
+      };
+    }
+  }
+
+  place(position, rotation) {
+    const material = new Material(0xeeeeee).standard;
+    const mesh = new THREE.Mesh(this.geo, material);
+
+    // Use ES6 spread to set position and rotation from passed in array
+    mesh.position.set(...position);
+    mesh.rotation.set(...rotation);
+
+    if(Config.shadow.enabled) {
+      mesh.receiveShadow = true;
+    }
+
+    this.scene.add(mesh);
+  }
+}
diff --git a/src/js/app/components/material.js b/src/js/app/components/material.js
new file mode 100644
index 0000000..64c799d
--- /dev/null
+++ b/src/js/app/components/material.js
@@ -0,0 +1,22 @@
+import * as THREE from 'three';
+
+// USe this class as a helper to set up some default materials
+export default class Material {
+  constructor(color) {
+    this.basic = new THREE.MeshBasicMaterial({
+      color,
+      side: THREE.DoubleSide
+    });
+
+    this.standard = new THREE.MeshStandardMaterial({
+      color,
+      shading: THREE.FlatShading,
+      roughness: 1,
+      metalness: 0,
+      side: THREE.DoubleSide
+    });
+
+    this.wire = new THREE.MeshBasicMaterial({wireframe: true});
+  }
+}
+