Create gltf-modify.js

simplify changing basic properties of a material
stemkoski · Apr 7, 2022 · 391582c · 391582c
1 parent 05bd724
commit 391582c
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/js/gltf-modify.js b/js/gltf-modify.js
@@ -0,0 +1,37 @@
+AFRAME.registerComponent("gltf-modify", {
+
+    schema: {
+        shading:     {type: 'boolean', default: "normal"},
+        color:       {type: 'color',   default: "red"},
+        transparent: {type: 'boolean', default: false},
+        opacity:     {type: 'float',   default: 1.0},
+        blending:    {type: 'string',  default: "normal"},
+    },
+
+    init: function () 
+    {
+        let blending;
+        if (this.data.blending == "additive")
+            blending = THREE.AdditiveBlending;
+        else // if (this.data.blending == "normal")
+            blending = THREE.NormalBlending;
+
+        let parameters = {color: this.data.color, transparent: this.data.transparent, opacity: this.data.opacity, blending: blending };
+
+        let material;
+        if (this.data.shading == "flat")
+          material = new THREE.MeshBasicMaterial( parameters );
+        else // if (this.data.shading == "normal")
+          material = new THREE.MeshLambertMaterial( parameters );
+
+        this.el.addEventListener("model-loaded", function(eventData) {
+            let model = eventData.detail.model;
+            model.traverse((obj) => {
+            if (obj.isMesh) 
+              obj.material = material;
+            });
+        });
+
+        // material replacement complete
+    }
+});