camera hmr

src/core/PerspectiveCamera.js

@@ -1,32 +1,42 @@
 import { PerspectiveCamera, Vector3 } from 'three';
-import { setFromProp } from '../tools.js';
+import { toRef, watch } from 'vue';
+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 },
     },
   },
-  watch: {
-    fov() {
-      this.camera.fov = this.fov;
-    },
-    position: {
-      deep: true,
-      handler() {
-        setFromProp(this.camera.position, this.position);
-      },
-    },
-  },
   created() {
-    this.camera = new PerspectiveCamera(this.fov);
+    this.camera = new PerspectiveCamera(this.fov, this.aspect, this.near, this.far);
-    setFromProp(this.camera.position, this.position);
+    useBindProp(this, 'position', this.camera.position);
+
+    ['aspect', 'far', 'fov', 'near'].forEach(p => {
+      watch(() => this[p], () => {
+        this.camera[p] = this[p];
+        this.camera.updateProjectionMatrix();
+      });
+    });
+
     this.three.camera = this.camera;
   },
   render() {