update materials

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

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

src/materials/Material.js

@@ -5,42 +5,20 @@ export default {
   inject: ['three'],
   props: {
     id: String,
-    color: {
-      type: [String, Number],
-      default: '#ffffff',
+    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,
   },
-    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,
-    },
-  },
-  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 [];

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

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

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

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,
+    emissive: { type: [Number, String], default: 0 },
+    emissiveIntensity: { type: Number, default: 1 },
+    metalness: { type: Number, default: 0 },
+    roughness: { type: Number, default: 1 },
   },
-    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',
 };

src/materials/SubSurfaceMaterial.js

@@ -5,51 +5,21 @@ import ShaderMaterial from './ShaderMaterial.js';
 export default {
   extends: ShaderMaterial,
   props: {
-    diffuse: {
-      type: String,
-      default: '#ffffff',
+    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 },
   },
-    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',
 };

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;