HTML Light Demo

An interactive HTML-in-Canvas lighting experiment powered by Three.js.

An unofficial recreation of @kaolti's project.

在线体验 Demo →

HTML Light Demo renders a real HTML interface inside a Three.js scene with three-html-render, then illuminates it with a physics-driven hanging spotlight. Pull the lamp, reshape the beam, and change its color or brightness—the HTML surface reacts in real time.

Highlights

• Real HTML rendered into WebGL through HTML-in-Canvas
• Physically simulated pendulum motion with a constrained Verlet solver
• Live spotlight angle, brightness, color, and power controls
• Mouse-driven aiming, pulling, release momentum, and reset interactions
• Idle-aware rendering that sleeps when the scene is stable

Controls

Input	Action
Left mouse	Pull and aim the lamp
Release	Let the lamp swing freely
Right-drag	Adjust the beam angle
Right-click	Cycle the light color
Double-click	Reset the lamp

Built With

• three-html-render — HTML-in-Canvas rendering
• Three.js — 3D scene, materials, and lighting
• React and TypeScript — interface and application logic
• Vinext and Vite — development and build pipeline

Getting Started

Requires Node.js 22.13 or newer.

git clone https://github.com/jinruozai/HTML-Light-Demo.git
cd HTML-Light-Demo
npm install
npm run dev

Quality checks:

npm run lint
npm test

Credits

Original concept and art direction by @kaolti. This independent implementation was created for learning and demonstration and is not officially affiliated with the original creator.

License

Released under the MIT License.