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

wip: materials

Browse Source
This commit is contained in:
Kevin Levron 2021-04-19 23:46:31 +02:00
parent 55da595191
commit 1da2a90c67
4 changed files with 26 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/materials/CubeTexture.ts
View File

@ -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() {

2
src/materials/PhongMaterial.ts
View File

@ -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
}
})

87
src/materials/SubSurfaceMaterial.ts
View File

@ -4,32 +4,34 @@ import SubsurfaceScatteringShader from './SubsurfaceScatteringShader'
import Material from './Material'
// import { bindProps, propsValues } from '../tools'
export default defineComponent({
extends: Material,
props: {
thicknessColor: { type: String, default: '#ffffff' },
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,
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',
// })

9
src/materials/Texture.ts
View File

@ -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