From 50af37552bbc3d45d11bd714ef5b298a88a0cae8 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Wed, 7 Oct 2020 23:38:39 +0200
Subject: [PATCH] update camera

---
 src/core/OrthographicCamera.js | 34 ++++++++++++++++++++++++++++++++++
 src/core/PerspectiveCamera.js  | 25 +++++--------------------
 2 files changed, 39 insertions(+), 20 deletions(-)
 create mode 100644 src/core/OrthographicCamera.js

diff --git a/src/core/OrthographicCamera.js b/src/core/OrthographicCamera.js
new file mode 100644
index 0000000..e433678
--- /dev/null
+++ b/src/core/OrthographicCamera.js
@@ -0,0 +1,34 @@
+import { OrthographicCamera, Vector3 } from 'three';
+import { watch } from 'vue';
+import useBindProp from '../use/useBindProp.js';
+
+export default {
+  inject: ['three'],
+  props: {
+    left: { type: Number, default: -1 },
+    right: { type: Number, default: 1 },
+    top: { type: Number, default: 1 },
+    bottom: { type: Number, default: -1 },
+    near: { type: Number, default: 0.1 },
+    far: { type: Number, default: 2000 },
+    zoom: { type: Number, default: 1 },
+    position: { type: [Object, Vector3], default: { x: 0, y: 0, z: 0 } },
+  },
+  created() {
+    this.camera = new OrthographicCamera(this.left, this.right, this.top, this.bottom, this.near, this.far);
+    useBindProp(this, 'position', this.camera.position);
+
+    ['left', 'right', 'top', 'bottom', 'near', 'far', 'zoom'].forEach(p => {
+      watch(() => this[p], () => {
+        this.camera[p] = this[p];
+        this.camera.updateProjectionMatrix();
+      });
+    });
+
+    this.three.camera = this.camera;
+  },
+  render() {
+    return [];
+  },
+  __hmrId: 'OrthographicCamera',
+};
diff --git a/src/core/PerspectiveCamera.js b/src/core/PerspectiveCamera.js
index 1354775..2806c17 100644
--- a/src/core/PerspectiveCamera.js
+++ b/src/core/PerspectiveCamera.js
@@ -5,26 +5,11 @@ import useBindProp from '../use/useBindProp.js';
 export default {
   inject: ['three'],
   props: {
-    aspect: {
-      type: Number,
-      default: 1,
-    },
-    far: {
-      type: Number,
-      default: 2000,
-    },
-    fov: {
-      type: Number,
-      default: 50,
-    },
-    near: {
-      type: Number,
-      default: 0.1,
-    },
-    position: {
-      type: [Object, Vector3],
-      default: { x: 0, y: 0, z: 0 },
-    },
+    aspect: { type: Number, default: 1 },
+    far: { type: Number, default: 2000 },
+    fov: { type: Number, default: 50 },
+    near: { type: Number, default: 0.1 },
+    position: { type: [Object, Vector3], default: { x: 0, y: 0, z: 0 } },
   },
   created() {
     this.camera = new PerspectiveCamera(this.fov, this.aspect, this.near, this.far);