Three.js 中的初始 Sprite 大小答案

【问题标题】：Initial Sprite Size in Three.jsThree.js 中的初始 Sprite 大小
【发布时间】：2016-04-24 11:24:38
【问题描述】：

谁能帮我理解three.js最初是如何确定精灵的大小/比例的？

目前我正在使用 4 个精灵（透明度为 3000 像素 × 1830 像素的 PNG）堆叠在 3D 空间中，但我必须将它们放大 16 倍到 22 倍。不过，为了防止精灵看起来被压扁，我必须将 y 轴缩放到 x 轴的 75%。

最终，我希望能够系统地提取图像，并让它们适当地缩放。

可能是我没有正确设置这个东西。它看起来不错，但现在感觉超级hacky。我几乎改变了一堆数字，直到它看起来对我来说是正确的。我不喜欢那样。我想了解。

【问题讨论】：

【解决方案1】：

查看Sprite 类的代码可以发现，在构造函数中创建了一个宽度和高度为1 的简单平面。我不会期待其他任何东西，因为几何尺寸通常不是由纹理尺寸定义的。

您可能希望它们填满视口，因此您必须缩放它们。对于透视相机，它有点数学，因为适合视口大小的 x 比例（或 y 比例）的数量与到相机的距离有关。所以，应该是这样的

var halfHeigt = distanceToCamera / Math.tan( camera.fov/2 * Math.PI / 180 );
y-scale = halfHeight * 2;

当然，您需要考虑纵横比，以免看起来被压扁。所以，x-scale 应该是 y-scale * textureWidth / textureHeight，或者反过来 y-scale = x-scale * textureHeight / textureWidth。

【讨论】：

这对我很有帮助。我将其标记为答案，因为我的问题是想了解 Sprite 尺寸是如何确定的。你的回答让我朝着一个很好的方向前进。不过，我不太明白你给我的用于确定halfHeight 的公式。大多数情况下，我不明白Math.tan，以及何时使用它。另外，有没有什么好的方法来获取textureWidth 和textureHeight？ 我可以将图像加载到一个div中，加载后从中获取宽度和高度，然后将其删除并运行 Three.js 的东西，但这看起来很老套。
texture.image.width 和 texture.image.height 应该为您提供纹理的分辨率。该公式决定了您的精灵应该具有适合视口的比例。这是一个三角测量数学。我的公式是How to fit camera to object的修改。
我也很困惑。看起来像基于父对象和视口的精灵初始大小......我正在考虑放入场景而不是网格。只是用网格移动它？
请注意，对父级的任何转换也会应用于子级。因此，如果精灵是网格的子对象并且您缩放网格，则精灵也会被缩放。您可以对网格和精灵进行分组，因此网格不会影响精灵，但您可以移动组以同时移动它们（我不确定，如果您想要的话）。