Affichage du maillage

Un visualiseur d'image à 360°.

Pouvez-vous recréer ce visualiseur sans regarder le code source de la page ?

Le visualiseur est réalisé grâce à une sphère sur laquelle on plaque une texture d'une image equirectangulaire. L'image est disponible à l'adresse images/HDR_040_Field_Bg.jpg. Aidez-vous du code des exemples précédents. Pour générer les vertices de la sphère, vous pouvez utiliser le code ci-dessous :

/*
* Crée un tableau contenant les vertices pour représenter un sphère.
* Un vertex est représenté par ses coordonnées dans l'espace (3 float)
* et ses coordonnées UV (2 float).
* nbRings: nombre d'anneaux de la sphere
*/
function UvSphere(nbRings) {
    function computeUvSpherePoint(lattitude, longitude) {
        //(x, y, z) = (sin(Pi * m/M) cos(2Pi * n/N), sin(Pi * m/M) sin(2Pi * n/N), cos(Pi * m/M))
        return [Math.sin(Math.PI * lattitude/(nbRings)) * Math.cos(2 * Math.PI * longitude/(nbRings * 2)),
                Math.cos(Math.PI * lattitude/(nbRings)),
                Math.sin(Math.PI * lattitude/(nbRings)) * Math.sin(2 * Math.PI * longitude/(nbRings * 2))];
    }
    
    function computeUvPoint(lattitude, longitude) {
        return [longitude / (nbRings * 2), lattitude / nbRings];
    }
    
    const push = Array.prototype.push;

    const vertices = [];

    for (var i = 0; i < nbRings * 2; ++i) {
        push.apply(vertices, computeUvSpherePoint(0, 0));
        push.apply(vertices, computeUvPoint(0, i));
        push.apply(vertices, computeUvSpherePoint(1, i+1));
        push.apply(vertices, computeUvPoint(1, i+1));
        push.apply(vertices, computeUvSpherePoint(1, i));
        push.apply(vertices, computeUvPoint(1, i));
    }
    for (var j = 1; j < (nbRings - 1); ++j) {
        for (var i = 0; i < nbRings * 2; ++i) {
            push.apply(vertices, computeUvSpherePoint(j, i));
            push.apply(vertices, computeUvPoint(j, i));
            push.apply(vertices, computeUvSpherePoint(j, i+1));
            push.apply(vertices, computeUvPoint(j, i+1));
            push.apply(vertices, computeUvSpherePoint(j+1, i));
            push.apply(vertices, computeUvPoint(j+1, i));

            push.apply(vertices, computeUvSpherePoint(j, i+1));
            push.apply(vertices, computeUvPoint(j, i+1));
            push.apply(vertices, computeUvSpherePoint(j+1, i+1));
            push.apply(vertices, computeUvPoint(j+1, i+1));
            push.apply(vertices, computeUvSpherePoint(j+1, i));
            push.apply(vertices, computeUvPoint(j+1, i));

        }
    }
    for (var i = 0; i < nbRings * 2 ; ++i) {
        push.apply(vertices, computeUvSpherePoint(nbRings - 1, i));
        push.apply(vertices, computeUvPoint(nbRings - 1, i));
        push.apply(vertices, computeUvSpherePoint(nbRings - 1, i+1));
        push.apply(vertices, computeUvPoint(nbRings - 1, i+1));
        push.apply(vertices, computeUvSpherePoint(nbRings, nbRings - 1));
        push.apply(vertices, computeUvPoint(nbRings, i));
    }
    return vertices;
}

// création des vertices de la sphere
const vertices = UvSphere(16);