From a66d4816b25528ad9d42459e0bb2b82f34420ca0 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sat, 3 Oct 2020 12:34:14 +0200 Subject: [PATCH] materials refactoring --- src/materials/BasicMaterial.js | 7 ++--- src/materials/LambertMaterial.js | 7 ++--- src/materials/Material.js | 36 +++++++++++++++---------- src/materials/PhongMaterial.js | 7 ++--- src/materials/PhysicalMaterial.js | 19 ++++--------- src/materials/ShaderMaterial.js | 13 +++++---- src/materials/StandardMaterial.js | 25 +++++++++-------- src/materials/SubSurfaceMaterial.js | 42 ++++++++++++++--------------- 8 files changed, 82 insertions(+), 74 deletions(-) diff --git a/src/materials/BasicMaterial.js b/src/materials/BasicMaterial.js index c9f1fb3..5008ea1 100644 --- a/src/materials/BasicMaterial.js +++ b/src/materials/BasicMaterial.js @@ -4,9 +4,10 @@ import Material from './Material'; export default { extends: Material, - setup(props) { - const material = new MeshBasicMaterial(propsValues(props, ['id'])); - return { material }; + methods: { + createMaterial() { + this.material = new MeshBasicMaterial(propsValues(this.$props, ['id'])); + }, }, __hmrId: 'BasicMaterial', }; diff --git a/src/materials/LambertMaterial.js b/src/materials/LambertMaterial.js index 3dd19c9..8680fac 100644 --- a/src/materials/LambertMaterial.js +++ b/src/materials/LambertMaterial.js @@ -4,9 +4,10 @@ import Material from './Material'; export default { extends: Material, - setup(props) { - const material = new MeshLambertMaterial(propsValues(props, ['id'])); - return { material }; + methods: { + createMaterial() { + this.material = new MeshLambertMaterial(propsValues(this.$props, ['id'])); + }, }, __hmrId: 'LambertMaterial', }; diff --git a/src/materials/Material.js b/src/materials/Material.js index 8d78995..18dc175 100644 --- a/src/materials/Material.js +++ b/src/materials/Material.js @@ -15,24 +15,32 @@ export default { transparent: Boolean, vertexColors: Boolean, }, - created() { + beforeMount() { + this.createMaterial(); if (this.id) this.three.materials[this.id] = this.material; - if (this.mesh) this.mesh.material = this.material; - - // won't work for flatShading - ['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'transparent'].forEach(p => { - watch(() => this[p], () => { - if (p === 'color') { - this.material.color = new Color(this.color); - } else { - this.material[p] = this[p]; - } - }); - }); + this.mesh.setMaterial(this.material); + }, + mounted() { + this._addWatchers(); + if (this.addWatchers) this.addWatchers(); }, unmounted() { this.material.dispose(); - delete this.three.materials[this.id]; + if (this.id) delete this.three.materials[this.id]; + }, + methods: { + _addWatchers() { + // don't work for flatShading + ['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'side', 'transparent'].forEach(p => { + watch(() => this[p], () => { + if (p === 'color') { + this.material.color.set(this.color); + } else { + this.material[p] = this[p]; + } + }); + }); + }, }, render() { return []; diff --git a/src/materials/PhongMaterial.js b/src/materials/PhongMaterial.js index c129472..c08380f 100644 --- a/src/materials/PhongMaterial.js +++ b/src/materials/PhongMaterial.js @@ -4,9 +4,10 @@ import Material from './Material'; export default { extends: Material, - setup(props) { - const material = new MeshPhongMaterial(propsValues(props, ['id'])); - return { material }; + methods: { + createMaterial() { + this.material = new MeshPhongMaterial(propsValues(this.$props, ['id'])); + }, }, __hmrId: 'PhongMaterial', }; diff --git a/src/materials/PhysicalMaterial.js b/src/materials/PhysicalMaterial.js index 6fb0cf9..394df8c 100644 --- a/src/materials/PhysicalMaterial.js +++ b/src/materials/PhysicalMaterial.js @@ -1,22 +1,13 @@ -import { Color, MeshPhysicalMaterial } from 'three'; -import { watch } from 'vue'; +import { MeshPhysicalMaterial } from 'three'; import { propsValues } from '../tools.js'; import StandardMaterial from './StandardMaterial'; export default { extends: StandardMaterial, - setup(props) { - const material = new MeshPhysicalMaterial(propsValues(props, ['id'])); - ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => { - watch(() => props[p], (value) => { - if (p === 'emissive') { - material.emissive = new Color(value); - } else { - material[p] = value; - } - }); - }); - return { material }; + methods: { + createMaterial() { + this.material = new MeshPhysicalMaterial(propsValues(this.$props, ['id'])); + }, }, __hmrId: 'PhysicalMaterial', }; diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js index 765b2e4..b2e6da2 100644 --- a/src/materials/ShaderMaterial.js +++ b/src/materials/ShaderMaterial.js @@ -1,19 +1,22 @@ -import { ShaderMaterial } from 'three'; - export default { - inject: ['three'], + inject: ['three', 'mesh'], props: { id: String, uniforms: Object, vertexShader: String, fragmentShader: String, }, + beforeMount() { + this.createMaterial(); + if (this.id) this.three.materials[this.id] = this.material; + this.mesh.setMaterial(this.material); + }, mounted() { - this.three.materials[this.id] = this.material; + if (this.addWatchers) this.addWatchers(); }, unmounted() { this.material.dispose(); - delete this.three.materials[this.id]; + if (this.id) delete this.three.materials[this.id]; }, render() { return []; diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js index 4abdb33..53d40cd 100644 --- a/src/materials/StandardMaterial.js +++ b/src/materials/StandardMaterial.js @@ -11,18 +11,21 @@ export default { metalness: { type: Number, default: 0 }, roughness: { type: Number, default: 1 }, }, - setup(props) { - const material = new MeshStandardMaterial(propsValues(props, ['id'])); - ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => { - watch(() => props[p], (value) => { - if (p === 'emissive') { - material.emissive = new Color(value); - } else { - material[p] = value; - } + methods: { + createMaterial() { + this.material = new MeshStandardMaterial(propsValues(this.$props, ['id'])); + }, + addWatchers() { + ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => { + watch(() => this[p], (value) => { + if (p === 'emissive') { + this.material.emissive = new Color(value); + } else { + this.material[p] = value; + } + }); }); - }); - return { material }; + }, }, __hmrId: 'StandardMaterial', }; diff --git a/src/materials/SubSurfaceMaterial.js b/src/materials/SubSurfaceMaterial.js index a204f1f..da56013 100644 --- a/src/materials/SubSurfaceMaterial.js +++ b/src/materials/SubSurfaceMaterial.js @@ -1,6 +1,6 @@ import { Color, ShaderMaterial as TShaderMaterial, UniformsUtils } from 'three'; import SubsurfaceScatteringShader from './SubsurfaceScatteringShader.js'; -import ShaderMaterial from './ShaderMaterial.js'; +import ShaderMaterial from './ShaderMaterial'; export default { extends: ShaderMaterial, @@ -16,27 +16,27 @@ export default { opacity: { type: Number, default: 1 }, vertexColors: { type: Boolean, default: false }, }, - setup(props) { - const params = SubsurfaceScatteringShader; - const uniforms = UniformsUtils.clone(params.uniforms); - Object.entries(props).forEach(([key, value]) => { - if (key === 'diffuse' || key === 'thicknessColor') { - value = new Color(value); - } - if (key !== 'id' && key !== 'transparent' && key !== 'vertexColors') { - uniforms[key].value = value; - } - }); + methods: { + createMaterial() { + const params = SubsurfaceScatteringShader; + const uniforms = UniformsUtils.clone(params.uniforms); + Object.entries(this.$props).forEach(([key, value]) => { + if (key === 'diffuse' || key === 'thicknessColor') { + value = new Color(value); + } + if (key !== 'id' && key !== 'transparent' && key !== 'vertexColors') { + uniforms[key].value = value; + } + }); - const material = new TShaderMaterial({ - ...params, - uniforms, - lights: true, - transparent: this.transparent, - vertexColors: this.vertexColors, - }); - - return { material }; + this.material = new TShaderMaterial({ + ...params, + uniforms, + lights: true, + transparent: this.transparent, + vertexColors: this.vertexColors, + }); + }, }, __hmrId: 'SubSurfaceMaterial', };