Je veux cartographier un tas d'avions sur une sphère cela fonctionne mais avec quelques bugs inattendus

Question

Je travaille actuellement sur un projet pour l'école où je dois faire une sphère où je dois Map ~ 5000 images dessus

J'ai ici une projection plane de ce que je veux carte

et ici j'ai un modèle sphérique de celui-ci

J'utilise Three.js, et de la projection principe mercator mais vous pouvez voir les images tournent et je ne sais pas comment résoudre ce problème.

Et je cherchais depuis un certain temps et je ne trouve rien

Et voici le code que j'utilise pour placer toutes mes images

drawMeridianCells(scene,rayon) 
{ 
    var startCollPos = 5; 
    var currentCounter = 0; 
    var currentRow = 0; 

    var counter = 0; 


    let cell = new Array(this._totalCells); 
    var rows = [4,3,4,4,6,6,6,6,4,4,3,4]; 
    var col = [2,4,6,8,10,12,12,10,8,6,4,2]; 
    var res = Number(col[counter]) * Number(rows[counter]) ; 

    var currentIndex = 0; 

    var north = true; 


    for(var i = 0; i < this._totalCells; i++) 
    { 
     if(currentCounter >= col[counter]) 
     {  
      currentRow++;           
      currentCounter = 0;  
     }  


     if(currentIndex >= res) 
     {   
      counter++; 
      res = Number(col[counter]) * Number(rows[counter]) ;       
      currentIndex = 0; 

      if(north) 
       startCollPos--; 
      else 
       startCollPos++; 

      if(startCollPos < 0) 
      { 
       startCollPos =0; 
       north = false; 
      } 
     } 

     //spherical W/ mercator projection 
     //https://stackoverflow.com/questions/12732590/how-map-2d-grid-points-x-y-onto-sphere-as-3d-points-x-y-z 

     var long = (this._posX +(currentCounter+startCollPos) * (this._celW+2))/rayon; 
     var lat = 2*Math.atan(Math.exp( (this._posY + (currentRow) * (this._celH*2))/rayon)) - Math.PI/2; 

     var _x = rayon* (Math.cos(lat) * Math.cos(long)) ; 
     var _y = rayon* (Math.cos(lat) * Math.sin(long)); 
     var _z = rayon* (Math.sin(lat)); 

     cell[i] = new Square(new Point(_x,_y,_z), 
     this._celW , 
     this._celH ); 


     //flat 
     /*cell[i] = new Square( new Point((this._posX +(currentCounter+startCollPos) * (this._celW)), 
     (this._posY + (currentRow) * (this._celH)),0), 
     this._celW, 
     this._celH );*/ 

     cell[i].drawSquare(scene,Math.random() *0xffffff);  
     cell[i].lookAtZero(); 

     currentCounter++;   
     currentIndex++; 

    }   
} 

J'espère avoir été assez clair

Answer 1

Je pense que le problème peut être dans le constructeur Square, ou éventuellement dans drawSquare(). La méthode lookAtZero() `est également susceptible d'être suspecte, je pense que cela fait tourner la normale pour pointer vers zéro mais est ambigu sur la façon dont la forme est tournée pour que cela se produise. Lorsque vous construisez les carrés, vous devez vous assurer qu'un bord est le long d'une ligne de latitude et l'autre le long d'une ligne de longitude. A partir comme le centre de la place avec

var x0 = rayon* (Math.cos(lat) * Math.cos(long)) ; 
var y0 = rayon* (Math.cos(lat) * Math.sin(long)); 
var z0 = rayon* (Math.sin(lat)); 

. La tangente horizontale sera

tx = -Math.sin(long) 
ty = Math.cos(long) 
tz = 0 

et la tangente le long de la ligne de latitude

ux = -Math.cos(lat) * Math.cos(long) 
uy = -Math.cos(lat) * Math.cos(long) 
uz = Math.sin(lat) 

Ceux-ci sont obtenus en différenciant par rapport à long et lat respectivement. Ils devraient être des vecteurs de longueur unitaire.

Vous pouvez alors former un rectangle avec le point

x0 +/- celW * tx +/- celH * ux 
y0 +/- celW * ty +/- celH * uy 
z0 +/- celW * tz +/- celH * uz 

L'autre façon de le faire serait de former des points en incrémenter les paramètres lat et long

var x2 = rayon* (Math.cos(lat + lat_inc) * Math.cos(long + long_inc)) ; 
var y2 = rayon* (Math.cos(lat + lat_inc) * Math.sin(long + long_inc)); 
var z2 = rayon* (Math.sin(lat + lat_inc)); 

cela vous donne un trapèzes plutôt que d'un rectangle si.