THREE.JS:从3D透视场景转换为2D正交场景

时间:2015-05-01 18:16:05

标签: javascript graphics 3d three.js 2d

我在3D场景中有物体(很远),使用透视相机和使用正交相机设置的2D HUD:

this.scene = new THREE.Scene();
this.hud = new THREE.Scene();

this.camera = new THREE.PerspectiveCamera( 30, aspect, front, back );
this.camera.position.set(0,0,0);

this.hudCamera = new THREE.OrthographicCamera (-this.windowHalfX,this.windowHalfX, this.windowHalfY, -this.windowHalfY, 1, 10);
this.hudCamera.position.set(0,0,10);

这是我的渲染循环:

  updateFrame : function () {
    this.renderer.clear();
    this.renderer.render( this.scene, this.camera );
    this.renderer.clearDepth();
    this.renderer.render( this.hud, this.hudCamera );
  },

如何使用它们在3D场景中的位置找到HUD中物体的位置?

1 个答案:

答案 0 :(得分:2)

为了找到3D对象的2D HUD位置(使用three.js版本r71),您可以执行以下操作,我已经从this post进行了修改:

  findHUDPosition : function (obj) {
      var vector = new THREE.Vector3();

      obj.updateMatrixWorld();
      vector.setFromMatrixPosition(obj.matrixWorld);
      vector.project(this.camera);

      vector.x = ( vector.x * this.windowHalfX );
      vector.y = ( vector.y * this.windowHalfY );

      return {
          x: vector.x,
          y: vector.y,
          z: vector.z
      }
  }

参数obj是您尝试查找hud中位置的对象。

vector.project(this.camera);通过相机的this.camera平面从对象绘制矢量到near的位置。

vector组件的新值是投影向量与this.camera近平面的交点。

坐标位于three.js'世界坐标系虽然如此,所以我们必须快速转换为像素坐标,以扩展到我们画布的大小。

  vector.x = ( vector.x * this.windowHalfX );
  vector.y = ( vector.y * this.windowHalfY );

上述转换用于HUD的坐标系在屏幕中心有一个原点(0,0)的设置,其最大值为画布的一半'解析度。例如,如果画布为1024 x 768像素,则右上角的位置为(512,384)。

对于典型的屏幕坐标系,右下角为(1024,768),屏幕中间为(512,384)。要进行此设置,您可以使用以下转换,如this post

中所示
    vector.x = ( vector.x * widthHalf ) + widthHalf;
    vector.y = - ( vector.y * heightHalf ) + heightHalf;

请注意,z坐标现在并不重要,因为我们处于2D状态。

您要做的最后一件事是确保您在2D中显示的对象实际上对透视摄像机可见。这就像检查对象是否属于this.camera的平截头体一样简单。 source for following code

checkFrustrum : function (obj) {
    var frustum = new THREE.Frustum();
    var projScreenMatrix = new THREE.Matrix4();

    this.camera.updateMatrix();
    this.camera.updateMatrixWorld();

    projScreenMatrix.multiplyMatrices( this.camera.projectionMatrix, this.camera.matrixWorldInverse );

    frustum.setFromMatrix( new THREE.Matrix4().multiplyMatrices( this.camera.projectionMatrix,
                                                     this.camera.matrixWorldInverse ) );
    return frustum.containsPoint ( obj.position );
}

如果没有这样做,你可以让摄像机后面的物体在2D场景中被注册为可见物体(这会对物体追踪造成问题)。更新obj矩阵和矩阵世界也是一种很好的做法。