Doppler Effect Simulation with Three.js

Dariush Samari

Completed work

Mathematician

Scientist

Web Developer

HTML5

JavaScript

three.js

Computer Software

Doppler Effect Simulation

A 3D web-based simulation demonstrating the Doppler effect using Three.js.

Overview

This project models a large emitter moving through space and emitting spherical wavefronts at a configurable frequency. As the emitter travels, observers perceive a shift in wavelength and frequency, illustrating the Doppler effect in action.

Demo

Either navigate to https://binarynectar.github.io/doppler-simulation/ or open index.html in your browser (preferably via a local HTTP server) to launch the simulation. Use your mouse (click + drag, scroll) to orbit, pan, and zoom with the built‑in OrbitControls.

Features

Real‑time WebGL rendering powered by Three.js

Configurable simulation parameters (velocity, frequency, wavefront count)

Interactive camera controls for exploring the scene

Responsive canvas that adjusts to window resizing

Prerequisites

A modern web browser with ES module support

Internet access (to fetch Three.js and its addons via UNPKG), or serve modules locally

(Optional) Python 3.x or any simple HTTP server for local hosting

Installation & Setup

Clone the repository

 git clone https://github.com/binarynectar/doppler-simulation.git
 cd doppler-simulation

Strat a local server (recommended to avoid CORS issues)

 python3 -m http.server 8000

Open the simulation in your browser

http://localhost:8000/index.html

File Structure

├── index.html      # Main Doppler simulation entry point
├── second.html     # Alternate version (identical implementation)
└── assets/         # (Optional) folder for local dependencies or assets

Configuration

Inside index.html, you can tweak constants near the top of the <script type="module"> block:

| Constant                 | Description                              |
| ------------------------ | ---------------------------------------- |
| `MAX_WAVEFRONTS`         | Maximum simultaneous wavefronts rendered |
| `VELOCITY_X/Y/Z`         | Emitter velocity components (m/s)        |
| `WAVE_EMISSION_INTERVAL` | Time between emissions (s)               |
| `WAVEFRONT_RADIUS`       | Initial wavefront radius scale           |

Adjust these values to see how they affect the visualization.