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 );
// camera.lookAt({
//                     x : 0,
//                     y : 0,
//                     z : 0
//                 });


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(1000, 50);
scene.add(helper);
var axisHelper = new THREE.AxisHelper( 50 );
scene.add( axisHelper );

const H=297,W=210
function paper(u,t,target){
  let x,y,z
  y=-x+1.5*H
  x=210*u
  y=297*t
  z=0
  target.set(x,y,z)
}

var geometry = new THREE.ParametricGeometry( paper, 25, 25 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var klein = new THREE.Mesh( geometry, material );
scene.add( klein );




var controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.minDistance = 10;
				controls.maxDistance = 5000;

var animate = function() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();

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