获取视野左上角的位置答案

【问题标题】：Get position of upper left corner of field of view获取视野左上角的位置
【发布时间】：2020-02-27 00:17:42
【问题描述】：

我希望能够在视口的左上角放置一个实体。对定位进行硬编码很容易，但当然这会因不同的屏幕尺寸而中断。有没有办法让相机中可见的左上角的 xy 坐标。 IE。屏幕中心到边缘的x距离是多少，中心到顶部的y距离是多少？

【问题讨论】：

看看这个帖子stackoverflow.com/questions/48434953/…
@ThomasWilliams 哇，谢谢！这非常有帮助。我越来越近了。如果我记录相机的边界矩形，则该位置不在屏幕上。为什么相机的矩形不在可见视野范围内？
getBoundingClientRect 返回一个屏幕空间二维向量。接下来的几行将鼠标位置（在矩形内）转换为 3D 空间。您可以使用它来将对象放置在 3D 中。不使用鼠标位置，而是输入您希望对象在屏幕空间中的位置的 2D 向量。希望这是有道理的。我还没有在现实世界中测试过这些。
如果您知道如何使这项工作发挥作用，您介意发布一个简单的故障演示，以便未来的用户可以向您学习吗？
如果/当我得到它，我肯定会。感谢您的帮助！

标签： aframe

【解决方案1】：

这是我的解决方案，它允许您根据屏幕坐标在相机视图中修复 aframe 元素。

const visibleHeightAtZDepth = ( depth ) => {
  const camera = AFRAME.scenes[0].camera;
  // compensate for cameras not positioned at z=0
  const cameraOffset = camera.position.z;
  if ( depth < cameraOffset ) depth -= cameraOffset;
  else depth += cameraOffset;

  // vertical fov in radians
  const vFOV = camera.fov * Math.PI / 180; 

  // Math.abs to ensure the result is always positive
  return 2 * Math.tan( vFOV / 2 ) * Math.abs( depth );
};

const visibleWidthAtZDepth = ( depth ) => {
  const camera = AFRAME.scenes[0].camera;
  const height = visibleHeightAtZDepth( depth, camera );
  let width = height * camera.aspect;
  return width;
};

const setHudPosition = ( fovWidth, fovHeight, depth) => {
  document.getElementById('hud').object3D.position.set(-fovWidth/2, fovHeight/2, depth);
}

setHudPosition(visibleWidthAtZDepth(-1), visibleHeightAtZDepth(-1), -1);

您可以使用高度和宽度函数来获取任意深度的可见视野。

【讨论】：