wip

src/components/noisy/NoisyImage.js

@@ -28,10 +28,11 @@ export default {
     };
   },
   mounted() {
-    const startTime = Date.now();
-    this.three.onBeforeRender(() => {
-      this.uTime.value = (Date.now() - startTime) * this.timeCoef;
-    });
+    this.startTime = Date.now();
+    this.three.onBeforeRender(this.updateTime);
+  },
+  unmounted() {
+    this.three.offBeforeRender(this.updateTime);
   },
   methods: {
     createGeometry() {
@@ -80,6 +81,9 @@ export default {
         this.materialShader = shader;
       };
     },
+    updateTime() {
+      this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
+    },
   },
   __hmrId: 'NoisyImage',
 };

src/components/noisy/NoisyPlane.js

@@ -23,10 +23,11 @@ export default {
   },
   mounted() {
     this.updateMaterial();
-    const startTime = Date.now();
-    this.three.onBeforeRender(() => {
-      this.uTime.value = (Date.now() - startTime) * this.timeCoef;
-    });
+    this.startTime = Date.now();
+    this.three.onBeforeRender(this.updateTime);
+  },
+  unmounted() {
+    this.three.offBeforeRender(this.updateTime);
   },
   methods: {
     updateMaterial() {
@@ -55,6 +56,9 @@ export default {
       };
       this.material.needsupdate = true;
     },
+    updateTime() {
+      this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
+    },
   },
   __hmrId: 'NoisyPlane',
 };

src/components/noisy/NoisySphere.js

@@ -27,10 +27,11 @@ export default {
   mounted() {
     this.updateMaterial();
 
-    const startTime = Date.now();
-    this.three.onBeforeRender(() => {
-      this.uTime.value = (Date.now() - startTime) * this.timeCoef;
-    });
+    this.startTime = Date.now();
+    this.three.onBeforeRender(this.updateTime);
+  },
+  unmounted() {
+    this.three.offBeforeRender(this.updateTime);
   },
   methods: {
     updateMaterial() {
@@ -59,6 +60,9 @@ export default {
       };
       this.material.needsupdate = true;
     },
+    updateTime() {
+      this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
+    },
   },
   __hmrId: 'NoisySphere',
 };

src/components/noisy/NoisyText.js

@@ -24,10 +24,11 @@ export default {
   mounted() {
     this.updateMaterial();
 
-    const startTime = Date.now();
-    this.three.onBeforeRender(() => {
-      this.uTime.value = (Date.now() - startTime) * this.timeCoef;
-    });
+    this.startTime = Date.now();
+    this.three.onBeforeRender(this.updateTime);
+  },
+  unmounted() {
+    this.three.offBeforeRender(this.updateTime);
   },
   methods: {
     updateMaterial() {
@@ -56,6 +57,9 @@ export default {
       };
       this.material.needsupdate = true;
     },
+    updateTime() {
+      this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
+    },
   },
   __hmrId: 'NoisyText',
 };

src/core/useThree.js

@@ -34,9 +34,9 @@ export default function useThree() {
   };
 
   // handlers
-  const afterInitHandlers = [];
-  const afterResizeHandlers = [];
-  const beforeRenderHandlers = [];
+  let afterInitHandlers = [];
+  let afterResizeHandlers = [];
+  let beforeRenderHandlers = [];
 
   // mouse tracking
   const mouse = new Vector2();
@@ -60,8 +60,8 @@ export default function useThree() {
     renderC,
     setSize,
     onAfterInit,
-    onAfterResize,
-    onBeforeRender,
+    onAfterResize, offAfterResize,
+    onBeforeRender, offBeforeRender,
   };
 
   /**
@@ -119,26 +119,40 @@ export default function useThree() {
   };
 
   /**
-   * add after init handler
+   * add after init callback
    */
   function onAfterInit(callback) {
     afterInitHandlers.push(callback);
   }
 
   /**
-   * add after resize handler
+   * add after resize callback
    */
   function onAfterResize(callback) {
     afterResizeHandlers.push(callback);
   }
 
   /**
-   * add before render handler
+   * remove after resize callback
+   */
+  function offAfterResize(callback) {
+    afterResizeHandlers = afterResizeHandlers.filter(c => c !== callback);
+  }
+
+  /**
+   * add before render callback
    */
   function onBeforeRender(callback) {
     beforeRenderHandlers.push(callback);
   }
 
+  /**
+   * remove before render callback
+   */
+  function offBeforeRender(callback) {
+    beforeRenderHandlers = beforeRenderHandlers.filter(c => c !== callback);
+  }
+
   /**
    * default render
    */
@@ -161,7 +175,7 @@ export default function useThree() {
    * remove listeners
    */
   function dispose() {
-    beforeRenderHandlers.splice(0);
+    beforeRenderHandlers = [];
     window.removeEventListener('resize', onResize);
     if (obj.mouse_move_element) {
       obj.mouse_move_element.removeEventListener('mousemove', onMousemove);

src/meshes/MirrorMesh.js

@@ -0,0 +1,43 @@
+import {
+  CubeCamera,
+  LinearMipmapLinearFilter,
+  RGBFormat,
+  WebGLCubeRenderTarget,
+} from 'three';
+// import { watch } from 'vue';
+import Mesh from './Mesh.js';
+import useBindProp from '../use/useBindProp.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    cubeRTSize: { type: Number, default: 512 },
+    cubeCameraNear: { type: Number, default: 0.1 },
+    cubeCameraFar: { type: Number, default: 2000 },
+  },
+  mounted() {
+    this.initMirrorMesh();
+    this.three.onBeforeRender(this.upateCubeRT);
+  },
+  unmounted() {
+    this.three.offBeforeRender(this.upateCubeRT);
+  },
+  methods: {
+    initMirrorMesh() {
+      const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
+      this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT);
+      useBindProp(this, 'position', this.cubeCamera.position);
+      this.scene.add(this.cubeCamera);
+
+      this.material.envMap = cubeRT.texture;
+      this.material.needsUpdate = true;
+    },
+    upateCubeRT() {
+      this.mesh.visible = false;
+      this.cubeCamera.update(this.three.renderer, this.scene);
+      this.mesh.visible = true;
+      console.log('upateCubeRT');
+    },
+  },
+  __hmrId: 'MirrorMesh',
+};

src/meshes/Torus.js

@@ -5,7 +5,7 @@ import Mesh from './Mesh.js';
 export default {
   extends: Mesh,
   props: {
-    radius: { type: Number, default: 1 },
+    radius: { type: Number, default: 0.5 },
     tube: { type: Number, default: 0.4 },
     radialSegments: { type: Number, default: 8 },
     tubularSegments: { type: Number, default: 6 },

src/meshes/TorusKnot.js

@@ -5,7 +5,7 @@ import Mesh from './Mesh.js';
 export default {
   extends: Mesh,
   props: {
-    radius: { type: Number, default: 1 },
+    radius: { type: Number, default: 0.5 },
     tube: { type: Number, default: 0.4 },
     radialSegments: { type: Number, default: 64 },
     tubularSegments: { type: Number, default: 8 },

src/meshes/index.js

@@ -20,4 +20,5 @@ export { default as Tube } from './Tube.js';
 
 export { default as Image } from './Image.js';
 export { default as InstancedMesh } from './InstancedMesh.js';
+export { default as MirrorMesh } from './MirrorMesh.js';
 export { default as Sprite } from './Sprite.js';

src/plugin.js

@@ -58,6 +58,7 @@ export const TroisJSVuePlugin = {
 
       'Image',
       'InstancedMesh',
+      'MirrorMesh',
       'Sprite',
 
       'BokehPass',