2

THREE.js を使用してプレーンからボリューム スタックを構築することに成功しましたが、(論理的に) ビュー プレーンに直交するとすぐにプレーンが非表示になります。どうすればそれを回避できますか; スライスをビューに揃えるにはどうすればよいですか? JSFiddleここ

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);
}
4

3 に答える 3

3

私が正しく理解していれば、テクスチャスライス間の空のスペースは...まあ...空なので、スライスを単純に再配置することはできません。そのため、そのギャップを埋めるためにテクスチャデータを作成する必要があります。平面を回転させると、スライステクスチャで表される3D画像が混乱します。

1つの解決策は、3次元のスライス/テクスチャ/平面（実際に機能させるための水平スライス、垂直スライス、深さスライス）を使用することです。このように、スライスの1つのセットに直交する方向からボリュームを表示すると、別の平面のセットに直面します。それが役立つかどうかはわかりませんが、説明するのは少し難しいですが、2Dでコードを考えると、平面は平行線のセットと考えることができます。ただし、グリッドが必要になります。

他のオプションは、テクスチャデータから個々のピクセルを抽出し、それらを3Dで立方体、カメラに面する平面、またはおそらく最も効率的に粒子としてレンダリングすることです。各パーティクルはピクセルを表し、テクスチャスライスから色が読み取られます。

于 2013-01-09T13:39:01.370 に答える
2

追加side: THREE.DoubleSideすると少し役立ちます: http://jsfiddle.net/WVTvM/1/

于 2013-01-09T14:10:11.797 に答える