add map and envmap

src/core/CubeTexture.js

@@ -0,0 +1,34 @@
+import { CubeTextureLoader } from 'three';
+// import { watch } from 'vue';
+
+export default {
+  inject: ['three'],
+  emits: ['loaded'],
+  props: {
+    path: String,
+    urls: {
+      type: Array,
+      default: ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'],
+    },
+    onLoad: Function,
+    onProgress: Function,
+    onError: Function,
+  },
+  created() {
+    this.texture = new CubeTextureLoader()
+      .setPath(this.path)
+      .load(this.urls, this.onLoaded, this.onProgress, this.onError);
+  },
+  unmounted() {
+    this.texture.dispose();
+  },
+  methods: {
+    onLoaded() {
+      if (this.onLoad) this.onLoad();
+      this.$emit('loaded');
+    },
+  },
+  render() {
+    return [];
+  },
+};

src/core/Texture.js

@@ -0,0 +1,28 @@
+import { TextureLoader } from 'three';
+// import { watch } from 'vue';
+
+export default {
+  inject: ['three'],
+  emits: ['loaded'],
+  props: {
+    src: String,
+    onLoad: Function,
+    onProgress: Function,
+    onError: Function,
+  },
+  created() {
+    this.texture = new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError);
+  },
+  unmounted() {
+    this.texture.dispose();
+  },
+  methods: {
+    onLoaded() {
+      if (this.onLoad) this.onLoad();
+      this.$emit('loaded');
+    },
+  },
+  render() {
+    return [];
+  },
+};

src/core/index.js

@@ -2,3 +2,6 @@ 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/EnvMap.js

@@ -0,0 +1,13 @@
+import CubeTexture from '../core/CubeTexture';
+
+export default {
+  extends: CubeTexture,
+  inject: ['material'],
+  created() {
+    this.material.setEnvMap(this.texture);
+  },
+  unmounted() {
+    this.material.setEnvMap(null);
+  },
+  __hmrId: 'EnvMap',
+};

src/materials/Map.js

@@ -0,0 +1,15 @@
+import Texture from '../core/Texture';
+
+export default {
+  extends: Texture,
+  inject: ['material'],
+  created() {
+    this.material.setMap(this.texture);
+  },
+  unmounted() {
+    this.material.setMap(null);
+  },
+  methods: {
+  },
+  __hmrId: 'Map',
+};

src/materials/Material.js

@@ -15,6 +15,11 @@ export default {
     transparent: Boolean,
     vertexColors: Boolean,
   },
+  provide() {
+    return {
+      material: this,
+    };
+  },
   beforeMount() {
     this.createMaterial();
     if (this.id) this.three.materials[this.id] = this.material;
@@ -29,6 +34,14 @@ export default {
     if (this.id) delete this.three.materials[this.id];
   },
   methods: {
+    setMap(texture) {
+      this.material.map = texture;
+      this.material.needsUpdate = true;
+    },
+    setEnvMap(texture) {
+      this.material.envMap = texture;
+      this.material.needsUpdate = true;
+    },
     _addWatchers() {
       // don't work for flatShading
       ['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'side', 'transparent'].forEach(p => {
@@ -43,6 +56,9 @@ export default {
     },
   },
   render() {
+    if (this.$slots.default) {
+      return this.$slots.default();
+    }
     return [];
   },
   __hmrId: 'Material',

src/plugin.js

@@ -7,6 +7,8 @@ export const TroisJSVuePlugin = {
       'PerspectiveCamera',
       'Renderer',
       'Scene',
+      // 'Texture',
+      // 'CubeTexture',
 
       'BoxGeometry',
       'CircleGeometry',
@@ -38,6 +40,9 @@ export const TroisJSVuePlugin = {
       'SubSurfaceMaterial',
       'ToonMaterial',
 
+      'Map',
+      'EnvMap',
+
       'Box',
       'Circle',
       'Cone',