Как повернуть объект так, чтобы он смотрел в сторону от сферы, учитывая его положение по долготе и широте - PullRequest
Новая
       15

Как повернуть объект так, чтобы он смотрел в сторону от сферы, учитывая его положение по долготе и широте

1 голос
/ 21 мая 2019

У меня есть сфера и коробки, которые должны быть зданиями на нем.И я хочу повернуть прямоугольники (вокруг осей xy и z) так, чтобы они были обращены в сторону от сферы, как обычные здания, учитывая долготу и широту прямоугольников (также координаты x, y, z).

Я надеюсь, что вы можете помочь мне с моей проблемой, любая помощь будет признательна:)

Я пробовал много поворотов, используя долготу и широту, но ни одна из них не сработала.Я также думал об использовании вектора из центра Сферы в положение зданий, чтобы определить вращение, но не смог найти решение. 

  var lat = i; //-90 to 90
  var lon = j; //-180 to 180


  var height = 10;
  var width = 10;
  var length = 10;

  var xyz = getXYZ(lat, lon, sphereradius, height);

  var boxE3 = document.createElement('a-box');

  boxE3.setAttribute('material', {
    color: getRandomColor()
  });

  boxE3.setAttribute('rotation', {
    x: 0, 
    y: lat, //Rotation that needs to be correctly set.
    z: lon
  });

  boxE3.setAttribute('position', {
    x: xyz[0],
    y: xyz[1],
    z: xyz[2]
  });

  boxE3.setAttribute('scale', {
    x: length,
    y: height,
    z: width
  });
  sceneEl.appendChild(boxE3);
}

Фактический результат:

enter image description here

Требуется результат:

enter image description here

1 Ответ

1 голос
/ 22 мая 2019

Поворот объекта в сторону от другого объекта.

Я бы использовал компонентную логику look-at, в которой "просмотр" производится простым методом: 

object3D.lookAt(THREE.Vector3())

Имея коробку и сферу, просто сделайте коробку lookAt сферой и поверните ее вокруг. 

box.object3D.lookAt(spherePosition)
box.rotation.y += Math.Pi

Проверьте это в этой скрипке .Но я бы все сделал немного по-другому.

Вращение системы координат вокруг сферы

Допустим, у нас есть следующая установка. 

<a-sphere id="earth" position="1 1 -2" radius="1.5"></a-sphere>
<a-entity id="frameOfReference" position="1 1 -2>
   <a-box position="0 0 -1.5></a-box>
</a-entity>

Теперь,планета и рамка находятся в одинаковом положении.Положение ящика соответствует радиусу планет.На самом деле она обращена к планете, независимо от того, как мы вращаем систему отсчета.

Почему это полезно?Потому что теперь вы можете вращать систему отсчета, используя широту и долготу: 

    let x = latitude
    let y = longitude + 180 // 180deg shift because z is negative
    frame.setAttribute("rotation", x + " " + y + " " + 0)

Проверьте это в этой скрипке , где МКС отслеживается с использованием этого API .

...