diff --git a/src/materials/CubeTexture.ts b/src/materials/CubeTexture.ts index cbd903b..e5ec349 100644 --- a/src/materials/CubeTexture.ts +++ b/src/materials/CubeTexture.ts @@ -1,17 +1,17 @@ import { defineComponent, PropType, watch } from 'vue' -import { CubeReflectionMapping, CubeTextureLoader, RGBFormat } from 'three' +import { CubeReflectionMapping, CubeTextureLoader } from 'three' import Texture from './Texture' export default defineComponent({ extends: Texture, props: { + name: { type: String, default: 'envMap' }, path: { type: String, required: true }, urls: { type: Array as PropType, default: () => ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'], }, - // format: { type: Number, default: RGBFormat }, - mapping: { type: Number, default: CubeReflectionMapping }, + props: { type: Object, default: () => ({ mapping: CubeReflectionMapping }) }, }, created() { watch(() => this.path, this.refreshTexture) diff --git a/src/materials/Texture.ts b/src/materials/Texture.ts index 9f16ecc..a73a8d7 100644 --- a/src/materials/Texture.ts +++ b/src/materials/Texture.ts @@ -1,8 +1,7 @@ import { defineComponent, PropType, watch } from 'vue' -import { ClampToEdgeWrapping, LinearEncoding, LinearFilter, LinearMipmapLinearFilter, ShaderMaterial, Texture, TextureLoader, UVMapping } from 'three' -import { bindProp } from '../tools' +import { ShaderMaterial, Texture, TextureLoader } from 'three' +import { bindOptions } from '../tools' import { MaterialInjectionKey, MaterialInterface } from './Material' -import { Vector2PropInterface } from '../core/Object3D' export interface TexureInterface { material?: MaterialInterface @@ -20,16 +19,7 @@ export default defineComponent({ onLoad: Function as PropType<(t: Texture) => void>, onProgress: Function as PropType<(e: ProgressEvent) => void>, onError: Function as PropType<(e: ErrorEvent) => void>, - encoding: { type: Number, default: LinearEncoding }, - // format: { type: Number, default: RGBAFormat }, - mapping: { type: Number, default: UVMapping }, - wrapS: { type: Number, default: ClampToEdgeWrapping }, - wrapT: { type: Number, default: ClampToEdgeWrapping }, - magFilter: { type: Number, default: LinearFilter }, - minFilter: { type: Number, default: LinearMipmapLinearFilter }, - repeat: { type: Object as PropType, default: () => ({ x: 1, y: 1 }) }, - rotation: { type: Number, default: 0 }, - center: { type: Object as PropType, default: () => ({ x: 0, y: 0 }) }, + props: { type: Object, default: () => ({}) }, }, setup(): TexureInterface { return {} @@ -45,21 +35,23 @@ export default defineComponent({ methods: { createTexture() { if (!this.src) return undefined - const texture = new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError) - // use format ? TextureLoader will automatically set format to THREE.RGBFormat for JPG images. - const wathProps = ['encoding', 'mapping', 'wrapS', 'wrapT', 'magFilter', 'minFilter', 'repeat', 'rotation', 'center'] - wathProps.forEach(prop => { bindProp(this, prop, texture) }) - return texture + return new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError) + }, + initTexture() { + if (!this.texture) return + + bindOptions(this.texture, this.props) + if (!this.material) return + + this.material.setTexture(this.texture, this.name) + if (this.material.material instanceof ShaderMaterial && this.uniform) { + (this.material as any).uniforms[this.uniform] = { value: this.texture } + } }, refreshTexture() { + this.texture?.dispose() this.texture = this.createTexture() - - if (this.texture && this.material) { - this.material.setTexture(this.texture, this.name) - if (this.material.material instanceof ShaderMaterial && this.uniform) { - (this.material as any).uniforms[this.uniform] = { value: this.texture } - } - } + this.initTexture() }, onLoaded(t: Texture) { this.onLoad?.(t)