three.js用于从透视摄影机计算给定z深度处的可见宽度/高度的函数

这两个功能将为您提供场景中距透视摄影机给定距离处的可见高度和宽度。
如果您想要创建一个与场景全宽/全高相同的对象，或者想要将对象放置在屏幕边缘等，这将非常有用。
这里是代码=摄像机位置.z；如果（深度<；摄影机偏移）深度+=cameraOffset；//垂直视场英寸=可视高度（深度，相机）；返回高度*照相机方面}；
在网络上有很多这种功能的例子，但我没有看到任何补偿相机定位的功能。
注意，我只在相机朝向默认方向（即沿负z轴）和所考虑的深度沿轴更远，尽管我认为它在其他方向也会起作用。
你有这样的例子吗？我不确定我是否理解它应该这样做。
当然，看看这个代码笔，它显示了从相机不同深度绘制的全屏高度/宽度矩形。
啊，我明白了，但这只是为固定相机做的？
是的，但是如果您想用相机移动它们，只需将对象添加为相机的子对象，并将相机添加为场景的子对象。
在这里，白色和红色将随相机移动：
很好，您可能需要考虑用这样的东西制作一个节点模块就像require(\"three-camera-world-size\")(THREE)之后THREE.Camera将绑定您的函数。
太棒了，@looee
如果能看到更多的内容，那就太好了！
这正是我需要的，谢谢@looee！
也许我可以使用类似的技术来确定大小与屏幕上的物理像素匹配的平面（深度）？基本上是这个问题：我们如何使用屏幕像素来调整大小？
也许我必须进行二元搜索：将深度除以二，看看哪个中间平面更接近视口的大小，然后进入该区域并递归。这似乎是一种“我不懂数学，所以我只想搜索它”的方法。
我认为还有一种真正的方法可以解决这个问题，而不需要像二进制搜索这样的测试技术，但是我还不确定这可能是什么。
这里是一个二进制搜索，它（理论上）可以找到大小与视口像素匹配的深度：nfunction findScreenDepth( camera, renderer ) {const { near, = ( far - near ) / 2 + nearconst == physicalViewHeight ) // almost never happensreturn midpoint}}n，但结果并不像我希望的那样准确。在下面的代码笔中，您可以看到深度记录到控制台。
（在桌面上打开演示，确保可视区域的高度大于以下嵌入中的高度，否则红线不会显示）
如果您将红色框的高度值设置为与窗口的高度值匹配，您会注意到红色框略高于视口，您必须给它一个比窗口小一点的大小，以便它正好适合。
这可能是因为浮点错误？
如果不使用此二进制搜索，获得此深度的正确方法是什么？
不管怎样，如果我以编程方式为框的尺寸提供精确的浮点值，它几乎可以完美地工作：
这两行（基本上）大小相同。左边的蓝线是WebGL，右边的粉红线是绝对位于画布顶部的

（请参见元素检查器）。
两条线的高度都是50px。酷！
这是可行的，但我认为可能有更精确的方法。我也许可以用这个来绘制地图Three.jsObject3Ds到DOM坐标空间…
谢谢@looee，这有助于将某些东西与DOM对齐。
但由于某些原因，东西并没有完全居中。在本例中，您会看到DIV元素后面的teal正方形没有完全对齐：
我认为默认情况下Three.js把所有东西都完美地集中在一起，我想DOM也会这样做（使用我提供的CSS）。试图找出这种情况发生的原因…
对不起，我更新了最后一个示例：我从青色方块中删除了-5X位置。
但是，在上一个示例中，您仍然可以看到青色突出在粉色之外，但我希望它能准确地隐藏在粉色后面。也许有浮点错误？
如果我用-52%而不是-50%来翻译粉色方块，那么我可以设法掩盖青色方块：
我想知道为什么。
你在看嵌入的代码笔吗（即在对话网站上）？
嵌入式笔在调整大小方面做了一些奇怪的事情。如果我在一个新窗口中打开它，方块就会完全匹配。
！有趣！如果没有CSS透视图，它是完全匹配的。
什么时候有透视图？我需要研究浏览器的实现。我发现不管我应用哪个CSS透视图的值，只要透视图的值存在，偏移量总是相同的，所以它让我觉得有一些关于别名的东西在起作用。
这就是我下一步想弄清楚的：将CSS透视图与Three.js透视图，以便我可以同时变换网格和mesh.quaternion.setFromEuler( new THREE.Euler( - Math.PI / 2, 0, 0 ) );。也许这将有助于指出问题所在。
，在应用透视图时，这会影响div。让它成为ReferenceError: STLLoader is not defined init.js:127:16解决了问题！请参阅：
太棒了。现在我可以继续了！感谢您的<meta = new STLLoader();nAnd I Just started today with three.js so I am sorry for any dumb questions or problemsnMaybe you use in your code:nvar>nbut it should be:nvar>image.png1023×433 9.48 KBnyeah even after loading it with the link, it is still upside down. Mugen87:nMaybe you use in your code:nvar>nbut it should be:nvar>nYeah that was the problem for the error ! Wazaa:nyeah even after loading it with the link, it is still upside down.nThen try to rotate the mesh like proposed some comments above.nHow can I see the axes of the object ?nThis doesn\"t>ntopView.addObject()和scene.add(object)功能。
啊哈！再次查看后，我意识到不使用这些函数和二进制搜索，而是匹配Three.js透视图到CSS3d透视图可以归结为一个简短的=${perspective}pxn，下面是一个简单的示例。请注意，蓝色/粉色是由于在粉色DOM平面的顶部渲染teal WebGL平面（缩放相机以置换DOM元素后面渲染的WebGL）：
此时，WebGL对象和DOM元素可以在同一3D空间中同时移动。例如，让我们对两者的位置和旋转设置动画（同样，如果缩放，您可以看到哪一个是WebGL，哪一个是DOM）：
作为后续功能，还可以使用OrbitControls控制DOM的位置。
我需要这些功能，谢谢你
@looeee我不明白你为什么要在计算可见高度之前从深度中减去（或加上）相机的z位置。是否假定Euler在视图空间中给出？在哪个空间中，当Euler时减去AxesHelper并在THREE.Euler时加上THREE.Euler转换为视图空间总是正确的？n@trusktr使用二进制/二等分搜索所做的基本上是反转函数。查看精简功能（假设深度为正值，从视图空间原点和视图空间>
这是可逆的，只需将物体移动到>n Functions to calculate the visible width / height at a given z-depth from a perspective cameran

three.js用于从透视摄影机计算给定z深度处的可见宽度/高度的函数

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形