Welcome to Canvas for Coders!

I’ve always thought of the browser as the ultimate creative medium. It runs everywhere, generates real-time visuals through code, and lets anyone experience your work with a link. As I like to say:

The web browser is a 21st-century canvas.

In this course, we’ll explore creative expression on the web using Three.js. You’ll learn to think in three dimensions, prototype concepts, and transform ideas into interactive 3D experiences.

Bring your curiosity, your questions, and whatever you’ve been itching to make. I’m excited to build with you.

— Joohyun

Info

Instructor
Joohyun Park
Class
Thursdays, Oct 22 – Dec 10, 2026, 6:00–8:30pm
370 Jay Street, Room 409, Brooklyn Campus
Office hours
After class, same room
Zoom link
Join (Pre-approved only)

Prerequisites

Please complete the following before the first class:

Tools

  • Three.js — JavaScript 3D library
  • React — JavaScript library for building user interfaces
  • React Three Fiber — React renderer for Three.js
  • Drei — helpers and abstractions for React Three Fiber
  • React Spring — spring-based animation for React
  • React Three Rapier — physics engine for React Three Fiber
  • GSAP — timeline-based animation library
  • Vite — build tool and dev server
  • Vercel — deployment platform
  • GitHub — code repository

Weekly topics

Week 1: Intro

  • Thinking in xyz
  • Useful references
  • Setting up a class project
  • Three.js basic concepts

Week 2: Scene

  • First scene
  • Around the scene
  • Geometries
  • Materials
  • Mesh
  • Lights
  • Textures

Week 3: Motion / Assets

  • Animation loop
  • GSAP
  • Models
  • Environment map
  • Spatial audio

Week 4: React

  • Concept
  • Setting up
  • JSX
  • Components & props
  • Event handlers
  • State
  • Hooks

Week 5: Components in Space

  • Concept
  • Setting up
  • First R3F scene
  • Reusable components
  • State & interaction
  • Animating with react-spring
  • drei: helpers

Week 6: Interaction

  • Text
  • HTML in the scene
  • Scroll-driven scenes
  • Physics
  • Wrapping up

Week 7: Final

  • Presentation