add refraction mesh

src/meshes/RefractionMesh.js

@@ -0,0 +1,46 @@
+import {
+  CubeCamera,
+  CubeRefractionMapping,
+  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 },
+    cubeRTAutoUpdate: Boolean,
+  },
+  mounted() {
+    this.initMirrorMesh();
+    if (this.cubeRTAutoUpdate) this.three.onBeforeRender(this.updateCubeRT);
+    else this.rendererComponent.onMounted(this.updateCubeRT);
+  },
+  unmounted() {
+    this.three.offBeforeRender(this.updateCubeRT);
+  },
+  methods: {
+    initMirrorMesh() {
+      const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { mapping: CubeRefractionMapping, 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.refractionRatio = 0.95;
+      this.material.needsUpdate = true;
+    },
+    updateCubeRT() {
+      this.mesh.visible = false;
+      this.cubeCamera.update(this.three.renderer, this.scene);
+      this.mesh.visible = true;
+    },
+  },
+  __hmrId: 'RefractionMesh',
+};

src/meshes/index.js

@@ -22,4 +22,5 @@ export { default as Gem } from './Gem.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 RefractionMesh } from './RefractionMesh.js';
 export { default as Sprite } from './Sprite.js';

src/plugin.js

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