🌳 3D Tree Explorer — Kids Plant Learning Inspiration
Kids are naturally curious — they poke bugs, pull weeds, and ask "why?" constantly. We thought: what if a tree could answer back? Inspired by planetarium apps and interactive nature docs, we built an explorable 3D tree where clicking reveals the science behind each part. What it does
An interactive 3D tree built with React + Three.js where users can orbit, click parts (roots, trunk, branches, leaves, flowers, seeds) to learn fun facts, watch fireflies and water droplets animate, and generate unique trees on demand — all set against a cinematic planet backdrop with PBR lighting and realistic water. How we built it
Procedural generation — Recursive branching with quaternion rotation, organic bark textures, and 8-segment tapering trunk Three.js scene — PBR materials, 2048² soft shadows, ACES tone mapping, MeshPhysicalMaterial water with clearcoat Camera system — Frame-rate-independent lerp() with OrbitControls disabled during zoom (the hardest bug) UI — Glass morphism cards, staggered animations, loading overlay Performance — InstancedMesh for 2000+ leaves (3 draw calls, not 2000+) Challenges
Blank screen bug — OrbitControls overwrote our camera lerp every frame; fixed by disabling controls during zoom Realistic tree structure — Iterated multiple times on branching math and canopy bounds Invisible droplets — PointsMaterial was too small; switched to mesh spheres with emissive glow Accomplishments
Smooth zoom-to-part with no visual glitches Unique procedural trees every generation Living atmosphere: fireflies, water droplets, splash rings, mist, planet sky Zero TypeScript build errors What's next
Seasonal modes, tree species selector, quiz mode, sound design, Web Worker offloading, mobile optimization, and WebXR AR mode.
