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;
		}

JavaScript

let scene, camera, renderer;

let cubeGroup;

init();
animate();

function init() {


  const mainLight = new THREE.DirectionalLight(0xffffff, 5.0);
  mainLight.position.set(10, 10, 10);

  const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 3);

  scene.add(mainLight);
  scene.add(ambientLight);

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

var points = curve.getSpacedPoints( 20 );

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 );

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.physicallyCorrectLights = true;

document.body.appendChild(renderer.domElement);

}

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

}