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 图像变得一团糟。

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

其他选择是从纹理数据中提取单个像素，并将它们渲染为 3D 立方体、面向相机的平面，或者可能最有效地渲染为粒子。每个粒子代表一个像素，并从纹理切片中读取颜色。

于 2013-01-09T13:39:01.370 回答
2

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

于 2013-01-09T14:10:11.797 回答
1

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

volume.lookAt(camera.position);

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

PS您需要将所有切片保留在一组中才能正常工作。

于 2017-08-27T19:00:47.850 回答