From 1da2a90c675b37e18b356d055fcf617d88af4229 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Mon, 19 Apr 2021 23:46:31 +0200 Subject: [PATCH] wip: materials --- src/materials/CubeTexture.ts | 2 +- src/materials/PhongMaterial.ts | 2 + src/materials/SubSurfaceMaterial.ts | 93 +++++++---------------------- src/materials/Texture.ts | 9 +-- 4 files changed, 26 insertions(+), 80 deletions(-) diff --git a/src/materials/CubeTexture.ts b/src/materials/CubeTexture.ts index 504aad3..cbd903b 100644 --- a/src/materials/CubeTexture.ts +++ b/src/materials/CubeTexture.ts @@ -10,7 +10,7 @@ export default defineComponent({ type: Array as PropType, 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() { diff --git a/src/materials/PhongMaterial.ts b/src/materials/PhongMaterial.ts index 2abcc87..51b7a4d 100644 --- a/src/materials/PhongMaterial.ts +++ b/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 } }) diff --git a/src/materials/SubSurfaceMaterial.ts b/src/materials/SubSurfaceMaterial.ts index 3b30842..c6eb7cf 100644 --- a/src/materials/SubSurfaceMaterial.ts +++ b/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: { - 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 }, - }, + props, 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)) { - // console.log(_key) - // uniforms[_key].value = _value - // } - // }) + Object.keys(props).forEach((key) => { + // @ts-ignore + const value = this[key] + let _key = key, _value = value + if (['color', 'thicknessColor'].includes(key)) { + if (key === 'color') _key = 'diffuse' + _value = new Color(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', -// }) diff --git a/src/materials/Texture.ts b/src/materials/Texture.ts index 73ee356..961c97d 100644 --- a/src/materials/Texture.ts +++ b/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 -// 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