Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

simplify textures

Browse Source
This commit is contained in:
Kevin Levron 2021-05-03 23:11:59 +02:00
parent 888b9e2e8d
commit 19eaa22fc5
2 changed files with 20 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/materials/CubeTexture.ts
View File

@ -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<string[]>,
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)

36
src/materials/Texture.ts
View File

@ -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<Vector2PropInterface>, default: () => ({ x: 1, y: 1 }) },
rotation: { type: Number, default: 0 },
center: { type: Object as PropType<Vector2PropInterface>, 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)
},
refreshTexture() {
this.texture = this.createTexture()
initTexture() {
if (!this.texture) return
bindOptions(this.texture, this.props)
if (!this.material) return
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 }
}
}
},
refreshTexture() {
this.texture?.dispose()
this.texture = this.createTexture()
this.initTexture()
},
onLoaded(t: Texture) {
this.onLoad?.(t)