3D Multiverse Visualization

3d-multiverse-visualization.markdown

3D Multiverse Visualization

threejs is awesome

A Pen by JaT5 on CodePen.

License.

index.html

<div id="canvas"></div>

script.js

var renderer, scene, camera, pointCloud;
var screenW = window.innerWidth;
var screenH = window.innerHeight;

var spdx = 0,
  spdy = 0;
var mouseX = 0, mouseY = 0, mouseDown = false;
// mouse
document.addEventListener('mousemove', function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}, false);
document.body.addEventListener("mousedown", function(event) {
  mouseDown = true;
}, false);
document.body.addEventListener("mouseup", function(event) {
  mouseDown = false;
}, false);

init();
animate();

function init() {

  // dom
  var container = document.getElementById('canvas');

  // renderer
  renderer = new THREE.WebGLRenderer({
    alpha: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  //camera
  camera = new THREE.PerspectiveCamera(85, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 50;

  // geometry
  var geometry = new THREE.TorusKnotGeometry(150, 200, 500, 200);

  // vertex colors
  var colors = [];
  for (var i = 0; i < geometry.vertices.length; i++) {

    // blue color
    colors[i] = new THREE.Color();
    colors[i].setHSL(0.55, Math.random()*2, Math.random()); //to change to white:set third value to 1,random color:set first value to random
  }
  geometry.colors = colors;

  // material
  material = new THREE.PointsMaterial({
    size: 2,
    vertexColors: THREE.VertexColors
  });

  // point cloud
  pointCloud = new THREE.Points(geometry, material);

  scene.add(pointCloud);

}

function animate() {
  spdy = (screenH / 2 - mouseY) / 40;
  spdx = (screenW / 2 - mouseX) / 40;
  // rotate on mousedown
  if (mouseDown) {
    pointCloud.rotation.x = spdy;
    pointCloud.rotation.y = spdx;
  }
  requestAnimationFrame(animate);

  render();

}

function render() {

  // rotate
  pointCloud.rotation.x += 0.0005;
  pointCloud.rotation.y += 0.0005;

  // render
  renderer.render(scene, camera);

}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>

style.css

canvas {
  background: #100a1c;
}