3D Web Cinema Player — Three.js & Node Repo with Amit Sikdar

Turn any movie into an immersive, private 3D cinema hall directly in your browser.

This is the complete production codebase for the 3D Web Cinema Player. It combines Three.js WebGL rendering with a lightweight local Node.js media server to stream 4K/HD video files (MKV, MP4, WebM) into a physically modeled 3D auditorium with real-time 5.1 surround spatial audio.

WHAT IS INCLUDED IN THE REPO:

• Full 3D WebGL Cinema Environment: Built with Three.js (r168). Features a mathematically curved cinema screen, tiered auditorium seating using GPU instancing, projector light cones, stage barriers, and ambient theatre lighting.

• Dynamic Screen Bloom & Ambient Light: An offscreen canvas sampling pipeline extracts dominant colors and scene luminance at 10 FPS to project real-time ambient screen bounce onto the walls, ceiling, and stage floor.

• True 5.1 Spatial Audio Engine: Built on the Web Audio API. Splits video audio into 6 discrete channels and routes them to 5 physically modeled virtual speakers (Left, Right, Center Dialogue, Surround Left, Surround Right) and a dedicated Subwoofer with low-pass bass filtering and convolution room reverb.

• Live FFmpeg Media Server: A lightweight Node.js/Express backend that probes metadata, extracts WebVTT subtitles on the fly, and live-transcodes audio tracks without stuttering or infinite process leaks. Includes static FFmpeg binaries (zero manual system installs needed).

• 3D Projected Subtitles: Subtitles are extracted directly from MKV files and mapped onto a transparent 3D curved canvas mesh positioned directly in front of the screen.

• Interactive Viewing Modes: Smooth mouse and touch pan-around controls, dynamic FOV zoom, customizable seat switching (Front Row, Middle Center, Back Row, Left Side), togglable house lights, and Screen Wake Lock integration.

TECH STACK:

• Frontend: Three.js (r168), Vanilla JS, HTML5 Canvas, Web Audio API, Modern CSS Glassmorphism HUD.

• Backend: Node.js, Express, Fluent-FFmpeg, FFmpeg-Static, FFprobe-Static.

• Supported Formats: MKV, MP4, WebM, MOV, M4V.

REQUIREMENTS & SETUP:

• Requires Node.js installed on your computer.

• Run "npm install" then "node server.js" — drop your movie files into the movies folder and open localhost:3000 in Chrome or Edge.

• Includes complete setup documentation and clean directory architecture.

Instant access to the complete source code ZIP upon payment. Perfect for developer portfolios, WebGL/Three.js learning, and local media streaming setups.