mergin geos like goten and trunks

src/components/materials.js

@@ -11,6 +11,7 @@ AFRAME.registerComponent('materials', {
     default: 'black',
     oneOf: ['black', 'default', 'neon']
   },
+
   update: function () {
     this.el.object3D.traverse(o => o.material = this.system[this.data]);
   }

src/components/vertex-colors-buffer.js

@@ -0,0 +1,61 @@
+var colorHelper = new THREE.Color();
+
+/**
+ * Set geometry vertex colors, allows for geometry merging using one material
+ * while retaining colors.
+ */
+AFRAME.registerComponent('vertex-colors-buffer', {
+  schema: {
+    baseColor: {type: 'color'},
+    itemSize: {default: 3}
+  },
+
+  update: function (oldData) {
+    var colors;
+    var data = this.data;
+    var i;
+    var el = this.el;
+    var geometry;
+    var mesh;
+    var self = this;
+
+    mesh = this.el.getObject3D('mesh');
+
+    if (!mesh || !mesh.geometry) {
+      el.addEventListener('object3dset', function reUpdate (evt) {
+        if (evt.detail.type !== 'mesh') { return; }
+        el.removeEventListener('object3dset', reUpdate);
+        self.update(oldData);
+      });
+      return;
+    }
+
+    geometry = mesh.geometry;
+
+    // Empty geometry.
+    if (!geometry.attributes.position) {
+      console.warn('Geometry has no vertices', el);
+      return;
+    }
+
+    if (!geometry.attributes.color) {
+      geometry.addAttribute('color',
+        new THREE.BufferAttribute(
+          new Float32Array(geometry.attributes.position.array.length), 3
+        )
+      );
+    }
+
+    colors = geometry.attributes.color.array;
+
+    // TODO: For some reason, incrementing loop by 3 doesn't work. Need to do by 4 for glTF.
+    colorHelper.set(data.baseColor);
+    for (i = 0; i < colors.length; i += data.itemSize) {
+      colors[i] = colorHelper.r;
+      colors[i + 1] = colorHelper.g;
+      colors[i + 2] = colorHelper.b;
+    }
+
+    geometry.attributes.color.needsUpdate = true;
+  }
+});

src/index.js

@@ -6,6 +6,7 @@ require('aframe-animation-component');
 require('aframe-audioanalyser-component');
 require('aframe-cubemap-component');
 require('aframe-event-set-component');
+require('aframe-geometry-merger-component');
 require('aframe-haptics-component');
 require('aframe-layout-component');
 require('aframe-orbit-controls');

src/templates/stage.html

@@ -17,18 +17,18 @@
     audio-columns="analyser: #audioAnalyser; height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45"
     position="0 -17 1"></a-entity>
 
-  <!-- Corridor. -->
-  <a-entity geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85" materials="black"></a-entity>
-
-  <a-entity geometry="height:20; depth:0.3; width:0.3" materials="black" position="1.9 -9.97 -7"></a-entity>
-  <a-entity geometry="height:20; depth:0.3; width:0.3" materials="black" position="-1.9 -9.97 -7"></a-entity>
-
-  <a-entity geometry="height: 0.3; depth: 50; width: 0.3" position="1.9 -1 -31.85" materials="black"></a-entity>
-  <a-entity geometry="height: 0.3; depth: 50; width: 0.3" position="-1.9 -1 -31.85" materials="black"></a-entity>
-
-  <!-- Corridor handrail. -->
-  <a-entity geometry="height:21.5; depth:0.2; width:0.2" materials="black" position="3.5 -10 -7"></a-entity>
-  <a-entity geometry="height:21.5; depth:0.2; width:0.2" materials="black" position="-3.5 -10 -7"></a-entity>
+  <a-mixin id="corridor" geometry="skipCache: true" vertex-colors-buffer="baseColor: #010101"></a-mixin>
+  <a-entity id="stageCorridor" buffer-geometry-merger material="shader: flat; vertexColors: vertex">
+    <!-- Corridor. -->
+    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85"></a-entity>
+    <a-entity mixin="corridor" geometry="height: 20; depth: 0.3; width: 0.3" position="1.9 -9.97 -7"></a-entity>
+    <a-entity mixin="corridor" geometry="height: 20; depth: 0.3; width: 0.3" position="-1.9 -9.97 -7"></a-entity>
+    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 0.3" position="1.9 -1 -31.85"></a-entity>
+    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 0.3" position="-1.9 -1 -31.85"></a-entity>
+    <!-- Corridor handrail. -->
+    <a-entity mixin="corridor" geometry="height: 21.5; depth: 0.2; width: 0.2" position="3.5 -10 -7"></a-entity>
+    <a-entity mixin="corridor" geometry="height: 21.5; depth: 0.2; width: 0.2" position="-3.5 -10 -7"></a-entity>
+  </a-entity>
 
   <a-entity geometry="height: 0.05; depth: 50; width: 0.05" position="3.5 0.65 -32" materials="neon"></a-entity>
   <a-entity geometry="height: 0.05; depth: 50; width: 0.05" position="-3.5 0.65 -32" materials="neon"></a-entity>