Three.js 缩放以适应对象的宽度(忽略高度) [英] Three.js zoom to fit width of objects (ignoring height)

问题描述

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

I have a set of block objects, and I'd like to set the perspective camera so that their entire width is fully visible (the height will be too big - that's OK, we're going to pan up and down).

我看到有很多与此相关的问题，例如:

I've seen there are a number of questions close to this, such as:

调整相机以获得可见的 Three.js 形状

Three.js - 视图宽度

三个.JS:根据相机和物体在屏幕上的位置获取物体尺寸

如何使相机适合对象

三个JS.如何实现 ZoomALL 并确保给定的框填充画布区域?

但是，它们似乎都没有涵盖我正在寻找的所有内容:

However, none of them seem to quite cover everything I'm looking for:

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

• I'm not interested in the height, only the width (they won't be the same - the size will be dynamic but I can presume the height will be larger than the width)

camera.position.z(或者我猜的 FOV)是未知数，所以我试图用正确的方法来解决这个问题

The camera.position.z (or the FOV I guess) is the unknown, so I'm trying to get the equations round the right way to solve that

(我不太擅长 3D 数学.提前致谢！)

(I'm not great with 3D maths. Thanks in advance!)

推荐答案

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

I was able to simplify this problem a lot, in my case...

因为我知道物体的整体尺寸，所以我可以通过多次改变相机的 z 位置并查看最佳距离来简单地得出一个合适的距离.

Since I knew the overall size of the objects, I was able to simply come up with a suitable distance through changing the camera's z position a few times and seeing what looked best.

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

My real problem was that the same z position gave different widths, relative to the screen width, on different sized screens - due to the different aspect ratios.

所以我所做的只是将我的距离值除以 camera.aspect.现在这些块在所有屏幕尺寸上都占据了相同比例的屏幕宽度:-)

So all I did was divide my distance value by camera.aspect. Now the blocks take up the same proportion of the screen's width on all screen sizes :-)

这篇关于Three.js 缩放以适应对象的宽度(忽略高度)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！