Three.js相对于视口的平面边界矩形和近平面裁剪问题

问题描述 投票：0回答：1

这是一个一般的WebGL问题，但是为了清楚起见，我将使用three.js在这里演示我的问题。

假设我有一架飞机和一台透视相机。我正在尝试获取相对于视口/窗口的平面的边界矩形。到目前为止，这就是我的做法：

  • 首先，通过乘以摄影机来获得modelViewProjectionMatrix带有平面矩阵的projectionMatrix。
  • 将那个modelViewProjectionMatrix应用于平面的4个角顶点。
  • 获取结果的最小/最大值并将其转换回视口坐标。

效果很好，直到飞机被飞机夹在飞机附近为止（通常在使用高视野时），弄乱了我的结果。

即使靠近平面的相机正在修剪平面的一部分，有什么方法可以获取正确的值？也许是通过获取飞机与靠近飞机的相机之间的交点？

这是Three.js代码和相应的jsfiddle（取消注释的109行显示错误的坐标）：https://jsfiddle.net/fbao9jp7/1/

let scene = new THREE.Scene();

let ww = window.innerWidth;
let wh = window.innerHeight;

// camera
const nearPlane = 0.1;
const farPlane = 200;
let camera = new THREE.PerspectiveCamera(45, ww / wh, nearPlane, farPlane);

scene.add(camera);

// renderer
let renderer = new THREE.WebGLRenderer();
renderer.setSize(ww, wh);
document.getElementById("canvas").appendChild(renderer.domElement);

// basic plane
let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(0.75, 0.5),
  new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('https://source.unsplash.com/EqFjlsOZULo/1280x720'),
    side: THREE.DoubleSide,
  })
);

scene.add(plane);

function displayBoundingRectangle() {
  camera.updateProjectionMatrix();

  // keep the plane at a constant position along Z axis based on camera FOV
  plane.position.z = -1 / (Math.tan((Math.PI / 180) * 0.5 * camera.fov) * 2.0);

  plane.updateMatrix();

  // get the plane model view projection matrix
  let modelViewProjectionMatrix = new THREE.Matrix4();
  modelViewProjectionMatrix = modelViewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, plane.matrix);

  let vertices = plane.geometry.vertices;

  // apply modelViewProjectionMatrix to our 4 vertices
  let projectedPoints = [];
  for (let i = 0; i < vertices.length; i++) {
    projectedPoints.push(vertices[i].applyMatrix4(modelViewProjectionMatrix));
  }

  // get our min/max values
  let minX = Infinity;
  let maxX = -Infinity;

  let minY = Infinity;
  let maxY = -Infinity;

  for (let i = 0; i < projectedPoints.length; i++) {
    let corner = projectedPoints[i];

    if (corner.x < minX) {
      minX = corner.x;
    }
    if (corner.x > maxX) {
      maxX = corner.x;
    }

    if (corner.y < minY) {
      minY = corner.y;
    }
    if (corner.y > maxY) {
      maxY = corner.y;
    }
  }

  // we have our four coordinates
  let worldBoundingRect = {
    top: maxY,
    right: maxX,
    bottom: minY,
    left: minX,
  };

  // convert coordinates from [-1, 1] to [0, 1]
  let screenBoundingRect = {
    top: 1 - (worldBoundingRect.top + 1) / 2,
    right: (worldBoundingRect.right + 1) / 2,
    bottom: 1 - (worldBoundingRect.bottom + 1) / 2,
    left: (worldBoundingRect.left + 1) / 2,
  };

  // add width and height
  screenBoundingRect.width = screenBoundingRect.right - screenBoundingRect.left;
  screenBoundingRect.height = screenBoundingRect.bottom - screenBoundingRect.top;

  var boundingRectEl = document.getElementById("plane-bounding-rectangle");

  // apply to our bounding rectangle div using window width and height
  boundingRectEl.style.top = screenBoundingRect.top * wh + "px";
  boundingRectEl.style.left = screenBoundingRect.left * ww + "px";
  boundingRectEl.style.height = screenBoundingRect.height * wh + "px";
  boundingRectEl.style.width = screenBoundingRect.width * ww + "px";
}


// rotate the plane
plane.rotation.x = -2;
plane.rotation.y = -0.8;

/* UNCOMMENT THIS LINE TO SHOW HOW NEAR PLANE CLIPPING AFFECTS OUR BOUNDING RECTANGLE VALUES */
//camera.fov = 150;

// render scene
render();

// show our bounding rectangle
displayBoundingRectangle();

function render() {
  renderer.render(scene, camera);

  requestAnimationFrame(render);
}
body {
  margin: 0;
}

#canvas {
  width: 100vw;
  height: 100vh;
}

#plane-bounding-rectangle {
  position: fixed;
  pointer-events: none;
  background: red;
  opacity: 0.2;
}
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.min.js"></script>
<div id="canvas"></div>
<div id="plane-bounding-rectangle"></div>

非常感谢，

javascript matrix three.js webgl perspective
1个回答
0
投票

这显示问题吗？

let scene = new THREE.Scene();

let ww = window.innerWidth;
let wh = window.innerHeight;

// camera
const nearPlane = 0.1;
const farPlane = 200;
let camera = new THREE.PerspectiveCamera(45, ww / wh, nearPlane, farPlane);

scene.add(camera);

// renderer
let renderer = new THREE.WebGLRenderer();
renderer.setSize(ww, wh);
document.getElementById("canvas").appendChild(renderer.domElement);

// basic plane
let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(0.75, 0.5),
  new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('https://source.unsplash.com/EqFjlsOZULo/1280x720'),
    side: THREE.DoubleSide,
  })
);

scene.add(plane);

function displayBoundingRectangle() {
  camera.updateProjectionMatrix();

  // keep the plane at a constant position along Z axis based on camera FOV
  plane.position.z = -1 / (Math.tan((Math.PI / 180) * 0.5 * camera.fov) * 2.0);

  plane.updateMatrix();

  // get the plane model view projection matrix
  let modelViewProjectionMatrix = new THREE.Matrix4();
  modelViewProjectionMatrix = modelViewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, plane.matrix);

  let vertices = plane.geometry.vertices;
  
  // get our min/max values
  let minX = Infinity;
  let maxX = -Infinity;

  let minY = Infinity;
  let maxY = -Infinity;

  // apply modelViewProjectionMatrix to our 4 vertices
  let corner = new THREE.Vector3();
  for (let i = 0; i < vertices.length; i++) {
    corner.copy(vertices[i]);
    corner.applyMatrix4(modelViewProjectionMatrix);

    minX = Math.min(corner.x, minX);
    maxX = Math.max(corner.x, maxX);
    minY = Math.min(corner.y, minY);
    maxY = Math.max(corner.y, maxY);
  }

  // we have our four coordinates
  let worldBoundingRect = {
    top: maxY,
    right: maxX,
    bottom: minY,
    left: minX,
  };
  document.querySelector('#info').textContent = `${minX.toFixed(2)}, ${maxX.toFixed(2)}, ${minY.toFixed(2)}, ${minY.toFixed(2)}`;

  // convert coordinates from [-1, 1] to [0, 1]
  let screenBoundingRect = {
    top: 1 - (worldBoundingRect.top + 1) / 2,
    right: (worldBoundingRect.right + 1) / 2,
    bottom: 1 - (worldBoundingRect.bottom + 1) / 2,
    left: (worldBoundingRect.left + 1) / 2,
  };

  // add width and height
  screenBoundingRect.width = screenBoundingRect.right - screenBoundingRect.left;
  screenBoundingRect.height = screenBoundingRect.bottom - screenBoundingRect.top;

  var boundingRectEl = document.getElementById("plane-bounding-rectangle");

  // apply to our bounding rectangle div using window width and height
  boundingRectEl.style.top = screenBoundingRect.top * wh + "px";
  boundingRectEl.style.left = screenBoundingRect.left * ww + "px";
  boundingRectEl.style.height = screenBoundingRect.height * wh + "px";
  boundingRectEl.style.width = screenBoundingRect.width * ww + "px";
}


// rotate the plane
plane.rotation.x = -2;
plane.rotation.y = -0.8;

/* UNCOMMENT THIS LINE TO SHOW HOW NEAR PLANE CLIPPING AFFECTS OUR BOUNDING RECTANGLE VALUES */
//camera.fov = 150;

// render scene
render();


function render(time) {
  camera.fov = THREE.MathUtils.lerp(45, 150, Math.sin(time / 1000) * 0.5 + 0.5);

  // show our bounding rectangle
  displayBoundingRectangle();
  renderer.render(scene, camera);

  requestAnimationFrame(render);
}
body {
  margin: 0;
}

#canvas {
  width: 100vw;
  height: 100vh;
}

#plane-bounding-rectangle {
  position: fixed;
  pointer-events: none;
  background: red;
  opacity: 0.2;
}
#info {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  color: white;
}
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.min.js"></script>
<div id="canvas"></div>
<div id="plane-bounding-rectangle"></div>
<pre id="info"></pre>

如果不清楚，问题出在摄像头台锥后面。截头圆锥体定义了从近到远的截断金字塔，但过去近（朝向摄像机）的数学最终到达了单个点，该点之后的任何内容开始开始向后扩展]]

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.