相关疑难解决方法(0)

使用three.js我有以下内容.

• 包含多个Object3D实例的场景
• 几个预定义的摄像头Vector3位置
• 如果屏幕调整大小,画布的动态宽度/高度
• 用户可以选择一个对象(从上面)
• 用户可以选择摄像机位置(从上方)

给定正在查看的对象和摄像机位置,他们选择如何计算最终摄像机位置以"最佳地适应"屏幕上的对象？

如果在某些屏幕上"按原样"使用摄像机位置,则对象会在我的视口边缘流血,而其他位置则显得较小.我相信可以将物体安装到相机平截头体上,但却找不到合适的物体.

我有一个场景，我想将透视对象（即远离时看起来较小的对象）与正交对象（即，无论距离如何都显示相同大小的对象）结合起来。透视对象是渲染“世界”的一部分，而正交对象是装饰品，如标签或图标。与 HUD 不同的是，我希望正交对象在世界“内部”渲染，这意味着它们可以被世界对象覆盖（想象一下在标签之前经过的平面）。

我的解决办法是使用一个渲染器，但两个场景，一个具有PerspectiveCamera和一个带OrthogographicCamera。我在不清除 z 缓冲区的情况下按顺序渲染它们（渲染器的autoClear属性设置为false）。我面临的问题是，我需要同步每个场景中对象的放置，以便为一个场景中的对象分配一个 z 位置，该位置位于另一个场景中位于它之前的对象之后，但位于其之前的对象之前在它后面。

为此，我将我的透视场景指定为“领先”场景，即。所有对象的所有坐标（透视和正交）都是基于这个场景分配的。透视对象直接使用这些坐标并在该场景中使用透视相机进行渲染。正交对象的坐标被转换为正交场景中的坐标，然后使用正交相机在该场景中渲染。我通过将透视场景中的坐标投影到透视相机的视图窗格，然后使用正交相机返回到正交场景来进行转换：

position.project(perspectiveCamera).unproject(orthogographicCamera);

唉，这并不像预期的那样工作。正交对象总是在透视对象之前渲染，即使它们应该在它们之间。考虑这个例子，其中蓝色圆圈应该显示在红色方块后面，但在绿色方块之前（它不是）：

var pScene = new THREE.Scene();
var oScene = new THREE.Scene();

var pCam = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
pCam.position.set(0, 40, 50);
pCam.lookAt(new THREE.Vector3(0, 0, -50));

var oCam = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 500);
oCam.Position = pCam.position.clone();

pScene.add(pCam);
pScene.add(new THREE.AmbientLight(0xFFFFFF)); …

我正在尝试在 Three.js 中可视化胶片相机裁剪和纵横比。请耐心等待，这是一道数学问题，我无法用更简短的语言来描述它......

我不只是使用 CameraHelper，而是为每个相机使用三个稍微修改过的 CameraHelper 对象。当查看相机（锥体）时，或者通过相机查看时，可以看到辅助线，辅助线有效地为当前相机创建引导线。

• 框架助手（带有渲染侧面的蓝色）。考虑到焦距和传感器或胶片尺寸，这是经过配置的并且应该是实际相机所看到的。计算在getFOVFrame.

• 监控助手（白色）。我们这里的帧长宽比是 1.5。例如，如果我们计划使用长宽比为 1.5 的相机拍摄长宽比为 2.35（电影院）的影片，则这将显示帧的裁剪区域。因此，它需要完全适合框架，上下或两侧都有额外的空间，但不能两者兼而有之。计算在getFOVMonitor.

• 屏幕助手（紫色）。我们希望在浏览器中看到完整的东西，如果浏览器窗口尺寸/长宽比不同，我们会调整实际渲染的 Three.js 相机，使其适合浏览器窗口和尺寸。因此，这个助手始终具有当前浏览器窗口的宽高比和焦距，以便它适合框架和监视器助手。计算于getFOVScreen

因此，根据我们实际首选的相机（帧助手），我们需要计算监控相机并调整它的视场，使其完全适合帧相机内。然后我们还需要计算屏幕相机并调整它的视场，使帧相机完全适合内部。

我当前的解决方案看起来几乎是正确的，但有一些问题。对于长镜头（小视场，大焦距），这似乎是正确的：

• 仔细一看，看起来是正确的：
• 当前相机和前面的相机看起来都是正确的：
• 仔细一看，看起来是正确的：

但在广角镜头（大视场、小焦距）下，解决方案开始失效，白色监视器助手周围有额外的空间，例如：

• 往里看，白色的盒子应该从侧面接触蓝色的盒子：
• 当前相机和前面的相机看起来都是错误的，白色框应该接触蓝色框的侧面（两者都有很宽的镜头）：
• 通过（非常宽的镜头）看，看起来不对，白色盒子应该接触蓝色盒子，蓝色盒子应该接触紫色盒子：

所以我认为我对各种相机的计算是错误的，尽管结果看起来几乎“足够接近”。

下面的代码返回垂直 FOV、水平 HFOV 和纵横比，然后用于配置相机和助手：

// BLUE camera fov, based on physical camera settings (sensor dimensions and focal length)
var getFOVFrame = function() {
  var fov = 2 * Math.atan( sensor_height / ( focal_length * 2 ) ) * ( 180 / Math.PI );
  return fov;
}
var getHFOVFrame = …