textures refactoring

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';

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();

src/materials/EnvMap.js

@@ -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',
-};

src/materials/Material.js

@@ -34,17 +34,12 @@ export default {
     if (this.id) delete this.three.materials[this.id];
   },
   methods: {
-    setMap(texture) {
+    setProp(key, value, needsUpdate = false) {
-      this.material.map = texture;
+      this.material[key] = value;
-      this.material.needsUpdate = true;
+      this.material.needsUpdate = needsUpdate;
     },
-    setEnvMap(texture) {
+    setTexture(texture, key = 'map') {
-      this.material.envMap = texture;
+      this.setProp(key, texture, true);
-      this.material.needsUpdate = true;
-    },
-    setRefractionMap(texture, ratio) {
-      this.material.refractionRatio = ratio;
-      this.setEnvMap(texture);
     },
     _addWatchers() {
       // don't work for flatShading

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();

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 Texture } from './Texture.js';
-export { default as RefractionMap } from './RefractionMap.js';
+export { default as CubeTexture } from './CubeTexture.js';

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',
+      'Texture',
-      'EnvMap',
+      'CubeTexture',
-      'RefractionMap',
 
       'Box',
       'Circle',