wip

src/materials/Material.js

@@ -42,6 +42,10 @@ export default {
       this.material.envMap = texture;
       this.material.needsUpdate = true;
     },
+    setRefractionMap(texture, ratio) {
+      this.material.refractionRatio = ratio;
+      this.setEnvMap(texture);
+    },
     _addWatchers() {
       // don't work for flatShading
       ['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'side', 'transparent'].forEach(p => {

src/materials/RefractionMap.js

@@ -0,0 +1,24 @@
+import { CubeRefractionMapping } from 'three';
+import CubeTexture from '../core/CubeTexture';
+
+export default {
+  extends: CubeTexture,
+  inject: ['material'],
+  props: {
+    refractionRatio: { type: Number, default: 0.98 },
+  },
+  created() {
+    this.texture.mapping = CubeRefractionMapping;
+    this.material.setRefractionMap(this.texture, this.refractionRatio);
+  },
+  unmounted() {
+    this.material.setEnvMap(null);
+  },
+  methods: {
+    refreshTexture() {
+      this.createTexture();
+      this.material.setRefractionMap(this.texture, this.refractionRatio);
+    },
+  },
+  __hmrId: 'RefractionMap',
+};

src/materials/index.js

@@ -8,3 +8,4 @@ export { default as ToonMaterial } from './ToonMaterial.js';
 
 export { default as Map } from './Map.js';
 export { default as EnvMap } from './EnvMap.js';
+export { default as RefractionMap } from './RefractionMap.js';

src/meshes/Gem.js

@@ -14,7 +14,7 @@ import useBindProp from '../use/useBindProp.js';
 export default {
   extends: Mesh,
   props: {
-    cubeRTSize: { type: Number, default: 512 },
+    cubeRTSize: { type: Number, default: 256 },
     cubeCameraNear: { type: Number, default: 0.1 },
     cubeCameraFar: { type: Number, default: 2000 },
     autoUpdate: Boolean,

src/meshes/MirrorMesh.js

@@ -11,7 +11,7 @@ import useBindProp from '../use/useBindProp.js';
 export default {
   extends: Mesh,
   props: {
-    cubeRTSize: { type: Number, default: 512 },
+    cubeRTSize: { type: Number, default: 256 },
     cubeCameraNear: { type: Number, default: 0.1 },
     cubeCameraFar: { type: Number, default: 2000 },
     autoUpdate: Boolean,

src/meshes/RefractionMesh.js

@@ -12,9 +12,10 @@ import useBindProp from '../use/useBindProp.js';
 export default {
   extends: Mesh,
   props: {
-    cubeRTSize: { type: Number, default: 512 },
+    cubeRTSize: { type: Number, default: 256 },
     cubeCameraNear: { type: Number, default: 0.1 },
     cubeCameraFar: { type: Number, default: 2000 },
+    refractionRatio: { type: Number, default: 0.98 },
     autoUpdate: Boolean,
   },
   mounted() {
@@ -33,7 +34,7 @@ export default {
       this.scene.add(this.cubeCamera);
 
       this.material.envMap = cubeRT.texture;
-      this.material.refractionRatio = 0.95;
+      this.material.refractionRatio = this.refractionRatio;
       this.material.needsUpdate = true;
     },
     updateCubeRT() {