title: Transparent objects in Three.js
body: <p>I am trying to write a small program in Three.js that displays two spheres, one inside the other. The radius of sphere 2 is supposed to oscillate between 0.5 and 1.5 while the radius of sphere1 is always 1.0. Each sphere is transparent (opacity: 0.5) so that it would be possible to see the smaller sphere contained in the larger one. Of course the roles of &quot;smaller&quot; and &quot;larger&quot; change as the radius of sphere 2 varies.</p>
  <p>The problem now is that Three.js makes the first sphere transparent. I define in my program but not the second one. If I first define sphere 1 then it becomes transparent, but then sphere 2 is completely opaque. If I first define sphere 2 then this is the transparent one. The order of adding them to the scene plays no role.</p>
  <p>I include a minimal program below that shows what is going on (without the animation). In its current state only sphere 1 is visible and it is not transparent. If I define sphere 1 before sphere 2 then sphere 1 becomes transparent, but sphere 2 is no longer transparent. Changing sphere 2's radius to 1.2 will then hide sphere 1.</p>
  <p>Is there a way to make both spheres transparent?</p>
  <pre class="lang-javascript prettyprint-override"><code>var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  
  camera.position.set(0, 0, 3);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  scene.add(camera);
  
  var ambient = new THREE.AmbientLight( 0x555555 );
  scene.add(ambient);
  
  var light = new THREE.DirectionalLight( 0xffffff );
  light.position = camera.position;
  scene.add(light);
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // Definition 2
  var geometry2 = new THREE.SphereGeometry(0.8,32,24);
  var material2 = new THREE.MeshLambertMaterial({color: 0x0000ff, transparent: true, opacity: 0.5});
  var sphere2 = new THREE.Mesh(geometry2, material2);
  
  // Definition 1
  var geometry1 = new THREE.SphereGeometry(1.0,32,24);
  var material1 = new THREE.MeshLambertMaterial({color: 0x00ff00, transparent: true, opacity: 0.5});
  var sphere1 = new THREE.Mesh(geometry1, material1);
  
  scene.add(sphere1);
  scene.add(sphere2);
  
  renderer.render(scene, camera);
  </code></pre>