Estoy usando three.js para mostrar un globo. Al principio, la imagen es de baja calidad y, a medida que el usuario hace zoom, las imágenes se vuelven de mayor calidad. Esto se hace usando mosaicos . Cada mosaico es de 256 px x 256 px. Para el zoom más bajo, solo hay un par de mosaicos, y para el más grande, hay miles.
El problema es que las imágenes siguen siendo de baja calidad, incluso con el zoom más alto. Creo que esto se debe al lienzo que estoy usando. Es 2000px x 1000px. Incluso si aumento este lienzo, la imagen en su máxima calidad es 92160px x 46080px, que es un lienzo demasiado grande para representar en la mayoría de los navegadores.
¿Qué enfoque puedo usar para mostrar mosaicos en alta calidad, pero no tener un lienzo enorme? ¿Usar un lienzo es el enfoque correcto? ¡Gracias!
Descubrí una manera de hacerlo, aunque no estoy seguro de que sea un gran enfoque. Para cada mosaico que debe mostrarse, creo una esfera. Hago que la esfera coincida con el tamaño del mosaico en el mapa usando phiStart
, phiLength
, thetaStart
, thetaLength
. Luego creo un lienzo de 256 px x 256 px, coloco la imagen del mosaico en el lienzo y coloco el lienzo en el mosaico. Básicamente, estoy colocando partes de esferas encima de una esfera de baja resolución, que es la esfera que se carga cuando se carga la página.
Calculé las cuatro variables tomando una esfera completa (que es 2*Pi
para cada variable), luego multiplicándola por el porcentaje de la esfera que quiero llenar. Aquí están las cuatro variables:
// `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)
Por ejemplo, si quiero llenar el 1/4 superior izquierdo de la esfera, sería:
phiStart = 0 phiLength = (2 * Pi) * .25 thetaStart = 0 thetaLength = (2 * Pi) * .25
La documentación de three.js tiene una esfera en la que puede probar las variables . Esto es lo que genera el ejemplo anterior: