WebGL globe only shows color for first dataset

by Gregg Tavares

HTML

<script src="https://globe.chromeexperiments.com/third-party/Three/ThreeWebGL.js"></script>
<script src="https://globe.chromeexperiments.com/third-party/Three/ThreeExtras.js"></script>
<script src="https://globe.chromeexperiments.com/third-party/Three/RequestAnimationFrame.js"></script>
<script src="https://globe.chromeexperiments.com/third-party/Three/Detector.js"></script>
<script src="https://globe.chromeexperiments.com/third-party/Tween.js"></script>
<script src="https://globe.chromeexperiments.com/globe.js"></script>

CSS

body {
  margin: 0;
  background: black;
}

JavaScript

const globe = new DAT.Globe(document.body);

const datas = [
  { name: 'foo', data: makeData(0) },
  { name: 'bar', data: makeData(2) },
  { name: 'moo', data: makeData(4) },
];

function makeData(seed) {
  const data = [];
  const around = 200;
  const down = 100;
  for (let d = 0; d < down; ++d) {
    const v = d / down;
    const lat = v * 180 - 90;
    for (let a = 0; a < around; ++a) {
      const u = a / around;
      const lon = u * 360;
      const h = Math.sin((u + v) * Math.PI * 2 + seed) * 0.5 + 0.5;
      data.push(lat, lon, Math.pow(h, 50) * 0.3);
    }
  }
  return data;
}

for (const {name, data} of datas) {
  console.log(data.slice(0, 8));
  globe.addData(data, {animated: true, format: 'magnitude', name});
}

globe.createPoints();
globe.animate();

window.g = globe;
setInterval(() => {
  globe.time = Math.sin(performance.now() * 0.001) * 0.5 + 0.5;
}, 16)