04 / 06 · 2024

ClassroomDrawings

Doodle → 3D, by AI

Turns a child's hand-drawn invention into an interactive 3D model. Vision-model pipeline rendering to Three.js, with a full storage + generation edge function.

Building in progressSolo build · AI pipeline · 3D

// screens

01 · Capture
Snap a hand-drawn invention from any phone
02 · 3D Viewer
Orbit, color, and animate the generated model
03 · Gallery
Per-classroom showcase of every invention

// The problem

Kids draw the most inventive contraptions on paper and never see them move. Off-the-shelf 3D tools demand modeling skills no 9-year-old has.

// The approach

  1. 01Phone-snap a drawing, run it through a vision model to extract structure, parts and intended motion.
  2. 02Generate a parameterized scene on the server and stream it to a Three.js viewer the student can orbit, color and animate.
  3. 03Persist every creation in a per-classroom gallery so teachers can revisit the inventions during sharing time.

// The outcome

  • Used as a classroom showcase activity — student inventions live on a shared gallery.
  • Pipeline costs kept low by caching parsed geometry per drawing hash.

// Tech stack

ReactThree.jsClaude VisionSupabaseEdge Functions
← Previous
LearnWith
Next →
GAVL