three.js - stacking SVG objects

by mmalex

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://mbnsay.com/rayys/assets/js/SVGLoader.js"></script>
<script src="https://threejs.org/examples/js/shaders/SSAOShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/SSAOPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/SimplexNoise.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://mbnsay.com/rayys/assets/js/FileSaver.js"></script>
<button onclick="saveJSON()">Save JSON</button>
<div id="container"></div>

CSS

body {
  color: #ffffff;
  font-family: Monospace;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
  background-color: #000000;
  margin: 0px;
  overflow: hidden;
}

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 5px;
}

a {
  color: #505050;
}

#container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

JavaScript

var renderer, stats, scene, camera, currentURL, saveRequested = false;
var ssaoPass, effectComposer;

init();
animate();

function init() {
  var saveLink = document.createElement('div');
  saveLink.style.position = 'absolute';
  saveLink.style.top = '10px';
  saveLink.style.width = '100%';
  saveLink.style.color = 'white !important';
  saveLink.style.textAlign = 'center';
  saveLink.innerHTML = '<a href="#" id="saveLink">Save Frame</a>';
  document.body.appendChild(saveLink);
  document.getElementById("saveLink").addEventListener('click', saveAsImage);

  var container = document.getElementById('container');

  camera = new THREE.PerspectiveCamera(38, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(-10, 250, 100);
  camera.lookAt(0, 0, 0);

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    gammaOutput: true,
    gammaFactor: 22
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

	container.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xfafafa);
  scene.fog = new THREE.FogExp2( 0xfafafa, 0.0005 );
		
  stats = new Stats();
  container.appendChild( stats.dom );

  var controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.screenSpacePanning = true;

  window.addEventListener('resize', onWindowResize, false);

  // currentURL = 'https://mail.dolodom.com/sendimg/admin/heart.svg';
  currentURL = 'http://mbnsay.com/rayys/assets/slices.svg';
  loadSVG(currentURL);
}

function loadSVG(url) {

	var helper = new THREE.GridHelper(500, 20);
  //helper.rotation.x = Math.PI / 2;
  // scene.add(helper);

  var light = new THREE.AmbientLight(0xffffff, 0.30); // soft white light
  scene.add(light);
  
  scene.add( new THREE.HemisphereLight(0xffffff, 0x080820, 0.12 ) );

  function addLight(from, to, intensity) {
  ...