wip: materials

src/materials/CubeTexture.ts

@@ -10,7 +10,7 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       default: () => ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'],
     },
-    format: { type: Number, default: RGBFormat },
+    // format: { type: Number, default: RGBFormat },
     mapping: { type: Number, default: CubeReflectionMapping },
   },
   created() {

src/materials/PhongMaterial.ts

@@ -21,10 +21,12 @@ export default defineComponent({
       // TODO : handle flatShading ?
       const watchProps = ['emissive', 'emissiveIntensity', 'reflectivity', 'shininess', 'specular']
       watchProps.forEach(p => {
+        // @ts-ignore
         watch(() => this[p], (value) => {
           if (p === 'emissive' || p === 'specular') {
             material[p].set(value)
           } else {
+            // @ts-ignore
             material[p] = value
           }
         })

src/materials/SubSurfaceMaterial.ts

@@ -4,32 +4,34 @@ import SubsurfaceScatteringShader from './SubsurfaceScatteringShader'
 import Material from './Material'
 // import { bindProps, propsValues } from '../tools'
 
+const props = {
+  color: { type: [String, Number], default: '#ffffff' },
+  thicknessColor: { type: [String, Number], default: '#ffffff' },
+  thicknessDistortion: { type: Number, default: 0.4 },
+  thicknessAmbient: { type: Number, default: 0.01 },
+  thicknessAttenuation: { type: Number, default: 0.7 },
+  thicknessPower: { type: Number, default: 2 },
+  thicknessScale: { type: Number, default: 4 },
+}
+
 export default defineComponent({
   extends: Material,
-  props: {
+  props,
-    thicknessColor: { type: String, default: '#ffffff' },
-    thicknessDistortion: { type: Number, default: 0.4 },
-    thicknessAmbient: { type: Number, default: 0.01 },
-    thicknessAttenuation: { type: Number, default: 0.7 },
-    thicknessPower: { type: Number, default: 2 },
-    thicknessScale: { type: Number, default: 4 },
-  },
   methods: {
     createMaterial() {
       const params = SubsurfaceScatteringShader
       const uniforms = UniformsUtils.clone(params.uniforms)
 
-      // Object.entries(this.$props).forEach(([key, value]) => {
+      Object.keys(props).forEach((key) => {
-      //   let _key = key, _value = value
+        // @ts-ignore
-      //   if (['color', 'thicknessColor'].includes(key)) {
+        const value = this[key]
-      //     if (key === 'color') _key = 'diffuse'
+        let _key = key, _value = value
-      //     _value = new Color(value)
+        if (['color', 'thicknessColor'].includes(key)) {
-      //   }
+          if (key === 'color') _key = 'diffuse'
-      //   if (!['transparent', 'vertexColors'].includes(key)) {
+          _value = new Color(value)
-      //     console.log(_key)
+        }
-      //     uniforms[_key].value = _value
+        uniforms[_key].value = _value
-      //   }
+      })
-      // })
 
       const material = new ShaderMaterial({
         ...params,
@@ -44,56 +46,3 @@ export default defineComponent({
   },
   __hmrId: 'SubSurfaceMaterial',
 })
-
-
-// export default defineComponent({
-//   inject: ['three', 'mesh'],
-//   props: {
-//     color: { type: String, default: '#ffffff' },
-//     thicknessColor: { type: String, default: '#ffffff' },
-//     thicknessDistortion: { type: Number, default: 0.4 },
-//     thicknessAmbient: { type: Number, default: 0.01 },
-//     thicknessAttenuation: { type: Number, default: 0.7 },
-//     thicknessPower: { type: Number, default: 2 },
-//     thicknessScale: { type: Number, default: 4 },
-//     transparent: { type: Boolean, default: false },
-//     opacity: { type: Number, default: 1 },
-//     vertexColors: { type: Boolean, default: false },
-//   },
-//   created() {
-//     this.createMaterial()
-//     this.mesh.setMaterial(this.material)
-//   },
-//   unmounted() {
-//     this.material.dispose()
-//   },
-//   methods: {
-//     createMaterial() {
-//       const params = SubsurfaceScatteringShader
-//       const uniforms = UniformsUtils.clone(params.uniforms)
-
-//       Object.entries(this.$props).forEach(([key, value]) => {
-//         let _key = key, _value = value
-//         if (['color', 'thicknessColor'].includes(key)) {
-//           if (key === 'color') _key = 'diffuse'
-//           _value = new Color(value)
-//         }
-//         if (!['transparent', 'vertexColors'].includes(key)) {
-//           uniforms[_key].value = _value
-//         }
-//       })
-
-//       this.material = new TShaderMaterial({
-//         ...params,
-//         uniforms,
-//         lights: true,
-//         transparent: this.transparent,
-//         vertexColors: this.vertexColors,
-//       })
-//     },
-//   },
-//   render() {
-//     return []
-//   },
-//   __hmrId: 'SubSurfaceMaterial',
-// })

src/materials/Texture.ts

@@ -3,11 +3,6 @@ import { ClampToEdgeWrapping, LinearFilter, LinearMipmapLinearFilter, RGBAFormat
 import { bindProp } from '../tools'
 import { MaterialInterface } from './Material'
 
-// interface MaterialInterface {
-//   uniforms: Record<string, unknown>
-//   setTexture(t: Texture | null, k: string): void
-// }
-
 export interface TexureInterface {
   material?: MaterialInterface
   texture?: Texture
@@ -22,7 +17,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>,
-    format: { type: Number, default: RGBAFormat },
+    // format: { type: Number, default: RGBAFormat },
     mapping: { type: Number, default: UVMapping },
     wrapS: { type: Number, default: ClampToEdgeWrapping },
     wrapT: { type: Number, default: ClampToEdgeWrapping },
@@ -47,7 +42,7 @@ export default defineComponent({
     createTexture() {
       if (!this.src) return undefined
       const texture = new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError)
-      // don't use format. TextureLoader will automatically set format to THREE.RGBFormat for JPG images.
+      // use format ? TextureLoader will automatically set format to THREE.RGBFormat for JPG images.
       const wathProps = ['mapping', 'wrapS', 'wrapT', 'magFilter', 'minFilter', 'repeat', 'rotation', 'center']
       wathProps.forEach(prop => { bindProp(this, prop, texture) })
       return texture