---
title: Follow Dragon
url: https://rone.dev/id/projects/follow-dragon
description: Globe WebGL yang melacak SpaceX Dragon dan ISS secara waktu nyata.
language: id-ID
updated: 2026-09-27
translations:
  en: https://rone.dev/projects/follow-dragon
---

# Follow Dragon

Globe WebGL yang melacak SpaceX Dragon dan ISS secara waktu nyata.

[Proyek](https://rone.dev/id/projects) / [Web](https://rone.dev/id/projects/category/web)

Aktif · Dimulai 2024 · 2 Bintang GitHub · 0 Fork

<Frame>
  ![Globe Follow Dragon, dengan ISS di atas Jazirah Arab dan jejak orbitnya melintasi Samudra Hindia](https://rone.dev/projects/follow-dragon/home.webp)
</Frame>

Follow Dragon menggambar Bumi sebagai globe Three.js dan menaruh posisi terkini serta jejak orbit Dragon dan ISS di atasnya. Umpan posisinya diteruskan lewat server, sehingga peramban tidak pernah berbicara langsung dengan sumber hulunya.

## Fakta proyek

|           |                                                                                                                       |
| --------- | --------------------------------------------------------------------------------------------------------------------- |
| Status    | Aktif                                                                                                                 |
| Kategori  | Web                                                                                                                   |
| Dimulai   | 2024                                                                                                                  |
| Peran     | Perancangan dan pembangunan                                                                                           |
| Teknologi | Python, Django, Three.js, GLSL, Vercel                                                                                |
| Lisensi   | GPL-3.0                                                                                                               |
| Tautan    | [Situs langsung](https://follow-dragon.rone.dev) · [Kode sumber](https://github.com/ridwaanhall/follow-dragon-spacex) |

## Sekilas

Satu adegan: globe bertekstur, kamera yang bisa digerakkan, dan wahana antariksa pada posisinya yang sebenarnya. Jejak orbitnya digambar dengan sepasang vertex dan fragment shader khusus supaya garisnya bisa memudar di sepanjang dirinya sendiri — atribut alpha per vertex yang dibawa sampai ke tahap fragment, sesuatu yang tidak diberikan material garis bawaan.

Layar pemuatannya melaporkan kemajuan yang sebenarnya alih-alih sekadar berputar, karena tekstur Bumi cukup besar sehingga kanvas kosong akan terbaca sebagai halaman rusak.

## Kenapa umpannya diteruskan lewat server

Data posisinya berasal dari sebuah endpoint hulu, dan peramban tidak pernah memanggilnya. Servernya yang mengambilnya, lalu responsnya diteruskan sebagai JSON dari origin ini.

Itu menjaga host hulunya tidak muncul di kode halaman, menghindari permintaan lintas origin yang harus diizinkan peramban, dan memberi satu tempat untuk gagal dengan anggun — galat transport menjadi 500 dari aplikasi ini alih-alih penolakan yang tidak tertangani di dalam loop render. Penanda ketersediaan yang sama seperti di proyek lain bisa menonaktifkan halamannya dengan pesan terstruktur alih-alih globe yang rusak.

<CardGroup cols={2}>
  <Card title="Sebelumnya: igstats" href="https://rone.dev/id/projects/igstats">
    Unggah ekspor Instagram Anda sendiri dan lihat siapa yang tidak balik mengikuti.
  </Card>

  <Card title="Berikutnya: SpaceX API" href="https://rone.dev/id/projects/spacex-api">
    Statistik peluncuran, misi mendatang, dan pelacakan Dragon di balik satu kontrak REST.
  </Card>
</CardGroup>