From fb83acdc2cd0ff1a5344ac4e66c43f3b3812d921 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Thu, 1 Oct 2020 18:22:01 +0200 Subject: [PATCH] update materials --- src/materials/BasicMaterial.js | 8 ++-- src/materials/LambertMaterial.js | 8 ++-- src/materials/Material.js | 54 ++++++--------------------- src/materials/PhongMaterial.js | 8 ++-- src/materials/PhysicalMaterial.js | 22 ++++++++--- src/materials/ShaderMaterial.js | 6 +-- src/materials/StandardMaterial.js | 32 ++++++---------- src/materials/SubSurfaceMaterial.js | 58 ++++++++--------------------- src/tools.js | 10 +++++ 9 files changed, 77 insertions(+), 129 deletions(-) diff --git a/src/materials/BasicMaterial.js b/src/materials/BasicMaterial.js index 21c1326..c9f1fb3 100644 --- a/src/materials/BasicMaterial.js +++ b/src/materials/BasicMaterial.js @@ -1,12 +1,12 @@ import { MeshBasicMaterial } from 'three'; +import { propsValues } from '../tools.js'; import Material from './Material'; export default { extends: Material, - created() { - this.material = new MeshBasicMaterial({ - color: this.color, - }); + setup(props) { + const material = new MeshBasicMaterial(propsValues(props, ['id'])); + return { material }; }, __hmrId: 'BasicMaterial', }; diff --git a/src/materials/LambertMaterial.js b/src/materials/LambertMaterial.js index c280054..3dd19c9 100644 --- a/src/materials/LambertMaterial.js +++ b/src/materials/LambertMaterial.js @@ -1,12 +1,12 @@ import { MeshLambertMaterial } from 'three'; +import { propsValues } from '../tools.js'; import Material from './Material'; export default { extends: Material, - created() { - this.material = new MeshLambertMaterial({ - color: this.color, - }); + setup(props) { + const material = new MeshLambertMaterial(propsValues(props, ['id'])); + return { material }; }, __hmrId: 'LambertMaterial', }; diff --git a/src/materials/Material.js b/src/materials/Material.js index 26753f0..3e7148b 100644 --- a/src/materials/Material.js +++ b/src/materials/Material.js @@ -5,42 +5,20 @@ export default { inject: ['three'], props: { id: String, - color: { - type: [String, Number], - default: '#ffffff', - }, - depthTest: { - type: Boolean, - default: true, - }, - depthWrite: { - type: Boolean, - default: true, - }, - fog: { - type: Boolean, - default: true, - }, - opacity: { - type: Number, - default: 1, - }, - side: { - type: Number, - default: FrontSide, - }, - transparent: { - type: Boolean, - default: false, - }, - vertexColors: { - type: Boolean, - default: false, - }, + color: { type: [String, Number], default: '#ffffff' }, + depthTest: { type: Boolean, default: true }, + depthWrite: { type: Boolean, default: true }, + flatShading: Boolean, + fog: { type: Boolean, default: true }, + opacity: { type: Number, default: 1 }, + side: { type: Number, default: FrontSide }, + transparent: Boolean, + vertexColors: Boolean, }, - mounted() { + created() { this.three.materials[this.id] = this.material; + // won't work for flatShading ['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'transparent'].forEach(p => { watch(() => this[p], () => { if (p === 'color') { @@ -53,15 +31,7 @@ export default { }, unmounted() { this.material.dispose(); - }, - methods: { - propsValues() { - const props = {}; - Object.entries(this.$props).forEach(([key, value]) => { - if (key !== 'id') props[key] = value; - }); - return props; - }, + delete this.three.materials[this.id]; }, render() { return []; diff --git a/src/materials/PhongMaterial.js b/src/materials/PhongMaterial.js index 5c4831f..c129472 100644 --- a/src/materials/PhongMaterial.js +++ b/src/materials/PhongMaterial.js @@ -1,12 +1,12 @@ import { MeshPhongMaterial } from 'three'; +import { propsValues } from '../tools.js'; import Material from './Material'; export default { extends: Material, - created() { - this.material = new MeshPhongMaterial({ - color: this.color, - }); + setup(props) { + const material = new MeshPhongMaterial(propsValues(props, ['id'])); + return { material }; }, __hmrId: 'PhongMaterial', }; diff --git a/src/materials/PhysicalMaterial.js b/src/materials/PhysicalMaterial.js index b12f9c4..6fb0cf9 100644 --- a/src/materials/PhysicalMaterial.js +++ b/src/materials/PhysicalMaterial.js @@ -1,12 +1,22 @@ -import { MeshPhysicalMaterial } from 'three'; -import Material from './Material'; +import { Color, MeshPhysicalMaterial } from 'three'; +import { watch } from 'vue'; +import { propsValues } from '../tools.js'; +import StandardMaterial from './StandardMaterial'; export default { - extends: Material, - created() { - this.material = new MeshPhysicalMaterial({ - color: this.color, + 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 }; }, __hmrId: 'PhysicalMaterial', }; diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js index 51e3045..765b2e4 100644 --- a/src/materials/ShaderMaterial.js +++ b/src/materials/ShaderMaterial.js @@ -9,15 +9,11 @@ export default { fragmentShader: String, }, mounted() { - if (!this.material) { - // this.material = new ShaderMaterial(this.$props); - } this.three.materials[this.id] = this.material; }, unmounted() { this.material.dispose(); - }, - methods: { + delete this.three.materials[this.id]; }, render() { return []; diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js index c13f1eb..4abdb33 100644 --- a/src/materials/StandardMaterial.js +++ b/src/materials/StandardMaterial.js @@ -1,38 +1,28 @@ import { Color, MeshStandardMaterial } from 'three'; import { watch } from 'vue'; +import { propsValues } from '../tools.js'; import Material from './Material'; export default { extends: Material, props: { - emissive: { - type: [Number, String], - default: 0, - }, - emissiveIntensity: { - type: Number, - default: 1, - }, - metalness: { - type: Number, - default: 0, - }, - roughness: { - type: Number, - default: 1, - }, + emissive: { type: [Number, String], default: 0 }, + emissiveIntensity: { type: Number, default: 1 }, + metalness: { type: Number, default: 0 }, + roughness: { type: Number, default: 1 }, }, - created() { - this.material = new MeshStandardMaterial(this.propsValues()); + setup(props) { + const material = new MeshStandardMaterial(propsValues(props, ['id'])); ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => { - watch(() => this[p], () => { + watch(() => props[p], (value) => { if (p === 'emissive') { - this.material.emissive = new Color(this.emissive); + material.emissive = new Color(value); } else { - this.material[p] = this[p]; + material[p] = value; } }); }); + return { material }; }, __hmrId: 'StandardMaterial', }; diff --git a/src/materials/SubSurfaceMaterial.js b/src/materials/SubSurfaceMaterial.js index fe652cb..a204f1f 100644 --- a/src/materials/SubSurfaceMaterial.js +++ b/src/materials/SubSurfaceMaterial.js @@ -5,51 +5,21 @@ import ShaderMaterial from './ShaderMaterial.js'; export default { extends: ShaderMaterial, props: { - diffuse: { - 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, - }, + diffuse: { 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() { + setup(props) { const params = SubsurfaceScatteringShader; const uniforms = UniformsUtils.clone(params.uniforms); - Object.entries(this.$props).forEach(([key, value]) => { + Object.entries(props).forEach(([key, value]) => { if (key === 'diffuse' || key === 'thicknessColor') { value = new Color(value); } @@ -58,13 +28,15 @@ export default { } }); - this.material = new TShaderMaterial({ + const material = new TShaderMaterial({ ...params, uniforms, lights: true, transparent: this.transparent, vertexColors: this.vertexColors, }); + + return { material }; }, __hmrId: 'SubSurfaceMaterial', }; diff --git a/src/tools.js b/src/tools.js index 450c3fc..79cc0fe 100644 --- a/src/tools.js +++ b/src/tools.js @@ -6,6 +6,16 @@ export function setFromProp(o, prop) { } }; +export function propsValues(props, exclude) { + const values = {}; + Object.entries(props).forEach(([key, value]) => { + if (!exclude || (exclude && !exclude.includes(key))) { + values[key] = value; + } + }); + return values; +}; + export function lerp(value1, value2, amount) { amount = amount < 0 ? 0 : amount; amount = amount > 1 ? 1 : amount;