球体纹理未正确对齐？经纬度 -> 笛卡尔坐标xyz

Question

我在想我的球体的纹理是否被正确应用，是否可以通过某种方式进行偏移？我正在尝试通过提供纬度/经度并转换为笛卡尔坐标系中的xyz坐标，在悉尼放置一个盒子。然而，盒子的位置不正确。我的猜测是由于原始图像是墨卡托地图，当它被应用到球体上时，纬度/经度中心点不正确。

下面的代码是最小可重现示例。

1. 我正在加载地球图像并将其应用到球体（半径= 400）。
2. 然后我提供了悉尼，澳大利亚的纬度/经度（33.8688，-151.2093）并将其转换为弧度。
3. 将纬度/经度转换为笛卡尔坐标系中的xyz（取自：https://dev59.com/LnM_5IYBdhLWcg3w4nfb#1185413）
4. 将一个盒子移动并推送到该位置。

这里是盒子放置的位置： 可重现代码

var img;
var theta = 0;
var r = 400;
    
function preload() {
  img = loadImage('https://eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg');
}
    
function setup() {
  createCanvas(1600, 1200, WEBGL);
}

function draw() {
  background(0);

  rotateY(theta);
  theta += 0.01;

  texture(img);
  sphere(r);

  //Sydney, Australia Latitude/Longtidue
  var lat = radians(33.8688);
  var lon = radians(151.2093);

  //cartesian coordinates
  var x = r * Math.cos(lat) * Math.cos(lon);
  var y = r * Math.cos(lat) * Math.sin(lon);
  var z = r * Math.sin(lat);

  push();
  translate(x, y, z);
  fill(255);
  box(100, 10, 10);
  pop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>

- Blake S.

---

好的，我部分地找到了错误所在。如果我将纬度0、经度0绘制出来，它会显示在印度和泰国之间，这是不正确的。纬度0、经度0应该绘制在非洲西海岸。我该如何纠正呢？我认为这是应用纹理到球体时p5.js出现的错误。因为如果我在Processing中使用完全相同的代码，它会正确地绘制在非洲海岸附近。 - Blake S.

Answer 1

这里有几个问题：

1）你提供的悉尼坐标是错误的，纬度应该是负数（-33.8688, 151.2093）。

2）垂直（极轴）轴对应于Y坐标，而不是Z坐标（很容易混淆）。所以我交换了Y和Z的计算。

3）需要进行一些偏移才能获得精确的放置。由于您没有提供纹理映射，所有的纹理放置都是在幕后完成的，在一个球体上，从哪里开始纹理是相当模糊的。通过试错，我确定它只是经度上偏移了180度。

var img;
var theta = 0;
var r = 400;


function preload() {
  img = loadImage('https://eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
  background(0);

  camera(0, 0, 200)
  rotateY(theta);
  theta += 0.01;

  texture(img);
  sphere(r);

  //Sydney, Australia Latitude/Longtidue
  var lat = radians(-33.8688);
  var lon = radians(151.2093);

  //cartesian coordinates
  // var x = r * Math.cos(lat) * Math.cos(lon);
  // var y = r * Math.cos(lat) * Math.sin(lon);
  // var z = r * Math.sin(lat);
  var x = r * Math.cos(lat) * Math.sin(lon+radians(180));
  var y = r * Math.sin(-lat);
  var z = r * Math.cos(lat) * Math.cos(lon+radians(180));

  push();
  translate(x, y, z);
  fill(255);
  box(100, 10, 10);
  pop();
}

这是一个可行的示例： https://www.openprocessing.org/sketch/443758

- boxtrain

---

太好了。谢谢！我知道我漏掉了负号。当没有负号时，我的原始代码绘制得更接近悉尼。再次感谢您。 - Blake S.