From 7b7524d1ddbe81c41e36520d1e8f4cd96c6970de Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Sun, 4 Oct 2020 14:00:07 +0200
Subject: [PATCH] textures refactoring

---
 src/core/index.js                      |  3 ---
 src/{core => materials}/CubeTexture.js | 14 +++++++++++---
 src/materials/EnvMap.js                | 19 -------------------
 src/materials/Material.js              | 15 +++++----------
 src/{core => materials}/Texture.js     |  6 ++++--
 src/materials/index.js                 |  6 +++---
 src/plugin.js                          |  7 ++-----
 7 files changed, 25 insertions(+), 45 deletions(-)
 rename src/{core => materials}/CubeTexture.js (64%)
 delete mode 100644 src/materials/EnvMap.js
 rename src/{core => materials}/Texture.js (81%)

diff --git a/src/core/index.js b/src/core/index.js
index 955bf61..1574d00 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -2,6 +2,3 @@ export { default as Renderer } from './Renderer.js';
 export { default as PerspectiveCamera } from './PerspectiveCamera.js';
 export { default as Camera } from './PerspectiveCamera.js';
 export { default as Scene } from './Scene.js';
-
-export { default as Texture } from './Texture.js';
-export { default as CubeTexture } from './CubeTexture.js';
diff --git a/src/core/CubeTexture.js b/src/materials/CubeTexture.js
similarity index 64%
rename from src/core/CubeTexture.js
rename to src/materials/CubeTexture.js
index 96cd560..352396f 100644
--- a/src/core/CubeTexture.js
+++ b/src/materials/CubeTexture.js
@@ -1,8 +1,8 @@
-import { CubeTextureLoader } from 'three';
+import { CubeTextureLoader, CubeRefractionMapping } from 'three';
 import { watch } from 'vue';
 
 export default {
-  inject: ['three'],
+  inject: ['material'],
   emits: ['loaded'],
   props: {
     path: String,
@@ -13,9 +13,12 @@ export default {
     onLoad: Function,
     onProgress: Function,
     onError: Function,
+    id: { type: String, default: 'envMap' },
+    refraction: Boolean,
+    refractionRatio: { type: Number, default: 0.98 },
   },
   created() {
-    this.createTexture();
+    this.refreshTexture();
     watch(() => this.path, this.refreshTexture);
     watch(() => this.urls, this.refreshTexture);
   },
@@ -30,6 +33,11 @@ export default {
     },
     refreshTexture() {
       this.createTexture();
+      this.material.setTexture(this.texture, this.id);
+      if (this.refraction) {
+        this.texture.mapping = CubeRefractionMapping;
+        this.material.setProp('refractionRatio', this.refractionRatio);
+      }
     },
     onLoaded() {
       if (this.onLoad) this.onLoad();
diff --git a/src/materials/EnvMap.js b/src/materials/EnvMap.js
deleted file mode 100644
index 699a0b8..0000000
--- a/src/materials/EnvMap.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import CubeTexture from '../core/CubeTexture';
-
-export default {
-  extends: CubeTexture,
-  inject: ['material'],
-  created() {
-    this.material.setEnvMap(this.texture);
-  },
-  unmounted() {
-    this.material.setEnvMap(null);
-  },
-  methods: {
-    refreshTexture() {
-      this.createTexture();
-      this.material.setEnvMap(this.texture);
-    },
-  },
-  __hmrId: 'EnvMap',
-};
diff --git a/src/materials/Material.js b/src/materials/Material.js
index 9cbaaed..ed09ad0 100644
--- a/src/materials/Material.js
+++ b/src/materials/Material.js
@@ -34,17 +34,12 @@ export default {
     if (this.id) delete this.three.materials[this.id];
   },
   methods: {
-    setMap(texture) {
-      this.material.map = texture;
-      this.material.needsUpdate = true;
+    setProp(key, value, needsUpdate = false) {
+      this.material[key] = value;
+      this.material.needsUpdate = needsUpdate;
     },
-    setEnvMap(texture) {
-      this.material.envMap = texture;
-      this.material.needsUpdate = true;
-    },
-    setRefractionMap(texture, ratio) {
-      this.material.refractionRatio = ratio;
-      this.setEnvMap(texture);
+    setTexture(texture, key = 'map') {
+      this.setProp(key, texture, true);
     },
     _addWatchers() {
       // don't work for flatShading
diff --git a/src/core/Texture.js b/src/materials/Texture.js
similarity index 81%
rename from src/core/Texture.js
rename to src/materials/Texture.js
index 6adf560..62359ff 100644
--- a/src/core/Texture.js
+++ b/src/materials/Texture.js
@@ -2,16 +2,17 @@ import { TextureLoader } from 'three';
 import { watch } from 'vue';
 
 export default {
-  inject: ['three'],
+  inject: ['material'],
   emits: ['loaded'],
   props: {
     src: String,
     onLoad: Function,
     onProgress: Function,
     onError: Function,
+    id: { type: String, default: 'map' },
   },
   created() {
-    this.createTexture();
+    this.refreshTexture();
     watch(() => this.src, this.refreshTexture);
   },
   unmounted() {
@@ -23,6 +24,7 @@ export default {
     },
     refreshTexture() {
       this.createTexture();
+      this.material.setTexture(this.texture, this.id);
     },
     onLoaded() {
       if (this.onLoad) this.onLoad();
diff --git a/src/materials/index.js b/src/materials/index.js
index d8b2624..87719ac 100644
--- a/src/materials/index.js
+++ b/src/materials/index.js
@@ -7,6 +7,6 @@ export { default as StandardMaterial } from './StandardMaterial.js';
 export { default as SubSurfaceMaterial } from './SubSurfaceMaterial.js';
 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';
+
+export { default as Texture } from './Texture.js';
+export { default as CubeTexture } from './CubeTexture.js';
diff --git a/src/plugin.js b/src/plugin.js
index 5b9044c..59045af 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -7,8 +7,6 @@ export const TroisJSVuePlugin = {
       'PerspectiveCamera',
       'Renderer',
       'Scene',
-      // 'Texture',
-      // 'CubeTexture',
 
       'BoxGeometry',
       'CircleGeometry',
@@ -41,9 +39,8 @@ export const TroisJSVuePlugin = {
       'SubSurfaceMaterial',
       'ToonMaterial',
 
-      'Map',
-      'EnvMap',
-      'RefractionMap',
+      'Texture',
+      'CubeTexture',
 
       'Box',
       'Circle',