球体上的纹理未正确对齐？ Lat/Lon -> 笛卡尔 xyz

Question

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

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

我正在加载地球图像并将其应用于球体（半径 = 400）。
然后我为澳大利亚悉尼 (33.8688, -151.2093) 提供 latitude/longitude 并转换为弧度。
将 lat/lon 转换为笛卡尔 xyz（取自：）
翻译一个盒子并将其推到该位置。

这是放置该框的位置：

可重现代码

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

球体上的纹理未正确对齐？ Lat/Lon -> 笛卡尔 xyz

Texture on sphere not aligned correctly? Lat/Lon -> Cartesian xyz

javascript

processing

p5.js