Inspiration

Education teaches spatial, dynamic concepts with static, flat content. A student learning projectile motion sees a diagram with arrows. A chemistry student stares at a 2D molecule. 3D simulations fix this but building them is expensive.

What if AI could generate a fully interactive, parameterized 3D simulation for any concept in seconds?

That's Thinky3D. Not just slides or quizzes live 3D worlds generated on the fly by Gemini 3 Pro, where students drag sliders to change gravity, rotate shapes, and build intuition through direct manipulation.

What it does

A student types any topic (e.g. projectile motion, quadratic graphs, photosynthesis), selects a learning level (beginner → graduate), and Thinky3D generates a complete interactive course:

  1. Structured syllabus 3–7 sections generated by Gemini 3 Flash
  2. Rich slides HTML content with LaTeX math (\(F = ma\), \(a^2 + b^2 = c^2\)), gradient backgrounds, and adaptive themes
  3. Live 3D simulations The core feature. Gemini 3 Pro writes complete React Three Fiber code with interactive controls (sliders, toggles). Students orbit, tweak parameters, and watch simulations change in real time
  4. Quizzes Conceptual assessments that gate progression

Every simulation is novel code written by Gemini 3 Pro not a pre-built template. Ask about black holes → a rotating accretion disk with a mass slider. Ask about DNA → a double helix you can unwind and rotate. The AI reasons about what parameters matter and exposes them as controls.

How we built it

3D pipeline (the hardest problem): How do you take raw AI-generated code and execute it safely in a live browser?

  1. Generation Gemini 3 Pro receives topic + prior context + R3F conventions prompt → returns JSON with simulation code and control parameters
  2. Sanitization normalizes common AI output issues for our runtime
  3. Safe execution code runs in a controlled sandbox with runtime error fixing
  4. Error recovery error boundary catches crashes and can re-generate with the error fed back to Gemini

Gemini strategy:

  • Gemini 3 Pro powers 3D simulation generation chosen for code-reasoning quality
  • Gemini 3 Flash powers syllabus, slides, quizzes, and chatbot chosen for speed
  • Structured output (responseMimeType: "application/json" + responseSchema) on every call → zero parsing failures
  • System instructions carry learning-level and prior-section content for course coherence

Stack: React 19, TypeScript, Vite 6, Three.js / React Three Fiber / Drei. Full export to ZIP (slide PDFs, quiz PDFs, standalone HTML simulations). PDF upload supported for generating courses from textbook pages.

Challenges we ran into

  • Reliable AI-generated 3D code. Gemini produces different code patterns every time (imperative Three.js vs. declarative JSX). Building a sanitization + runtime safety layer that handles these edge cases took significant iteration.

  • Prompt engineering for 3D. Getting simulations that are both physically meaningful and visually clear required curated color palettes, material guidance, and explicit useFrame animation instructions.

  • Context window vs. coherence. Balancing token budget with course coherence when passing full prior-section content into each new Gemini call.

Accomplishments that we're proud of

  • Beyond slides, beyond video. PDFs are static. Videos like 3Blue1Brown are better because you see objects move, values change, and intuition form in real time. But you're still watching someone else's animation. Thinky3D puts that power in the student's hands: you don't just watch a pendulum swing, you drag the gravity slider and feel what changes. Every simulation is yours to explore, not a pre-rendered video to passively consume.
  • Any concept becomes a 3D experience. A student types a topic and gets a live, interactive simulation seconds later. Under the hood, raw Gemini output runs reliably in-browser through our sanitization and runtime safety layer.
  • Every simulation is one of a kind. No template library. The AI writes new parameterized code for each concept, so no two courses look the same.
  • Learning isn't locked inside the app. Full course export to ZIP with slide PDFs, quiz PDFs, and standalone simulation HTML files so students can learn anywhere, anytime.

What we learned

  • AI can write real 3D code. Gemini 3 Pro produces parameterized, animated, interactive simulations that actually run. The key isn't perfect output; it's a robust execution environment that handles the AI's mistakes gracefully.
  • Tier your models. Flash for speed where users feel it (instant slides, snappy chat). Pro for quality where it matters most (reliable 3D code). One model can't do both well.
  • Students actually learn more. We tested Thinky3D with peers across different subjects and levels. The consistent feedback: interacting with a 3D simulation built deeper intuition than reading slides or watching videos. Being able to tweak parameters and see instant results made abstract concepts click faster.

What's next for Thinky3D

  • App: Share/publish courses, saved curriculum history, auto-enabling features for smoother flow, a live teacher presence (avatar/guided vibe), mobile-friendly 3D controls, and better accessibility.
  • Simulations: More efficient code generation, fewer tokens, faster and more reliable 3D output.
  • Slides & quizzes: Deeper personalization by level/prior answers and richer content for a more tailored learning experience.

Built With

Share this project:

Updates