I added indexedDB in and tightened up some other code but of course I can’t figure out the 3D aspect for buffer coloring.
After reading it appeared that I had to create an integer array with the RGB values and that was to map to vertices and then by setting the mesh to use vertexColor then I thought it would work. I was going off the pattern that the amount of color array should match the other geometry attribute array counts.
When the Float32Array count matches the other counts then they are all the same color.
When it was greater then the other arrays then some of the cubes are different colors.
Here is a photo of what is appears like when I have an excess count in my color TypedArray:
Here is my updated colorData function:
// Intensity Coloring
colorData = percentage => {
let rgbString = "",
r = parseInt(percentage * 25.5),
g = 255 - r;
r = r < 0 ? 0 : r;
return new Float32Array( [
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
r, g, 0,
] );
}
Here is the main if statement that runs the whole thing:
if (response.statusCode == 200) {
const parsedBody = JSON.parse(body),
quakeArr = new Array(parsedBody.metadata.count),
centerVector = new THREE.Vector3(0,0,0),
cubeMat = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }),
cubes = [];
// Data Parsing
for (const feature of parsedBody.features) {
// Quake Obj
const magnitude = feature.properties.mag,
location = feature.properties.place,
time = feature.properties.time,
coordinates = feature.geometry.coordinates,
quake = {
"magnitude": magnitude,
"location": location,
"time": time,
"coordinates": coordinates
},
// Three Data Obj
quakeVector = longLatToSphere(coordinates[0], coordinates[1], 600),
rgb = colorData(magnitude),
cubeHeight = magnitude > 0 ? (magnitude ** 3) * 1.75 : 0,
cubeGeom = new THREE.BoxBufferGeometry(3, 3, cubeHeight, 1, 1, 1),
cube = new THREE.Mesh(cubeGeom, cubeMat);
cubeGeom.addAttribute( 'color', new THREE.BufferAttribute( rgb, 3, true ) );
cube.position.set(quakeVector.x, quakeVector.y, quakeVector.z);
cube.lookAt(centerVector);
cube.updateMatrix();
cube.geometry.applyMatrix(cube.matrix);
quakeArr.push(quake);
cubes.push(cube);
}
// create a new mesh, containing all the other meshes.
const geom = BufferGeometryUtils.mergeBufferGeometries(cubes.map(c=>c.geometry)),
combined = new THREE.Mesh(geom, cubeMat);
combined.name = `data${i}`;
// Data Sorting by Highest Magnitude
quakeArr.sort((a, b) => b.magnitude - a.magnitude);
// Store in Global
quakes[i] = quakeArr;
threeData[i] = combined.toJSON();
}
Very cool that the GVP offers full reports like that. I’m curious about your world texture and the background. Firstly, is that an anime background? Secondly, where did you source your world texture!? I like that yours has volcanoes. You might like this one if you haven’t seen it, super cool: 
.
. The map generator looks like something I might use for my personal 
.