materials refactoring

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

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

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

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

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

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) {
-    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',
 };

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