materials refactoring

src/materials/BasicMaterial.js

@@ -4,9 +4,10 @@ import Material from './Material';
 
 export default {
   extends: Material,
-  setup(props) {
+  methods: {
-    const material = new MeshBasicMaterial(propsValues(props, ['id']));
+    createMaterial() {
-    return { material };
+      this.material = new MeshBasicMaterial(propsValues(this.$props, ['id']));
+    },
   },
   __hmrId: 'BasicMaterial',
 };

src/materials/LambertMaterial.js

@@ -4,9 +4,10 @@ import Material from './Material';
 
 export default {
   extends: Material,
-  setup(props) {
+  methods: {
-    const material = new MeshLambertMaterial(propsValues(props, ['id']));
+    createMaterial() {
-    return { material };
+      this.material = new MeshLambertMaterial(propsValues(this.$props, ['id']));
+    },
   },
   __hmrId: 'LambertMaterial',
 };

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;
+    this.mesh.setMaterial(this.material);
-
+  },
-    // won't work for flatShading
+  mounted() {
-    ['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'transparent'].forEach(p => {
+    this._addWatchers();
+    if (this.addWatchers) this.addWatchers();
+  },
+  unmounted() {
+    this.material.dispose();
+    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 = new Color(this.color);
+            this.material.color.set(this.color);
           } else {
             this.material[p] = this[p];
           }
         });
       });
     },
-  unmounted() {
-    this.material.dispose();
-    delete this.three.materials[this.id];
   },
   render() {
     return [];

src/materials/PhongMaterial.js

@@ -4,9 +4,10 @@ import Material from './Material';
 
 export default {
   extends: Material,
-  setup(props) {
+  methods: {
-    const material = new MeshPhongMaterial(propsValues(props, ['id']));
+    createMaterial() {
-    return { material };
+      this.material = new MeshPhongMaterial(propsValues(this.$props, ['id']));
+    },
   },
   __hmrId: 'PhongMaterial',
 };

src/materials/PhysicalMaterial.js

@@ -1,22 +1,13 @@
-import { Color, MeshPhysicalMaterial } from 'three';
+import { MeshPhysicalMaterial } from 'three';
-import { watch } from 'vue';
 import { propsValues } from '../tools.js';
 import StandardMaterial from './StandardMaterial';
 
 export default {
   extends: StandardMaterial,
-  setup(props) {
+  methods: {
-    const material = new MeshPhysicalMaterial(propsValues(props, ['id']));
+    createMaterial() {
-    ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => {
+      this.material = new MeshPhysicalMaterial(propsValues(this.$props, ['id']));
-      watch(() => props[p], (value) => {
+    },
-        if (p === 'emissive') {
-          material.emissive = new Color(value);
-        } else {
-          material[p] = value;
-        }
-      });
-    });
-    return { material };
   },
   __hmrId: 'PhysicalMaterial',
 };

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 [];

src/materials/StandardMaterial.js

@@ -11,18 +11,21 @@ export default {
     metalness: { type: Number, default: 0 },
     roughness: { type: Number, default: 1 },
   },
-  setup(props) {
+  methods: {
-    const material = new MeshStandardMaterial(propsValues(props, ['id']));
+    createMaterial() {
+      this.material = new MeshStandardMaterial(propsValues(this.$props, ['id']));
+    },
+    addWatchers() {
       ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => {
-      watch(() => props[p], (value) => {
+        watch(() => this[p], (value) => {
           if (p === 'emissive') {
-          material.emissive = new Color(value);
+            this.material.emissive = new Color(value);
           } else {
-          material[p] = value;
+            this.material[p] = value;
           }
         });
       });
-    return { material };
+    },
   },
   __hmrId: 'StandardMaterial',
 };

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,10 +16,11 @@ export default {
     opacity: { type: Number, default: 1 },
     vertexColors: { type: Boolean, default: false },
   },
-  setup(props) {
+  methods: {
+    createMaterial() {
       const params = SubsurfaceScatteringShader;
       const uniforms = UniformsUtils.clone(params.uniforms);
-    Object.entries(props).forEach(([key, value]) => {
+      Object.entries(this.$props).forEach(([key, value]) => {
         if (key === 'diffuse' || key === 'thicknessColor') {
           value = new Color(value);
         }
@@ -28,15 +29,14 @@ export default {
         }
       });
 
-    const material = new TShaderMaterial({
+      this.material = new TShaderMaterial({
         ...params,
         uniforms,
         lights: true,
         transparent: this.transparent,
         vertexColors: this.vertexColors,
       });
-
+    },
-    return { material };
   },
   __hmrId: 'SubSurfaceMaterial',
 };