Question

我从THREE.js的飞机上建立了一个体积堆栈，但是一旦它们与观察平面正交（逻辑上），这些平面就会隐藏起来。我怎么能避免这种情况;切片如何进行视图对齐？ 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);
}

Answer 1

如果我理解正确，你不能简单地重新对齐切片，因为纹理切片之间的空白区域......好......空 - 所以你需要编制一些纹理数据来填补这个空白。旋转平面会使切片纹理所代表的3D图像变得混乱。

一种解决方案是在三维中使用切片/纹理/平面（水平切片，垂直切片和深度切片以使其正常工作）。这样，当您从与一组切片正交的方向查看体积时，您将面对另一组平面。我不知道它是否有帮助，有点难以解释，但如果你在2D中考虑你的代码，你的飞机可以被认为是一组平行线。但你需要一个网格..

其他选项是从纹理数据中提取残余像素，并将其作为立方体，面向相机的平面或可能最有效的粒子渲染为3D。每个粒子都代表一个像素，并且可以从纹理切片中读取颜色。

Answer 2

添加side: THREE.DoubleSide有点帮助： http://jsfiddle.net/WVTvM/1/

Answer 3

通过使用所有object3d实例共享的lookAt()函数，您可以将切片作为整个对象与以下代码行对齐：

volume.lookAt(camera.position);

假设切片和相机的名称分别是音量和相机。

P.S。您需要将所有切片保留在一个组中才能使其正常工作。

THREE.js - 如何在体积渲染中查看对齐切片？

3 个答案: