javascript - 球体上的纹理未正确对齐？纬度/经度 -> 笛卡尔 xyz

Question

我想知道我的球体的纹理是否以某种方式没有正确应用，我是否可以以某种方式抵消它？我试图通过提供纬度/经度并转换为笛卡尔 xyz 坐标来在澳大利亚悉尼放置一个盒子。但是，盒子没有放在正确的位置。我的猜测是因为原始图像是墨卡托 map ，所以当它应用于球体时，纬度/经度中心点不正确。

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

1. 我正在加载地球图像并将其应用于球体(半径 = 400)。
2. 然后我提供澳大利亚悉尼的纬度/经度 (33.8688, -151.2093) 并转换为弧度。
3. 将纬度/经度转换为笛卡尔 xyz(取自:https://stackoverflow.com/a/1185413/3723165)
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>

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