获取视野左上角的位置

Question

我希望能够将实体放置在视口的左上角。对位置进行硬编码很容易，但是对于不同的屏幕尺寸，这当然会中断。有没有一种方法可以使相机中可见的东西的左上角的xy坐标相协调。即从屏幕中心到边缘的x距离是多少，从中心到顶部的y距离是多少？

Answer 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);

您可以使用高度和宽度功能获得任意深度的可见视野。