Bugfix
Medium Priority
Resolve 3D train visibility and direction issues
Critical user-reported fixes addressing 3D train visibility conflicts and directional alignment issues. Resolved CSS fallback train interference at high zoom levels and implemented proper bearing-based rotation with clear directional indicators for accurate train orientation visualization.
July 13, 2025
Admin
80b3f6f
English
### Overview
Critical user-reported fixes addressing 3D train visibility conflicts and directional alignment issues. Resolved CSS fallback train interference at high zoom levels and implemented proper bearing-based rotation with clear directional indicators for accurate train orientation visualization.
### Key Changes
- **Smart Fallback System**: Eliminated CSS train interference by implementing conditional fallback logic
- **Auto-Hide CSS Train**: CSS fallback automatically hidden when Three.js 3D train is successfully active
- **Fixed Train Direction**: Corrected bearing calculation from `-bearing` to `(bearing + 90°)` for proper alignment
- **Directional Markers**: Added color-coded spheres - green front, red back, yellow sides for clear orientation
- **Enhanced Debug Output**: Comprehensive logging showing bearing, rotation degrees, radians, and position data
- **Coordinate System Documentation**: Clear comments explaining Mapbox coordinate system and train orientation
### Technical Implementation
- **Conditional Initialization**: Modified train setup to check 3D model success before creating CSS fallback
- **1-Second Delay Check**: Added timeout to verify Three.js initialization before fallback decision
- **CSS Display Control**: Programmatic hiding of CSS train element when 3D model is active
- **Bearing Transformation**: Changed rotation from `rotation.z = -bearing * π/180` to `rotation.z = (bearing + 90) * π/180`
- **Directional Model Architecture**:
- Front marker: 50-unit green sphere at +600X position
- Back marker: 30-unit red sphere at -600X position
- Side markers: 25-unit yellow spheres at ±200Y positions
- **Debug Infrastructure**: Enhanced console logging with bearing, rotation calculations, and coordinate information
### Impact
- **User Experience**: Eliminated confusing dual train display at high zoom levels
- **Visual Clarity**: Clear directional indicators make train movement direction immediately obvious
- **Accurate Orientation**: Train now properly faces the direction of travel along route segments
- **Debugging Support**: Comprehensive logging enables easy verification of train orientation calculations
- **Development Efficiency**: Smart fallback system reduces visual conflicts during testing
- **Cross-Platform Consistency**: Proper coordinate system handling works across different map projections
Critical user-reported fixes addressing 3D train visibility conflicts and directional alignment issues. Resolved CSS fallback train interference at high zoom levels and implemented proper bearing-based rotation with clear directional indicators for accurate train orientation visualization.
### Key Changes
- **Smart Fallback System**: Eliminated CSS train interference by implementing conditional fallback logic
- **Auto-Hide CSS Train**: CSS fallback automatically hidden when Three.js 3D train is successfully active
- **Fixed Train Direction**: Corrected bearing calculation from `-bearing` to `(bearing + 90°)` for proper alignment
- **Directional Markers**: Added color-coded spheres - green front, red back, yellow sides for clear orientation
- **Enhanced Debug Output**: Comprehensive logging showing bearing, rotation degrees, radians, and position data
- **Coordinate System Documentation**: Clear comments explaining Mapbox coordinate system and train orientation
### Technical Implementation
- **Conditional Initialization**: Modified train setup to check 3D model success before creating CSS fallback
- **1-Second Delay Check**: Added timeout to verify Three.js initialization before fallback decision
- **CSS Display Control**: Programmatic hiding of CSS train element when 3D model is active
- **Bearing Transformation**: Changed rotation from `rotation.z = -bearing * π/180` to `rotation.z = (bearing + 90) * π/180`
- **Directional Model Architecture**:
- Front marker: 50-unit green sphere at +600X position
- Back marker: 30-unit red sphere at -600X position
- Side markers: 25-unit yellow spheres at ±200Y positions
- **Debug Infrastructure**: Enhanced console logging with bearing, rotation calculations, and coordinate information
### Impact
- **User Experience**: Eliminated confusing dual train display at high zoom levels
- **Visual Clarity**: Clear directional indicators make train movement direction immediately obvious
- **Accurate Orientation**: Train now properly faces the direction of travel along route segments
- **Debugging Support**: Comprehensive logging enables easy verification of train orientation calculations
- **Development Efficiency**: Smart fallback system reduces visual conflicts during testing
- **Cross-Platform Consistency**: Proper coordinate system handling works across different map projections
Bahasa Indonesia
### Gambaran Umum
Perbaikan kritis yang dilaporkan pengguna mengatasi konflik visibilitas kereta 3D dan masalah alignment arah. Menyelesaikan interferensi kereta fallback CSS pada level zoom tinggi dan mengimplementasi rotasi berbasis bearing yang tepat dengan indikator arah yang jelas untuk visualisasi orientasi kereta yang akurat.
### Perubahan Utama
- **Sistem Fallback Cerdas**: Menghilangkan interferensi kereta CSS dengan implementasi logika fallback kondisional
- **Auto-Hide Kereta CSS**: Fallback CSS otomatis disembunyikan ketika kereta 3D Three.js berhasil aktif
- **Perbaikan Arah Kereta**: Mengoreksi kalkulasi bearing dari `-bearing` ke `(bearing + 90°)` untuk alignment yang tepat
- **Marker Arah**: Menambah bola berkode warna - hijau depan, merah belakang, kuning samping untuk orientasi yang jelas
- **Output Debug yang Ditingkatkan**: Logging komprehensif menampilkan bearing, derajat rotasi, radian, dan data posisi
- **Dokumentasi Sistem Koordinat**: Komentar jelas menjelaskan sistem koordinat Mapbox dan orientasi kereta
### Implementasi Teknis
- **Inisialisasi Kondisional**: Memodifikasi setup kereta untuk memeriksa keberhasilan model 3D sebelum membuat fallback CSS
- **Pengecekan Delay 1 Detik**: Menambah timeout untuk memverifikasi inisialisasi Three.js sebelum keputusan fallback
- **Kontrol Display CSS**: Penyembunyian programatis elemen kereta CSS ketika model 3D aktif
- **Transformasi Bearing**: Mengubah rotasi dari `rotation.z = -bearing * π/180` ke `rotation.z = (bearing + 90) * π/180`
- **Arsitektur Model Arah**:
- Marker depan: bola hijau 50-unit di posisi +600X
- Marker belakang: bola merah 30-unit di posisi -600X
- Marker samping: bola kuning 25-unit di posisi ±200Y
- **Infrastruktur Debug**: Logging konsol yang ditingkatkan dengan bearing, kalkulasi rotasi, dan informasi koordinat
### Dampak
- **Pengalaman Pengguna**: Menghilangkan tampilan kereta ganda yang membingungkan pada level zoom tinggi
- **Kejelasan Visual**: Indikator arah yang jelas membuat arah pergerakan kereta langsung terlihat jelas
- **Orientasi Akurat**: Kereta sekarang menghadap arah yang tepat sesuai perjalanan sepanjang segmen rute
- **Dukungan Debugging**: Logging komprehensif memungkinkan verifikasi mudah kalkulasi orientasi kereta
- **Efisiensi Development**: Sistem fallback cerdas mengurangi konflik visual selama testing
- **Konsistensi Cross-Platform**: Penanganan sistem koordinat yang tepat bekerja di berbagai proyeksi peta
Perbaikan kritis yang dilaporkan pengguna mengatasi konflik visibilitas kereta 3D dan masalah alignment arah. Menyelesaikan interferensi kereta fallback CSS pada level zoom tinggi dan mengimplementasi rotasi berbasis bearing yang tepat dengan indikator arah yang jelas untuk visualisasi orientasi kereta yang akurat.
### Perubahan Utama
- **Sistem Fallback Cerdas**: Menghilangkan interferensi kereta CSS dengan implementasi logika fallback kondisional
- **Auto-Hide Kereta CSS**: Fallback CSS otomatis disembunyikan ketika kereta 3D Three.js berhasil aktif
- **Perbaikan Arah Kereta**: Mengoreksi kalkulasi bearing dari `-bearing` ke `(bearing + 90°)` untuk alignment yang tepat
- **Marker Arah**: Menambah bola berkode warna - hijau depan, merah belakang, kuning samping untuk orientasi yang jelas
- **Output Debug yang Ditingkatkan**: Logging komprehensif menampilkan bearing, derajat rotasi, radian, dan data posisi
- **Dokumentasi Sistem Koordinat**: Komentar jelas menjelaskan sistem koordinat Mapbox dan orientasi kereta
### Implementasi Teknis
- **Inisialisasi Kondisional**: Memodifikasi setup kereta untuk memeriksa keberhasilan model 3D sebelum membuat fallback CSS
- **Pengecekan Delay 1 Detik**: Menambah timeout untuk memverifikasi inisialisasi Three.js sebelum keputusan fallback
- **Kontrol Display CSS**: Penyembunyian programatis elemen kereta CSS ketika model 3D aktif
- **Transformasi Bearing**: Mengubah rotasi dari `rotation.z = -bearing * π/180` ke `rotation.z = (bearing + 90) * π/180`
- **Arsitektur Model Arah**:
- Marker depan: bola hijau 50-unit di posisi +600X
- Marker belakang: bola merah 30-unit di posisi -600X
- Marker samping: bola kuning 25-unit di posisi ±200Y
- **Infrastruktur Debug**: Logging konsol yang ditingkatkan dengan bearing, kalkulasi rotasi, dan informasi koordinat
### Dampak
- **Pengalaman Pengguna**: Menghilangkan tampilan kereta ganda yang membingungkan pada level zoom tinggi
- **Kejelasan Visual**: Indikator arah yang jelas membuat arah pergerakan kereta langsung terlihat jelas
- **Orientasi Akurat**: Kereta sekarang menghadap arah yang tepat sesuai perjalanan sepanjang segmen rute
- **Dukungan Debugging**: Logging komprehensif memungkinkan verifikasi mudah kalkulasi orientasi kereta
- **Efisiensi Development**: Sistem fallback cerdas mengurangi konflik visual selama testing
- **Konsistensi Cross-Platform**: Penanganan sistem koordinat yang tepat bekerja di berbagai proyeksi peta