我想将一堆平面映射到一个可以工作但有一些意想不到的错误的球体上答案

【问题标题】：I want to map a bunch of planes onto a sphere it works but with some unexcpected bugs我想将一堆平面映射到一个可以工作但有一些意想不到的错误的球体上
【发布时间】：2018-02-19 16:55:14
【问题描述】：

我目前正在为学校做一个项目，我必须制作一个球体，我必须在上面映射大约 5000 张图像

我在这里有一个我想要映射的平面投影

这里我有它的球形模型

我正在使用three.JS，以及墨卡托投影的原理，但正如你所看到的图像旋转而且我不知道如何解决这个问题。

我找了好久，一无所获

这是我用来放置所有图像的代码

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++;   

    }         
}

我希望我已经足够清楚了

【问题讨论】：

我正在尝试很多不同的公式来查看问题所在，但它不会改变任何东西，而且您之前发布的关于 blilboards 的内容似乎很好，但计算量有点重5000 架飞机。
我想将 quands 与纬度和经度联系起来，我设法做到了，我只需要切换 X 和 Z ，没有你的评论我永远不会这样做，我认为休息由我决定，谢谢！
写了一个小错误，更像是切换Y和Z

标签： javascript math three.js projection

【解决方案1】：

我认为问题可能出在Square 构造函数中，也可能出在drawSquare() 中。 lookAtZero()` 方法也可能是可疑的，我认为这会将法线旋转到零，但对于如何旋转形状以实现这一点却是模棱两可的。

在构建正方形时，您需要确保一条边沿纬线，一条边沿经线。以

开头

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

作为广场的中心。水平切线将是

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

和沿纬线的切线

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

这些是通过分别对 long 和 lat 进行微分获得的。它们应该是单位长度的向量。

然后你可以用点形成一个矩形

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

另一种方法是通过增加 lat 和 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));

这会给你一个梯形而不是一个矩形。

【讨论】：