From 19eaa22fc53742673c4ed3b75ab98447d9051509 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Mon, 3 May 2021 23:11:59 +0200
Subject: [PATCH] simplify textures

---
 src/materials/CubeTexture.ts |  6 +++---
 src/materials/Texture.ts     | 42 +++++++++++++++---------------------
 2 files changed, 20 insertions(+), 28 deletions(-)

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<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)
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<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)
+    },
+    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)