diff --git a/src/materials/PhongMaterial.js b/src/materials/PhongMaterial.js index c08380f..6efd0a6 100644 --- a/src/materials/PhongMaterial.js +++ b/src/materials/PhongMaterial.js @@ -1,13 +1,33 @@ import { MeshPhongMaterial } 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 }, + reflectivity: { type: Number, default: 1 }, + shininess: { type: Number, default: 30 }, + specular: { type: [String, Number], default: 0x111111 }, + }, methods: { createMaterial() { + console.log(this.$props); this.material = new MeshPhongMaterial(propsValues(this.$props, ['id'])); }, + addWatchers() { + ['emissive', 'emissiveIntensity', 'reflectivity', 'shininess', 'specular'].forEach(p => { + watch(() => this[p], (value) => { + if (p === 'emissive' || p === 'specular') { + this.material[p].set(value); + } else { + this.material[p] = value; + } + }); + }); + }, }, __hmrId: 'PhongMaterial', }; diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js index 53d40cd..18f05c2 100644 --- a/src/materials/StandardMaterial.js +++ b/src/materials/StandardMaterial.js @@ -1,4 +1,4 @@ -import { Color, MeshStandardMaterial } from 'three'; +import { MeshStandardMaterial } from 'three'; import { watch } from 'vue'; import { propsValues } from '../tools.js'; import Material from './Material'; @@ -19,7 +19,7 @@ export default { ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => { watch(() => this[p], (value) => { if (p === 'emissive') { - this.material.emissive = new Color(value); + this.material[p].set(value); } else { this.material[p] = value; }