Interactive Pastel Morning Drive

Journey through a serene, low-poly city in this interactive 3D simulation. Built with Three.js, this project explores pastel aesthetics, real-time lighting, and smooth physics-based navigation.

Click here to access.

1. The Core Engine

The logic is driven by a custom State-Based Animation System integrated with the Three.js scene graph.

• Simulation Loop: The engine uses requestAnimationFrame(animate) to update the physics and visuals roughly 60 times per second.
• Physics Logic: It implements a basic Inertia and Friction model. The car’s speed is increased or decreased via user input (W/S keys) and multiplied by a damping factor (0.94) in every frame to simulate drag.
• Pathfinding/Constraint: The car is constrained to a predefined path. The engine uses progress (a value between 0 and 1) to determine the car’s position along a mathematical spline.

2. Rendering Technology

The visuals are rendered using WebGL through the Three.js library, focusing on a "Low-Poly Pastel" aesthetic.

• Shadow Mapping: The engine utilizes PCFSoftShadowMap (Percentage Closer Filtering) to provide soft, realistic shadows. This is critical for the "morning" look, where light needs to feel diffused.
• Lighting Model: A combination of AmbientLight (for global fill) and a DirectionalLight (acting as the Sun) is used. The Sun is configured with a high emissiveIntensity to create the pastel glow.
• Material System: It uses MeshStandardMaterial, a PBR (Physically Based Rendering) approach that handles how light interacts with the matte pastel surfaces of the buildings and trees.

3. Mathematical Tools

The simulation relies heavily on Calculus and Trigonometry to manage movement in 3D space.

• Spline Interpolation: The road and car path are defined by a CatmullRomCurve3. This algorithm creates a smooth path through a set of discrete points. The engine uses .getPointAt() to find the car's position and .getTangentAt() to determine the car's forward-facing direction.
• Collision Avoidance (Heuristic): The tree-planting logic uses Euclidean Distance (via Math.hypot) to check for overlaps between trees, buildings, and the road. This ensures assets are distributed realistically without clipping.
• Coordinate Transformation: The engine constantly translates "Progress" into a Vector3 coordinate and uses a LookAt matrix to rotate the car's mesh toward the next point on the spline.

4. Front-End Environment

The environment is built as a Modern ES Module (ESM) web application.

• Import Maps: The code uses a <script type="importmap">. This is a modern standard that allows the browser to resolve specific versions of libraries (like Three.js) directly from CDNs without needing a complex build system like Webpack.
• Responsive Viewport: It implements a "Window Resize" listener that updates the camera.aspect ratio and the renderer.setSize dynamically, ensuring the 3D scene doesn't stretch on different screens.
• Hybrid HUD: The interface is a "Hybrid UI," combining a 2D HTML/CSS overlay (for controls and stats) with the 3D WebGL canvas. The UI is set to pointer-events: none to allow mouse interactions to pass through to the 3D orbit controls.