SOURCE

const SEG_LENGTH = 100
var SEG_COUNT = 10 
let cylinders = []

var scene = new THREE.Scene();

// var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
// 				camera.position.set( 0, 20, 200 );
var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -10000, 10000);
camera.position.set(0, 2, 2);

renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.AmbientLight(0xFFFFFF);
light.position.set(100, 100, 200);
scene.add(light);

var light2 = new THREE.DirectionalLight(0xefefff, 1.5);
light.position.set(200, 100, 100).normalize();
scene.add(light2);

var helper = new THREE.GridHelper(2000, 40);
scene.add(helper);
var axisHelper = new THREE.AxesHelper(50);
scene.add(axisHelper);

var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, SEG_LENGTH, 32), new THREE.MeshLambertMaterial({
  color: 0x888888
}));
var sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32), new THREE.MeshLambertMaterial({
  color: 0x105820
}));
var vector0 = new THREE.Vector3(0, 1, 0);
let seg_box = [],
vector_last = new THREE.Vector3(0, 0, 0);

for (let i = 0; i < SEG_COUNT; i++) {
  let cylinder_ = cylinder.clone() 
  var vector = new THREE.Vector3(Math.random(), Math.random(), Math.random());
  vector.normalize() 
  var quaternion = new THREE.Quaternion();
  quaternion.setFromUnitVectors(vector0, vector) 
  cylinder_.applyQuaternion(quaternion) 			
  cylinder_.translateOnAxis(new THREE.Vector3(0, 1, 0), SEG_LENGTH / 2)
  //cylinder[i].translate(1,1,1)
  seg_box[i] = new THREE.Object3D();
  seg_box[i].add(cylinder_) 

  let sphere_ = sphere.clone()
  sphere_.translateOnAxis(vector, SEG_LENGTH)
  seg_box[i].add(sphere_)
  
  seg_box[i].translateOnAxis(vector_last, SEG_LENGTH) 
  vector_last.add(vector)
  scene.add(seg_box[i]);

}



var views = [
				{
					left: 0,
					top: 0,
					width: 0.5,
					height: 0.5,
					//background: new THREE.Color( 0.5, 0.5, 0.7 ),
					eye: [ 0, 300, 1800 ],
					up: [ 0, 1, 0 ],
					fov: 30,
					updateCamera: function ( camera, scene ) {
					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
					  camera.lookAt( scene.position );
					}
				},
				{
					left: 0.5,
					top: 0,
					width: 0.5,
					height: 0.5,
					//background: new THREE.Color( 0.5, 0.7, 0.7 ),
					eye: [ 1400, 800, 1400 ],
					up: [ 0, 1, 0 ],
					fov: 45,
					updateCamera: function ( camera, scene ) {
					  camera.position.set(0, 0, 2000);
            camera.lookAt(0,0,0)
					}
				},
  			{
					left: 0,
					top: 0.5,
					width: 0.5,
					height: 0.5,
					//background: new THREE.Color( 0.5, 0.5, 0.7 ),
					eye: [ 0, 300, 1800 ],
					up: [ 0, 1, 0 ],
					fov: 30,
					updateCamera: function ( camera, scene ) {
					  camera.position.set(2000, 0,0);
            camera.lookAt(0,0,0)
					}
				},
				{
					left: 0.5,
					top: 0.5,
					width: 0.5,
					height: 0.5,
					//background: new THREE.Color( 0.7, 0.5, 0.5 ),
					eye: [ 0, 1800, 0 ],
					up: [ 0, 0, 1 ],
					fov: 45,
					updateCamera: function ( camera, scene) {
            camera.position.set(0, 2000,0);
            camera.lookAt(0,0,0)
					  // camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
					  // camera.lookAt( camera.position.clone().setY( 0 ) );
					}
				}
			];
for (var ii =  0; ii < views.length; ++ii ) {
  var view = views[ii];
  // var camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
  var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -10000, 10000);
  camera.position.fromArray( view.eye );
  camera.up.fromArray( view.up );
  view.camera = camera;
}


var animate = function() {
  requestAnimationFrame(animate);

  //renderer.render(scene, camera);
  for ( var ii = 0; ii < views.length; ++ii ) {
					var view = views[ii];
					var camera = view.camera;
					view.updateCamera( camera, scene );
					var left   = Math.floor( window.innerWidth  * view.left );
					var top    = Math.floor( window.innerHeight * view.top );
					var width  = Math.floor( window.innerWidth  * view.width );
					var height = Math.floor( window.innerHeight * view.height );
					renderer.setViewport( left, top, width, height );
					renderer.setScissor( left, top, width, height );
					renderer.setScissorTest( true );
					renderer.setClearColor( view.background );
					camera.aspect = width / height;
					camera.updateProjectionMatrix();
					renderer.render( scene, camera );
    			if(ii)continue
          var controls = new THREE.OrbitControls(camera, renderer.domElement);
          controls.minDistance = 10;
          controls.maxDistance = 5000;
				}
};

animate();

			body {
			  margin: 0;
			}
			
			canvas {
			  width: 100%;
			  height: 100%
			}