diff --git a/src/core/CubeTexture.js b/src/core/CubeTexture.js new file mode 100644 index 0000000..3f5e16b --- /dev/null +++ b/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 []; + }, +}; diff --git a/src/core/Texture.js b/src/core/Texture.js new file mode 100644 index 0000000..e6e76bb --- /dev/null +++ b/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 []; + }, +}; diff --git a/src/core/index.js b/src/core/index.js index 1574d00..955bf61 100644 --- a/src/core/index.js +++ b/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'; diff --git a/src/materials/EnvMap.js b/src/materials/EnvMap.js new file mode 100644 index 0000000..bdc9359 --- /dev/null +++ b/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', +}; diff --git a/src/materials/Map.js b/src/materials/Map.js new file mode 100644 index 0000000..c45e851 --- /dev/null +++ b/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', +}; diff --git a/src/materials/Material.js b/src/materials/Material.js index 18dc175..ed47dba 100644 --- a/src/materials/Material.js +++ b/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', diff --git a/src/plugin.js b/src/plugin.js index a63bb3d..001634f 100644 --- a/src/plugin.js +++ b/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',