THREE. Lines Viewer

by Konstantin Cryman

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

CSS

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

JavaScript

var camera, controls, scene, renderer;

init();
render();

function init() {
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 16000 );
    camera.position.z = 700;
    camera.position.y = 0;
    scene.add( camera );
    
    controls = new THREE.OrbitControls( camera );
    controls.addEventListener( 'change', render );
    
    
    
    // lights
    light = new THREE.PointLight( 0xffffff );
    camera.add( light );
    
    light = new THREE.AmbientLight( 0x222222 );
    scene.add( light );
    
    function drawArray( arr ){
    	var type = typeof arr[0];
    
      var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
      });
    	var geometry = new THREE.Geometry();
    
      
      if( type == 'number' ) {
      
          for( var i = 0; i < arr.length; i+=3 ){
             geometry.vertices.push( new THREE.Vector3( 
                 arr[i], 
                 arr[i+1], 
                 arr[i+2] 
             ));
          }
      } else {
          if( 'x' in arr[0]){
              for( var i = 0; i < arr.length; i++ ){
                  geometry.vertices.push( new THREE.Vector3( 
                    arr[i].x, 
                    arr[i].y, 
                    arr[i].z 
                  ) );
              }
          } else {
              for( var i = 0; i < arr.length; i++ ){
                  geometry.vertices.push( new THREE.Vector3( 
                    arr[i][0], 
                    arr[i][1], 
                    arr[i][2] 
                  ) );
              }
          }
      }
      
      var line = new THREE.Line( geometry, material );
      scene.add( line );
    }
    
    //drawArray([ -100, 0, 0, 100, 0, 0 ]);


    // drawArray([-17,0,89.88764190673828,-17,-9,89.88764190673828,-72,-9,0,-72,0,0,-17,0,89.88764190673828]);
    //drawArray([  -50, -50, 12, 35, 50, 50]);
    
  	function getRandomArbitrary(min, max) {
      return...