У пості про «Зоряне небо на Canvas» я вже описував свій проект, де за допомогою JavaScript на канвасі 2d формується зображення глобуса Землі на тлі зірок, планет і орбіт космічних апаратів. Для створення тривимірної картини зоряного неба на площині я використовував формули перекладу тривимірних координат X, Y, Z відображених об'єктів: зірок, планет, космічних апаратів (КА), - в плоскі декартові координати X, Y. Основну частину цих формул я взяв з проекту Marble зі складу KDE. Портований з C++ на JavaScript код я зберіг у файлі starry.js.
Вже тоді я знав, що для виведення тривимірних об'єктів у канваса є спеціальний движок WebGL. Але для того, щоб ним скористатися потрібно було близько познайомитися з цією технологією, а найголовніше - знайти якісні і зрозумілі приклади його реалізації. Ті приклади, які я дивився, наприклад, khronos з бібліотеками J3DI0000.js і J3DIMath.js від Apple для роботи з WebGL, мене не надихнули: код був громіздкий і складний. Все змінилося, коли я познайомився з проектом Three.js. Простота написання коду і величезна кількість прикладів (що працюють в офлайні) в ньому здивували і порадували одночасно.
Вже майже закінчивши свою версію зоряного неба в 3d, я познайомився з ще одним дуже цікавим проектом на apoapys.com. Автор за допомогою скриптів three.js відтворює об'єкти Сонячної Системи з ефектами, як в самій Celestia - еталонному для багатьох зоряних проектів астрономічному атласі з відкритим кодом. З проекту apoapsys.com я запозичив координати сузір'їв (файл constellation_lines.js), координати яких виявилися більш точними, ніж ті, які я брав з проекту "LibCanvas: На шляху до зірок "для плоскої версії неба, а також картинки для текстур зірок, хмар і космічних апаратів.
Свій код тривимірного неба, як і в плоскій версії, я постарався зробити максимально простим і компактним, щоб в ньому легко можна було розібратися. Крім того, я вирішив не використовувати метод window.requestAnimationFrame для перерисування сцени, як у більшості прикладів з Three.js і apoapsys.com, оскільки його використання сильно навантажує браузер і процесор. Для цього я використовував код з OrbitControls.js з Three.js для управління камерою, який його не використовує.
Подивитися тривимірну версію неба, плоску та інші приклади для канваса можна на сайті проекту dbcartajs.
Що нового
На відміну від плоскої версії неба, об'єкти Сонячної Системи показано з урахуванням їхніх реальних розмірів і відстаней до них у км.
Для розрахунку орбіт і положень КА використовується код з satellite.js, як і в плоскій версії. Дані про положення КА (TLE) оновлено з celestrak.com. У tledata.js я додав дані про угруповання GLONASS, GPS, ISS (космічні станції в т. ч. МКС).
Керування
Керувати камерою можна мишкою - поворот правої, зміщення лівою кнопкою і масштабування коліщатком, - стрілками на клавіатурі або через touch-інтерфейс на сенсорних екранах. Власне всі події управління обробляє код з OrbitControls.js.
Що ще
У планах навчитися фокусувати в центрі сцени інші об'єкти, крім Землі, також додати нові об'єкти - астероїди, комети.