title: Three.js - transparent material on one side, but showing background, not inner sides
body: <p>I would to apply a transparent material on front-side faces of a geometry. It's quite easy:</p>
  
  <pre><code>var normal = new THREE.MeshNormalMaterial();
              normal.side = THREE.BackSide;
      var materials = [
                  normal,
              new THREE.MeshBasicMaterial( { transparent: true, opacity: 0 } )
              ];
  
      for( var i = 0; i &lt; geometry.faces.length; i++ ) {
                  geometry.faces[ i ].materialIndex = 0;
              }
      //a 'hole' to look inside
              geometry.faces[ 0 ].materialIndex = 1;
              geometry.faces[ 1 ].materialIndex = 1;
              mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
  </code></pre>
  
  <p>Codepen to example above: <a href="http://codepen.io/pyort/pen/egqbLY" rel="nofollow noreferrer">http://codepen.io/pyort/pen/egqbLY</a></p>
  
  <p>But there is a catch: when looking on a front-side of a face, I would like to show what's underneath this geometry, not back-side.</p>
  
  <p>I'm not sure how to explain that in easy language, here is visual explanation <a href="https://i.stack.imgur.com/KKf0L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KKf0L.png" alt="enter image description here"></a></p>
  
  <p>What is my goal is this kind of 'portal' thing, so when you look from one side, it appears to have depth, but from other angles it's look super thin. How to achieve such an effect? Use some kind of shader? Use mirror techniques?</p>
  
  <p>Thanks.</p>