我正在使用 three.js 来显示一个地球仪。起初，图像质量很差，随着用户放大，图像质量变得更高。这是使用tiling 完成的。每个图块为 256 像素 x 256 像素。对于最小的缩放，只有几个图块，对于最大的，有数千个。
问题是图像质量仍然很低，即使在最高缩放时也是如此。我认为这是因为我使用的画布。它是 2000 像素 x 1000 像素。即使我增加这个画布，最高质量的图像也是 92160px x 46080px，这对于大多数浏览器来说太大了。
我可以使用什么方法来显示高质量的图块，但没有巨大的画布？使用画布是正确的方法吗？谢谢！
【问题讨论】：
标签： javascript html canvas three.js
我想出了一种方法，尽管我不确定这是一种很好的方法。对于需要显示的每个图块，我创建一个球体。我使用phiStart、phiLength、thetaStart、thetaLength 使球体与地图上图块的大小相匹配。然后我创建一个 256px x 256px 的画布，将平铺图像放在画布上，然后将画布放在平铺上。本质上，我将球体的一部分放置在低分辨率球体的顶部，这是加载页面时加载的球体。
我通过取整个球体（每个变量为2*Pi）计算了四个变量，然后乘以我要填充的球体的百分比。这是四个变量：
// `sphereCanvasWidth` is the width of the low-resolution sphere's canvas
// `canvasX` is the top left pixel of where you want to draw on the canvas
phiStart = (2 * Pi) * (canvasX / sphereCanvasWidth)
// `numPixelsTileX` is the number of pixels the canvas should cover
phiLength = (2 * Pi) * (numPixelsTileX / sphereCanvasWidth)
// `canvasY` is the bottom left pixel of where you want to draw on the canvas
thetaStart = (2 * Pi) * (canvasY / sphereCanvasWidth)
// `numPixelsTileY` is the number of pixels the canvas should cover
phiLength = (2 * Pi) * (numPixelsTileY / sphereCanvasWidth)
例如，如果我想填充球体的左上角 1/4，那就是：
phiStart = 0
phiLength = (2 * Pi) * .25
thetaStart = 0
thetaLength = (2 * Pi) * .25
three.js 文档有a sphere you can test the variables on。以下是上面示例生成的内容：
【讨论】：