Question

我在Three中编写了一个小应用程序，它将显示2D绘图图形。我使用sprite（每个sprite使用画布SpriteMaterial）和GridHelper来构建图形的元素。当用户点击按钮时，图形会拉出到完整的3D视图 - 因此我在3D空间中构建了2D和3D图形。

我使用透视相机并将其定义为：

Dog

我的图表是100x100，位于矢量[0,0，-100]。当我将相机放在[0,0,0]时，精灵和图形渲染得很漂亮，完全没有像素化。

然而，图形并不适合整个渲染区域，所以我将摄像机设置在z为100的位置，因此适合完整的图形。然而，这使得图形看起来像素化。

我想知道如何提高渲染质量并修复渲染失真。我意识到这是透视相机的自然结果。这是z为0的屏幕截图：

将图片拉回来查看完整图表：

谢谢！

Answer 1

问题是因为您的图像源尺寸和图像显示尺寸太大。想象一下，如果你必须将100x100图像缩小为16x16图像，你保留哪些像素？

在webgl中，有一个TEXTURE_MIN_FILTER可以让你控制你想要如何完成缩小的方式。看起来THREE.js默认使用NEAREST过滤器导致这个像素化问题。我不使用THREE所以我不知道如何在THREE.js中设置它。也许在文档中四处看看？它可能在那里。