I have managed to create a stack of volumes from planes using THREE.js, but the planes disappear when they become orthogonal to the viewing plane (which makes sense). How can I prevent this from happening? Is there a way to keep the slices aligned with the view? Check out the JSFiddle example 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);
}