From 92c419040e95f112b269b60f348eed557c448a33 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Sun, 4 Oct 2020 10:22:26 +0200
Subject: [PATCH] update phong & standard

---
 src/materials/PhongMaterial.js    | 20 ++++++++++++++++++++
 src/materials/StandardMaterial.js |  4 ++--
 2 files changed, 22 insertions(+), 2 deletions(-)

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;
           }