🌟 Shadow Shape Explorer: Building a 3D Interactive Shadow Simulation with AI Assistance
Ever wondered how a cylinder casts a circle one moment and a rectangle the next? Or why the shadow of a cube might appear as a hexagon from a certain angle? That curiosity inspired us to create the Shadow Shape Explorer—a fully interactive 3D simulation where users can manipulate objects and observe how their shadows change in real time.
|
| shadow3D.zip shadow3D/ |
This blog shares how we built the simulation, blending Three.js, clean interface design, and Gemini 2.5 Pro AI assistance to make physics concepts like light and shadow come alive.
🎯 Purpose: Learn by Playing with Light
The Shadow Shape Explorer was designed with student learning in mind. Instead of passively viewing shadow diagrams, learners interact directly with virtual 3D shapes—rotating them, switching between different geometries, and seeing how shadows behave depending on the angle of incidence.
This aligns well with inquiry-based learning and supports visual-spatial understanding of:
-
Shadow formation
-
3D geometry
-
Properties of light
🧠 Conceptualizing the Simulation
Inspired by real-world physics labs and the classic overhead projector, we defined key objectives:
-
Use point light source casting shadows on a vertical screen.
-
Let users choose between common shapes (cube, sphere, torus, etc.).
-
Provide intuitive rotation controls in all 3 axes (rotate up/down/left/right, roll left/right).
-
Focus on realistic shadow rendering to help students observe subtle details (e.g., torus shadow vs. cup shadow).
🧩 Tools Used
-
Three.js – the backbone of the 3D rendering
-
HTML/CSS/JS – for interface layout and control logic
-
Gemini 2.5 Pro AI – helped generate optimized code snippets for object creation, rotation logic, and clean UX
-
WebGL – enabled browser-based rendering without plugins
🏗️ Building the Simulation
1. Scene Setup
We configured a Three.js scene with:
-
A point light to act as the shadow-casting source.
-
A shadow-receiving screen plane positioned across from the light.
-
A ground plane for better spatial context.
2. Shape Library
We programmed multiple shapes, each with unique geometry logic:
-
Cube(BoxGeometry) -
Cylinder(CylinderGeometry) -
Sphere(SphereGeometry) -
Torus(TorusGeometry) -
Pyramid(ConeGeometry with 4 sides) -
Cup(Cylinder with torus handle) -
Plus Sign(Two intersecting bars)
Each object was configured to cast shadows while avoiding self-shadowing for clarity.
3. Rotation Controls
Rotation was handled using Euler angles with smooth interpolation toward a targetRotation:
This gave the shapes a smooth glide effect when rotating—important for younger learners to clearly observe changes.
4. Responsive Design
We used CSS Flexbox and percentage-based sizing to make the layout adapt to different screen sizes, including mobile.
🔍 Challenges & Breakthroughs
🌀 Cup Handle Alignment
Creating the cup handle required torus geometry and manual positioning. We leaned on Gemini AI to suggest rotational math and proper alignment.
💡 Realistic Shadows
Fine-tuning shadow bias, resolution, and light-camera settings was essential to produce accurate yet smooth shadows—especially on overlapping objects like the Plus Sign.
✨ Result: A Browser-Based Lab Tool
With everything packed in a single HTML file and no need for installs, the Shadow Shape Explorer is ideal for:
-
Virtual classrooms
-
Self-paced exploration
-
Embed into Learning Management Systems like SLS
Students can manipulate shapes, hypothesize, test, and observe—all in a matter of clicks.
🔗 Try It Yourself!
You can explore the interactive yourself or embed it in your lessons:
👉 View Resource on IWant2Study
🙏 Credit
Created by Zhi Hao, with coding assistance from Gemini 2.5 Pro AI, and hosted on iwant2study.org.
About
[SIMU_DESC]
Sample Learning Goals
[text]
For Teachers
[SIMU_TEACHER]
Software Requirements
[SIMU_SWREQ]
Translation
[text]
Research
[text]
Video
[text]
Credits
[SIMU_CREDITS]
Version:
https://weelookang.blogspot.com/2025/05/shadow-shape-explorer-building-3d.html
Other Resources
[text]