Fix up layer component to support multiple layers and exlusivity

src/components/layers.js

@@ -10,22 +10,31 @@ export const Layers = {
  */
 AFRAME.registerComponent("layers", {
   schema: {
-    reflection: { type: "boolean", default: false }
+    reflection: { type: "boolean", default: false },
+    inWorldHud: { type: "boolean", default: false },
+    exclusive: { type: "boolean", default: false } // if true, only these layers will be set
   },
   init() {
     this.update = this.update.bind(this);
     this.el.addEventListener("model-loaded", this.update);
   },
   update(oldData) {
-    if (this.data.reflection !== oldData.reflection) {
-      if (this.data.reflection) {
-        this.el.object3D.traverse(obj => {
-          obj.layers.enable(Layers.reflection);
-        });
-      } else {
-        this.el.object3D.traverse(obj => {
-          obj.layers.disable(Layers.reflection);
-        });
+    const obj = this.el.object3D;
+
+    if (this.data.exclusive) {
+      obj.traverse(o => (o.layers.mask = 0));
+    }
+
+    for (const [name, layer] of Object.entries(Layers)) {
+      const oldValue = oldData[name];
+      const newValue = this.data[name];
+
+      if (oldValue !== newValue) {
+        if (newValue) {
+          obj.traverse(o => o.layers.enable(layer));
+        } else {
+          obj.traverse(o => o.layers.disable(layer));
+        }
       }
     }
   },