Three.js中的初始精灵大小

Question

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

目前，我正在使用4个精灵（具有透明度的PNG，大小为3000px x 1830px），它们在3D空间中堆叠，但我必须将它们缩放在16x和22x之间。然而，为了使精灵不看起来被压扁，我必须将y轴缩放为x缩放的75％。

最终，我希望能够系统地拉入图像，并使它们适当地缩放。

可能我只是没有正确设置这个东西。它看起来没问题，但现在感觉超级hacky。我基本上改变了一堆数字，直到我认为它看起来正确。我不喜欢那样。我想要理解。

以下是我目前使用的内容： http://valorink.com/3d-test/stackoverflow/

- ironoxidey

Answer 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。

- Brakebein

---

这对我非常有帮助。我将其标记为答案，因为我的问题是想要了解如何确定Sprite的尺寸。而你的回答已经让我朝着一个相当不错的方向前进。然而，我并不真正理解你给出的用于确定halfHeight的公式。主要是，我不理解Math.tan以及何时使用它。另外，有没有一种好的方法来获取textureWidth和textureHeight？ 我可以将图像加载到div中，在加载后从中获取宽度和高度，然后将其删除并运行Three.js的内容，但这似乎有些hacky。 - ironoxidey

texture.image.width 和 texture.image.height 应该给出纹理的分辨率。这个公式决定了你的精灵应该具有适合视口的比例。这是一些三角测量数学。我的公式是 如何将相机适配到对象 的修改版。 - Brakebein

我也感到困惑。似乎精灵的初始大小是基于父对象和视口的...我正在考虑将其放入场景而不是网格中。然后只需通过网格移动它？ - LrakWortep

请注意，对父级的任何转换也会应用于子级。因此，如果精灵是网格的子级并且您缩放了网格，则精灵也会被缩放。您可以将网格和精灵分组，以便网格不影响精灵，但是您可以移动该组以同时移动它们（我不确定这是否符合您的要求）。 - Brakebein