JSFiddle - React, Tailwind, and code Playground
by Nick Hulea
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<div id="container"></div>
CSS
body {
background : #000;
padding : 50px;
margin : 0;
}
#container {
width : 100%;
height: 100%;
margin : auto;
}
JavaScript
var camera, scene, renderer;
var mesh;
var size = 800;
var scale = 7;
var cscale = 0.005;
var x = y = z = 0.0;
var r = g = b = 0.5;
var positions;
var colors;
var size2 = size / 2;
var scale2 = scale / 2;
var cscale2 = cscale / 2;
init();
animate();
function init() {
var container = document.getElementById('container');
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 4000 );
camera.position.z = 2750;
scene = new THREE.Scene();
var segments = 1000000;
var geometry = new THREE.BufferGeometry();
var material = new THREE.LineBasicMaterial({ vertexColors: true });
geometry.addAttribute( 'position', Float32Array, segments, 3 );
geometry.addAttribute( 'color', Float32Array, segments, 3 );
positions = geometry.attributes.position.array;
colors = geometry.attributes.color.array;
for ( var i = 0; i < segments; i ++ ) {
x += Math.random() * scale - scale2;
y += Math.random() * scale - scale2;
z += Math.random() * scale - scale2;
r += Math.random() * cscale - cscale2;
g += Math.random() * cscale - cscale2;
b += Math.random() * cscale - cscale2;
x = (x < -size2) ? -size2 - size2 - x : ((x > size2) ? size2 + size2 - x : x);
y = (y < -size2) ? -size2 - size2 - y : ((y > size2) ? size2 + size2 - y : y);
z = (z < -size2) ? -size2 - size2 - z : ((z > size2) ? size2 + size2 - z : z);
r = r < 0 ? -r : ((r > 1) ? 2 - r : r);
g = g < 0 ? -g : ((g > 1) ? 2 - g : g);
b = b < 0 ? -b : ((b > 1) ? 2 - b : b);
positions[ i * 3 ] = x;
positions[ i * 3 + 1 ] = y;
positions[ i...