Creating Real-Time WebGL Visualizations

1.js

function handleMsg(msg) {
  if (VISIBLE) {
    addData(msg.pub, msg.subs);
  }
}

var pubnub = PUBNUB.init({
  publish_key   : "PUBLISH KEYS HERE",
  subscribe_key : "e19f2bb0-623a-11df-98a1-fbd39d75aa3f"
});

pubnub.subscribe({
  channel  : "real-time-stats-geostats",
  callback : function(message) {
    handleMsg(message);
  }
});

2.js

el.addEventListener('mousedown', function (event) {
    isDown = true;

    IDLE = false;
    clearTimeout(interval);

    onDownMouse = {
      x: event.clientX,
      y: -event.clientY
    };
    targetDownMouse = {
      x: target.x,
      y: target.y
    };
  });

  el.addEventListener('mouseup', function (event) {
    isDown = false;

    clearTimeout(interval);
    interval = setTimeout(function () {
      IDLE = true;
    }, IDLE_TIME);
  });

  el.addEventListener('mousemove', function (event) {
    if (isDown == true) {
      var mouseX = event.clientX,
          mouseY = -event.clientY;

      target.x = targetDownMouse.x + (onDownMouse.x - mouseX) * 0.005;
      target.y = targetDownMouse.y + (onDownMouse.y - mouseY) * 0.005;

      target.y = target.y > PI_HALF ? PI_HALF : target.y;
      target.y = target.y < -PI_HALF ? -PI_HALF : target.y;
    }
  });

3.js

el.addEventListener('mousewheel', function (event) {
    target.zoom -= event.wheelDeltaY * 0.3;
    if (target.zoom > 3000) target.zoom = 3000;
    if (target.zoom < 1300) target.zoom = 1300;
    event.preventDefault();
    return false;
  });

4.js

function render() {
  // … other rendering code

  rotation.x += (target.x - rotation.x) * 0.1;
  rotation.y += (target.y - rotation.y) * 0.1;
  DISTANCE += (target.zoom - DISTANCE) * 0.3;

  checkIdle();

  // Convert our 2d camera target into 3d world coords
  camera.position.x = DISTANCE * Math.sin(rotation.x) * Math.cos(rotation.y);
  camera.position.y = DISTANCE * Math.sin(rotation.y);
  camera.position.z = DISTANCE * Math.cos(rotation.x) * Math.cos(rotation.y);
  camera.lookAt( scene.position );
}