diff --git a/package-lock.json b/package-lock.json
index aa21c23..67f47c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -124,6 +124,11 @@
"resolved": "https://registry.npmjs.org/aframe-event-set-component/-/aframe-event-set-component-4.1.2.tgz",
"integrity": "sha512-fgiEBBRAx3Wu7xRcz2xClFj2L5bdcdXqAPGxoqms+cn4vG6exSGmEBVF7GST28sCknF82KjTaBp9nCyzSY9j4w=="
},
+ "aframe-geometry-merger-component": {
+ "version": "2.0.0-beta1",
+ "resolved": "https://registry.npmjs.org/aframe-geometry-merger-component/-/aframe-geometry-merger-component-2.0.0-beta1.tgz",
+ "integrity": "sha512-0anZA8K7X5lybhbQEGdI8uH0tMZx1b90EA69MOkWfaYPKLWEK9neOWoF+qxOQql5Zz04zVl+BJ9q0fESuUnS9Q=="
+ },
"aframe-gltf-part-component": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/aframe-gltf-part-component/-/aframe-gltf-part-component-1.1.0.tgz",
diff --git a/package.json b/package.json
index 63013ad..1bc1d53 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"aframe-cubemap-component": "^0.1.2",
"aframe-event-decorators": "^1.0.2",
"aframe-event-set-component": "^4.0.1",
+ "aframe-geometry-merger-component": "^2.0.0-beta1",
"aframe-gltf-part-component": "1.1.0",
"aframe-haptics-component": "^1.4.2",
"aframe-layout-component": "^5.2.0",
diff --git a/src/components/materials.js b/src/components/materials.js
index eecbbbf..e15208e 100644
--- a/src/components/materials.js
+++ b/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]);
}
diff --git a/src/components/vertex-colors-buffer.js b/src/components/vertex-colors-buffer.js
new file mode 100644
index 0000000..03c8f85
--- /dev/null
+++ b/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;
+ }
+});
diff --git a/src/index.js b/src/index.js
index 4e8c08b..ddc89f8 100644
--- a/src/index.js
+++ b/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');
diff --git a/src/templates/stage.html b/src/templates/stage.html
index 86136ea..3170579 100644
--- a/src/templates/stage.html
+++ b/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">
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+