Three.js Viz

by hzhang307

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/Detector.js"></script>
<body data-gr-c-s-loaded="true">
<canvas id="c" width="2880" height="1420"></canvas>
</body>

CSS

* {
          box-sizing: border-box;
          -moz-box-sizing: border-box;
        }
        
        body {
          color: #000;
          font-family: Monospace;
          font-size: 13px;
          background-color: #fff;
          margin: auto;
          padding: .5in;
          max-width: 7in;
          text-align: justify;
        }
        
        .view {
          width: 5in;
          height: 5in;
          margin: auto;
        }
        
        #c {
          position: fixed;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          background-color: #fff;
          z-index: -1;
        }
        
        #info {
          position: absolute;
          top: 0px;
          width: 6.5in;
          padding: 0px;
          text-align: center;
        }
        
        a {
          color: #0080ff;
        }
        
        .math {
          text-align: center;
        }
        
        .math-frac {
          display: inline-block;
          vertical-align: middle;
        }
        
        .math-num {
          display: block;
        }
        
        .math-denom {
          display: block;
          border-top: 1px solid;
        }
        
        .math-sqrt {
          display: inline-block;
          transform: scale(1, 1.3);
        }
        
        .math-sqrt-stem {
          display: inline-block;
          border-top: 1px solid;
          margin-top: 5px;
        }

JavaScript

if (!Detector.webgl) Detector.addGetWebGLMessage();

var scene, t, canvas, renderer;

window.onload = init;

function init() {

  var balls = 20;
  var size = .25;

  var colors = ['rgb(0,127,255)', 'rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,255,255)',
    'rgb(255,0,255)', 'rgb(255,0,127)', 'rgb(255,255,0)', 'rgb(0,255,127)'
  ];

  canvas = document.getElementById('c');

  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
  });
  renderer.setClearColor(0xffffff, 1);
  renderer.setPixelRatio(window.devicePixelRatio);

  scene = new THREE.Scene();
  var geometry = new THREE.Geometry();
  var geometry0 = new THREE.Geometry();

  if (canvas.lattice) {
    var range = balls / 2;
    for (var i = -range; i <= range; i++) {
      for (var j = -range; j <= range; j++) {
        for (var k = -range; k <= range; k++) {
          geometry.vertices.push(new THREE.Vector3(i, j, k));
          geometry0.vertices.push(new THREE.Vector3(i, j, k));
        }
      }
    }
  } else {
    for (var m = 0; m < Math.pow(balls, 3); m++) {
      var i = balls * Math.random() - balls / 2;
      var j = balls * Math.random() - balls / 2;
      var k = balls * Math.random() - balls / 2;

      geometry.vertices.push(new THREE.Vector3(i, j, k));
      geometry0.vertices.push(new THREE.Vector3(i, j, k));
    }
  }

  var index = Math.floor(colors.length * Math.random());

  var canvas2 = document.createElement('canvas');
  canvas2.width = 512;
  canvas2.height = 512;
  var context = canvas2.getContext('2d');
  context.arc(64, 64, 64, 0, 2 * Math.PI);
  context.fillStyle = colors[index];
  context.fill();
  var texture = new THREE.Texture(canvas2);
  texture.needsUpdate = true;

  var material = new THREE.PointsMaterial({
    size: size,
    map: texture,
    transparent: true,
    alphaTest: .1
  });

  scene.add(new THREE.Points(geometry, material));
  scene.userData.view = canvas;
  scene.userData.geometry0 = geometry0;
  var camera = new...