Three.js 缩放以适应对象的宽度(忽略高度)

标签 three.js

我有一组 block 对象,我想设置透视相机,以便它们的整个宽度完全可见(高度会太大 - 没关系,我们要上下平移) .

我发现有很多与此类似的问题,例如:

Adjusting camera for visible Three.js shape

Three.js - Width of view

THREE.JS: Get object size with respect to camera and object position on screen

How to Fit Camera to Object

ThreeJS. How to implement ZoomALL and make sure a given box fills the canvas area?

但是,它们似乎都不能完全涵盖我正在寻找的所有内容:

  • 我对高度不感兴趣,只对宽度感兴趣(它们不会相同 - 尺寸将是动态的,但我可以假设高度将大于宽度)

  • camera.position.z(或者我猜的 FOV)是未知的,所以我试图以正确的方式求解方程来解决这个问题

(我不太擅长 3D 数学。提前致谢!)

最佳答案

就我而言,我能够大大简化这个问题......

由于我知道物体的整体尺寸,因此我可以通过多次更改相机的 z 位置并查看看起来最好的距离来简单地得出合适的距离。

我真正的问题是,由于宽高比不同,相同的 z 位置在不同尺寸的屏幕上相对于屏幕宽度给出了不同的宽度。

所以我所做的就是将距离值除以camera.aspect。现在,在所有屏幕尺寸上, block 占据屏幕宽度的相同比例:-)

关于Three.js 缩放以适应对象的宽度(忽略高度),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16462848/

相关文章:

javascript - 在 TypeScript 中使用三个 Js + OrbitControl

javascript - Three.js 凹凸贴图未更新

javascript - THREE.js:错误消息 "THREE.OBJLoader is not a constructor"

javascript - 在 Angular JS 应用程序上注入(inject) ThreeJs 模型

javascript - 三.js 中的 FilmPass 不工作

3d - 旋转,然后翻译成three.js

node.js - 使用 Node 在 THREE.js 中加载纹理

javascript - 如何在 Three.js 中使用数组代替 MeshFaceMaterial?

JavaScript:对象的方法未被识别;为什么不?

three.js - ThreeJS阴影无法渲染