THREE. random range direction

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>
<input id="fl" type="file">
<div id="container"></div>

CSS

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

JavaScript

var camera, controls, scene, renderer;

init();
render();

function init() {
    
    const container = document.getElementById('container');
    
    scene = new THREE.Scene();

console.log( { 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, container );
    controls.addEventListener( 'change', render );
    
    
    
    // lights
    light = new THREE.PointLight( 0xffffff );
    camera.add( light );
    
    light = new THREE.AmbientLight( 0x222222 );
    scene.add( light );
    
    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }

    const generateLine = ( options = {} ) => {
      var material = new THREE.LineBasicMaterial({
          color: options.color ? options.color :  0x0000ff,
        });
      var geometry = new THREE.Geometry();
      const v1 = new THREE.Vector3( 0, 0, 0 );      
      const v2 = new THREE.Vector3( 45, 50, 0 );
      v2.normalize();
      v2.multiplyScalar( options.lineLength ? options.lineLength :  55 );
      geometry.vertices.push( v1 );
      geometry.vertices.push( v2 );
      return new THREE.Line( geometry, material );
    }

    const degToRad = ( deg ) => {
      return deg * Math.PI/180;
    }

    var _testRotation = new THREE.Euler( 
        degToRad( -15 + Math.random() * 30 ) ,   
        0,
        degToRad( -15 + Math.random() * 30 ),
      'XYZ' );
   
    const controlLine1 = generateLine({color: 0x00ff00});
    scene.add( controlLine1 );
    
    
    const line1 = generateLine({color: 0xff0000});
    line1.geometry.vertices[ 1 ].applyEuler( _testRotation );
    //scene.add( line1 );
    
    const line2 = generateLine({color: 0x00ff00});
    //scene.add( line2 );
    
    const testGeometry = new THREE.RingGeometry( 15, 15.5, 32, 32 );
    const testMaterial = new...