skip to content

Frontend Radar Simulator

[completed]Three.js, React, TypeScript, Node.jsgithub ↗

Project Overview

A full-stack 3D radar simulation that simulates real-world Radar Cross Section (RCS) detection logic in the browser. The system renders a rotating radar dish and detects multiple aircraft targets using volumetric raycasting with Three.js — all client-side, no backend hot path.

This was a follow-up to the backend-driven radar simulator. The goal: prove that browser-side raycasting is fast enough to detect a few hundred aircraft per frame without choking the main thread.

scene loads on this page in phase 3

Technology Stack

| Component | Technology | | ---------------- | ----------------------------------- | | Frontend | React + TypeScript + Vite | | 3D Engine | Three.js (WebGL) | | Backend (assist) | Node.js + Express 5.1.0 (TypeScript) | | HTTP Client | Axios |

Language distribution: TypeScript 97.4%, JavaScript 1.9%, HTML 0.7%.

Architecture

The frontend lives in RadarScene.tsx, which orchestrates a Three.js scene with a rotating radar dish and a volumetric detection cone. Aircraft are simulated client-side and detected by casting rays from the radar origin through the cone volume — each ray hit becomes a "blip" in the radar UI.

The backend exists mostly to seed simulation data (aircraft definitions, flight paths) — once loaded, the frontend runs autonomously.

Volumetric Detection

Volumetric raycasting differs from the backend-radar approach: instead of checking each aircraft against cone geometry, the frontend casts a fixed grid of rays from the radar origin through the cone every frame. Each ray returns the first intersection with any aircraft. The cone is a THREE.ConeBufferGeometry and the rays use the same Raycaster API used for mouse picking.

Tradeoffs vs. analytic detection:

  • Pro: Naturally handles complex geometry (multi-segment aircraft, hangars, terrain occlusion).
  • Con: O(rays × aircraft) per frame. Mitigated by capping ray density and using BVH acceleration on the aircraft hierarchy.

What I Learned

  • Three.js's built-in Raycaster is fast enough for ~10 rays/frame × ~300 aircraft on commodity hardware (~5ms total in V8).
  • Visualizing the rays themselves (a debug toggle) turned out to be the single best teaching aid — you can see the cone sweep miss or catch each aircraft.
  • WebGL + React works fine if you keep the Three.js objects in refs and never put them in React state. State changes trigger re-renders; Three.js renders on its own animation loop.