Enhance Three.js 3D train implementation

### Overview
Critical fixes to the Three.js WebGL 3D train implementation addressing rendering issues, model visibility, and WebGL context integration. Transformed the previous non-functional 3D train into a massive, highly visible blue train model with proper scaling and real-time animation updates.

### Key Changes
- **WebGL Context Integration**: Fixed render function with proper camera matrix setup and depth buffer handling
- **Massive 3D Model**: Increased train geometry to 1000x300x150 units with bright blue coloring for maximum visibility
- **Enhanced Materials**: Switched to MeshBasicMaterial with DoubleSide rendering for better WebGL compatibility
- **Visual Markers**: Added bright yellow corner spheres (30-unit radius) for clear model identification
- **Dynamic Scaling**: Implemented automatic scale adjustments (0.1x factor) based on map zoom level
- **Dual Train System**: Both CSS fallback (red) and Three.js 3D (blue) trains now work simultaneously
- **Real-time Updates**: Fixed position and rotation synchronization during animation playback

### Technical Implementation
- **Render Pipeline Fix**: Corrected WebGL viewport sizing, camera projection matrix handling, and depth testing
- **Model Architecture**: Created composite Group with main body (BoxGeometry), roof, and corner markers
- **Material Optimization**: Used MeshBasicMaterial for consistent rendering without lighting dependencies
- **Coordinate System**: Proper Mercator coordinate conversion with meterInMercatorCoordinateUnits scaling
- **Animation Integration**: Enhanced updateTrainRotation to handle both CSS and WebGL train updates
- **Debug Infrastructure**: Comprehensive logging for model creation, positioning, and render states
- **Context Sharing**: Proper WebGL context sharing between Mapbox GL JS and Three.js renderer

### Impact
- **Functional 3D Visualization**: Users now see actual WebGL 3D train alongside CSS fallback
- **Clear Visual Distinction**: Blue 3D model vs red CSS train allows easy identification of rendering method
- **Performance Stability**: Fixed WebGL integration prevents crashes and rendering conflicts
- **Development Debugging**: Extensive logging enables easier troubleshooting of 3D rendering issues
- **Cross-Platform Compatibility**: Enhanced material and geometry settings work across different WebGL implementations
- **User Experience**: Smooth real-time 3D train movement with proper scaling and orientation
- **Technical Foundation**: Solid Three.js integration ready for advanced 3D features and model improvements

### Gambaran Umum
Perbaikan kritis pada implementasi kereta 3D Three.js WebGL yang mengatasi masalah rendering, visibilitas model, dan integrasi konteks WebGL. Mengubah kereta 3D yang sebelumnya tidak berfungsi menjadi model kereta biru yang besar dan sangat terlihat dengan scaling yang tepat dan update animasi real-time.

### Perubahan Utama
- **Integrasi Konteks WebGL**: Memperbaiki fungsi render dengan setup matriks kamera yang tepat dan penanganan depth buffer
- **Model 3D Masif**: Meningkatkan geometri kereta menjadi 1000x300x150 unit dengan warna biru terang untuk visibilitas maksimum
- **Material yang Ditingkatkan**: Beralih ke MeshBasicMaterial dengan rendering DoubleSide untuk kompatibilitas WebGL yang lebih baik
- **Marker Visual**: Menambah bola kuning terang di sudut (radius 30 unit) untuk identifikasi model yang jelas
- **Scaling Dinamis**: Implementasi penyesuaian skala otomatis (faktor 0.1x) berdasarkan level zoom peta
- **Sistem Kereta Ganda**: Kereta CSS fallback (merah) dan Three.js 3D (biru) sekarang bekerja bersamaan
- **Update Real-time**: Memperbaiki sinkronisasi posisi dan rotasi selama pemutaran animasi

### Implementasi Teknis
- **Perbaikan Pipeline Render**: Mengoreksi sizing viewport WebGL, penanganan matriks proyeksi kamera, dan depth testing
- **Arsitektur Model**: Membuat Group komposit dengan badan utama (BoxGeometry), atap, dan marker sudut
- **Optimisasi Material**: Menggunakan MeshBasicMaterial untuk rendering konsisten tanpa ketergantungan pencahayaan
- **Sistem Koordinat**: Konversi koordinat Mercator yang tepat dengan scaling meterInMercatorCoordinateUnits
- **Integrasi Animasi**: Meningkatkan updateTrainRotation untuk menangani update kereta CSS dan WebGL
- **Infrastruktur Debug**: Logging komprehensif untuk pembuatan model, positioning, dan status render
- **Sharing Konteks**: Sharing konteks WebGL yang tepat antara Mapbox GL JS dan renderer Three.js

### Dampak
- **Visualisasi 3D Fungsional**: Pengguna sekarang melihat kereta 3D WebGL aktual bersama CSS fallback
- **Perbedaan Visual yang Jelas**: Model 3D biru vs kereta CSS merah memungkinkan identifikasi mudah metode rendering
- **Stabilitas Performa**: Integrasi WebGL yang diperbaiki mencegah crash dan konflik rendering
- **Debugging Development**: Logging ekstensif memungkinkan troubleshooting masalah rendering 3D yang lebih mudah
- **Kompatibilitas Cross-Platform**: Setting material dan geometri yang ditingkatkan bekerja di berbagai implementasi WebGL
- **Pengalaman Pengguna**: Pergerakan kereta 3D real-time yang halus dengan scaling dan orientasi yang tepat
- **Fondasi Teknis**: Integrasi Three.js yang solid siap untuk fitur 3D lanjutan dan peningkatan model