在 THREE.js 中，我们使用以下函数构建了一个相机

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

我们从光学中知道，相机的视野与焦距通过以下等式有关

FOV = arctan(d/2f)

其中FOV是以度为单位的垂直 FOV，d以毫米为单位的图像平面高度，以及以毫米f为单位的相机焦距。

阅读有关此事的文档后，似乎d默认设置为35mm / aspectRatio.

我们可以表达FOV这样的

FOV = arctan((35/(width/height))/2f) = arctan(filmHeight / 2f)

作为健全性检查，我打印了以下值，以查看是否能取回75.

Math.atan(camera.getFilmHeight()/(2 * camera.getFocalLength())) * 180 / Math.PI;

但是..这个值是 37.50000000000001

这恰好是 的预期焦距的一半75。

所以，我想知道我是否在某个地方做错了数学，或者我是否误解了 THREE.js 报告的值。

我有一个场景，我想将透视对象（即远离时看起来较小的对象）与正交对象（即，无论距离如何都显示相同大小的对象）结合起来。透视对象是渲染“世界”的一部分，而正交对象是装饰品，如标签或图标。与 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)); …

我尝试在脚本中在透视相机和正交相机之间切换。我希望物体处于一定深度以保持其投影尺寸。我放弃了去理解几何......

您能否提供一些简单教程的链接，这对我来说太复杂了。

对于position.z==0我的对象有：

perspCamera = new THREE.PerspectiveCamera(45, W / H, 1, 1000);
perspCamera.position.z = 100;

var S=Math.tan((45/180)*Math.PI)*100;
orthoCamera = new THREE.OrthographicCamera( -S, S, S, -S, 1, 1000 );

这是不正确的。

更新：

我明白了，我将用 codepen 链接发布答案