3D Roadmap Journey

A stunning 3D web-based roadmap visualization where a car moves through checkpoints as each day passes. Features a Swiss-design black and white dashboard with real-time progress tracking.

• 3D Animation: Industry-standard GSAP animations for smooth car movement
• Time-based Progression: Car automatically advances based on real dates
• Swiss Design Dashboard: Clean, minimalist black and white interface
• Responsive: Works on desktop, tablet, and mobile devices
• Persistent Progress: Uses localStorage to save journey progress
• Interactive Camera: Toggle between follow mode and free orbit controls

1. Add Your 3D Models:

   • Place your car model as models/car.glb
   • Place your road model as models/road.glb

2. Configure Your Roadmap:

   • Edit js/config.js to set your start date, checkpoints, and milestones

3. Open in Browser:

   • Simply open index.html in a modern web browser
   • No server required (unless using custom file loading restrictions)

Car Model:

• Format: GLB or GLTF
• File Size: 2-10 MB (max 20 MB for high detail)
• Polycount: 10k-50k triangles
• Dimensions: Approximately 2-4 units in Three.js space
• Textures: Embedded or use PBR materials
• Optimization: Use compressed textures (JPG for color, PNG for alpha)

Road Model:

• Format: GLB or GLTF
• File Size: 5-20 MB (max 50 MB for complex paths)
• Polycount: 20k-100k triangles
• Dimensions: Should match the path length in config (default ~30 units)
• Textures: Use tileable textures for roads
• Optimization: LOD (Level of Detail) recommended for long roads

1. Use Draco Compression: Reduces file size by 50-90%
2. Combine Textures: Use texture atlases to reduce draw calls
3. Bake Lighting: Pre-bake ambient occlusion and shadows
4. Remove Unnecessary Data: Delete hidden geometry, unused materials
5. Optimize Texture Resolution: 1024x1024 or 2048x2048 is usually sufficient

• Create Your Own: Use Blender (free) to model and export as GLB
• Download Free Models:
  • Sketchfab (Free 3D models)
  • Poly Pizza (Open-source models)
  • Kenney (Game assets)
• Purchase Premium:
  • TurboSquid
  • CGTrader

Edit js/config.js to customize your roadmap:

startDate: '2025-01-01', // When does your roadmap start?
totalDays: 30,           // How many days is your journey?

Define your milestones:

checkpoints: [
    { day: 0, label: 'Journey Start', description: 'Beginning' },
    { day: 10, label: 'Milestone 1', description: 'First goal' },
    { day: 20, label: 'Milestone 2', description: 'Second goal' },
    { day: 30, label: 'Complete', description: 'Journey end' }
]

Adjust car positions along the road (X, Y, Z coordinates):

roadPath: {
    points: [
        { x: 0, y: 0, z: 0, rotation: 0 },      // Start
        { x: 0, y: 0, z: -10, rotation: 0 },    // Checkpoint 1
        { x: 5, y: 0, z: -20, rotation: 0.5 },  // Turn
        { x: 0, y: 0, z: -30, rotation: 0 }     // End
    ]
}

Tip: After loading your road model, use browser dev tools to inspect the road geometry and determine appropriate checkpoint positions.

• Three.js (r152) - 3D rendering
• GSAP (3.12.5) - Professional animations
• Vanilla JavaScript - No framework dependencies
• CSS Grid & Flexbox - Responsive layouts

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

3d-roadmap-project/
├── index.html              # Main HTML file
├── css/
│   └── style.css          # Swiss design styles
├── js/
│   ├── config.js          # Configuration file (edit this!)
│   └── app.js             # Main application logic
├── models/
│   ├── car.glb            # Your car model (add this)
│   └── road.glb           # Your road model (add this)
└── assets/                # Optional: additional assets

Edit css/style.css:

• Dashboard background: .dashboard { background: ... }
• Accent colors: .stat-card { background: ... }
• Scene background: CONFIG.scene.backgroundColor in config.js

Edit js/config.js:

animation: {
    carMovementDuration: 2,        // seconds per checkpoint
    carMovementEase: 'power2.inOut' // GSAP easing function
}

scene: {
    cameraPosition: { x: 0, y: 10, z: 20 }, // Adjust view angle
    cameraLookAt: { x: 0, y: 0, z: 0 }
}

• Check file paths in config.js
• Verify models are in GLB/GLTF format
• Check browser console for errors
• Try serving with a local server: python -m http.server 8000

• Reduce model polygon count
• Use texture compression
• Enable LOD (Level of Detail)
• Reduce texture resolution

• Adjust roadPath.points in config.js
• Enable debug mode: CONFIG.debug.enabled = true
• Use grid helper to visualize positions

Free to use for personal and commercial projects.

Built with industry-standard tools:

• Three.js by Mr.doob and contributors
• GSAP by GreenSock
• Swiss design principles

Need Help? Check the browser console for detailed logs when debug mode is enabled.