stack geometries

by jscastro76

HTML

<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  
  <canvas id="myCanvas"/>

CSS

body {
			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		}

JavaScript

var renderer,
		  scene,
		  controls,
		  camera,
		  container = document.getElementById('myCanvas');

		//RENDERER
		renderer = new THREE.WebGLRenderer({
		  canvas: container,
		  antialias: true
		});
		//renderer.setClearColor(0x000000);
		renderer.setPixelRatio(window.devicePixelRatio); //device pixel ratio
		renderer.setSize(window.innerWidth, window.innerHeight); //canvas size

		//MATERIAL


		init();

		function init() {


		  scene = new THREE.Scene();
		  scene.background = new THREE.Color(0x999999);
		  var light = new THREE.AmbientLight(0xffffff);
		  light.position.set(0.5, 1.0, 0.5).normalize();
		  scene.add(light);
		  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		  camera.position.fromArray([0, 0, 140]);
		  scene.add(camera);

		  var gridHelper = new THREE.GridHelper(400, 40, 0x0000ff, 0x808080);
		  gridHelper.position.y = 0;
		  gridHelper.position.x = 0;
		  scene.add(gridHelper);

		  controls = new THREE.OrbitControls(camera, container);


		  var curve = new THREE.EllipseCurve(
		    0, 0, // ax, aY
		    15, 7, // xRadius, yRadius
		    0, Math.PI, // aStartAngle, aEndAngle
		    false // aClockwise
		  );

		  var points = curve.getSpacedPoints(5);

		  var path = new THREE.Path();
		  var geometry = path.createGeometry(points);

		  var material = new THREE.LineBasicMaterial({
		    color: 0xff0000
		  });

		  var line = new THREE.Line(geometry, material);

		  scene.add(line);


		  render();
		}


		function render() {
		  requestAnimationFrame(render);
		  controls.update();
		  renderer.render(scene, camera);
		}