I sucesfully build up a volume stack from planes with THREE.js, but the planes are hiding as soon as they are orthogonal to the viewing plane (logically). How can i avoid that; How can the slices be view-aligned? JSFiddle here

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000 );
  camera.position.x = 0;
  camera.position.y = 20;
  camera.position.z = 1000;
  //camera.rotation.x = 45 * (Math.PI / 180);
  scene.add( camera );

  geometry = new THREE.PlaneGeometry(640, 352);

  for ( var i = 34; i <= 511; i ++ ) {
    var texture = THREE.ImageUtils.loadTexture( 'bodyslice/' + i + '.jpg' );
    console.info(texture);
    texture.magFilter = THREE.NearestFilter;
    texture.minFilter = THREE.NearestFilter;

    var material = new THREE.MeshBasicMaterial( { map: texture, opacity: 0.05,             transparent: true, depthTest: false} );
    var plane = new THREE.Mesh(geometry, material);

    plane.position.y = 300 - i;
    plane.rotation.x = 90 * Math.PI / 180;
    plane.doubleSided = true;

    scene.add( plane );
  }

  renderer = new THREE.WebGLRenderer({ antialias: false });
  renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  container.appendChild(renderer.domElement);
}

I sucesfully build up a volume stack from planes with THREE.js, but the planes are hiding as soon as they are orthogonal to the viewing plane (logically). How can i avoid that; How can the slices be view-aligned? JSFiddle here

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000 );
  camera.position.x = 0;
  camera.position.y = 20;
  camera.position.z = 1000;
  //camera.rotation.x = 45 * (Math.PI / 180);
  scene.add( camera );

  geometry = new THREE.PlaneGeometry(640, 352);

  for ( var i = 34; i <= 511; i ++ ) {
    var texture = THREE.ImageUtils.loadTexture( 'bodyslice/' + i + '.jpg' );
    console.info(texture);
    texture.magFilter = THREE.NearestFilter;
    texture.minFilter = THREE.NearestFilter;

    var material = new THREE.MeshBasicMaterial( { map: texture, opacity: 0.05,             transparent: true, depthTest: false} );
    var plane = new THREE.Mesh(geometry, material);

    plane.position.y = 300 - i;
    plane.rotation.x = 90 * Math.PI / 180;
    plane.doubleSided = true;

    scene.add( plane );
  }

  renderer = new THREE.WebGLRenderer({ antialias: false });
  renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  container.appendChild(renderer.domElement);
}

• javascript
• three.js
• webgl

• change the viewport, perhaps? – John Dvorak Commented Jan 9, 2013 at 9:49

3 Answers 3

If I understood correctly, you can't simply realign the slices, as the empty space between the texture slices is... well... empty - so you would need to make up some texture data to fill that gap. Rotating the planes would make a mess of the 3D image represented by the slice textures.

One solution would be to have slices/textures/planes in three dimensions (horizontal slices, vertical and depth slices to really make it work). This way when you view the volume from a direction orthogonal to one set of slices, you will face another set of planes. I don't know if it helps, a bit hard to explain, but if you think about your code in 2D, your planes can be thought as a set of parallel lines. But you would need a grid..

Other option would be to extract the invidual pixels from your texture data, and render them in 3D as cubes, planes facing the camera, or probably most efficiently, as particles. Each particle would represent a pixel, and would have the color read from the texture slice.

Addding side: THREE.DoubleSide helps a bit: http://jsfiddle/WVTvM/1/

By using the lookAt() function shared by all object3d instances, you can align the slices as a whole object with the following line of code:

volume.lookAt(camera.position);

assuming that the names of the slices and camera are volume and camera respectively.

P.S. You would need to keep all the slices in one group for this to work well.