Pure THREE.JS template

by giperon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  margin:0;
  padding:0;
  overflow:hidden;
}

JavaScript

var scene, renderer, camera, controls;

init();
animate();

function init()
{	
    
  // basic scene
  renderer = new THREE.WebGLRenderer( {antialias:true} );
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize (width, height);
  renderer.setClearColor( 0x222244, 1);
  document.body.appendChild (renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
  camera.position.y = 16;
  camera.position.z = 100;

  
  // line
  var lineGeometry = new THREE.Geometry();
  lineGeometry.vertices.push(
    new THREE.Vector3( -10, 0, 0 ),
    new THREE.Vector3( -10, 10, 0 ),
    new THREE.Vector3( 10, 10, 0 ),
    new THREE.Vector3( 10, -10, 0 ),
    new THREE.Vector3( 20, -10, 0 ),
    new THREE.Vector3( 20, 10, 0 ),
    new THREE.Vector3( 30, 10, 0 ),
    new THREE.Vector3( 40, 10, 0 )
  );
  
  //var standardLine = new THREE.Line( lineGeometry, new THREE.LineBasicMaterial() );
  //scene.add( standardLine );
  
  var coloredLine = getColoredBufferLine( 0.2, 1.5, lineGeometry );
  scene.add( coloredLine );
  
  /* gui */  
  var options = {
  	steps: 0.2,
    phase: 1.5,
    update: function() {
      changeColor( coloredLine, options );
    }
  };
  
  var gui = new dat.GUI();
  gui.add( options, "steps" ).min( 0 ).max( 1 ).onChange( options.update );
  gui.add( options, "phase" ).min( 0 ).max( 2 * Math.PI ).onChange( options.update );
    
}
// end init

function changeColor( line, options ) {

  var colors = line.geometry.attributes.color.array;
  var segments = line.geometry.attributes.color.count * 3;
  var frequency = 1 /  ( options.steps * segments );
  var color = new THREE.Color();

  for ( var i = 0, l = segments; i < l; i ++ ) {
    color.set ( makeColorGradient( i, frequency, options.phase ) );

    colors[ i * 3 ] = color.r;
    colors[ i * 3 + 1 ] = color.g;
    colors[ i * 3 + 2 ] = color.b;

  }
  
  // update
	line.geometry.attributes[ "color" ].needsUpdate =...