Welcome to Canvas for Coders!

I’ve always thought of the browser as a creative medium. It runs everywhere. It can generate visuals and sound through code. Anything you make can reach anyone with a link. And best of all, it’s interactive. As I like to say:

The web browser is a twenty-first century canvas.

In this course, we’ll explore creative expression on the web through Three.js: thinking in three dimensions, prototyping concepts, and shaping ideas into interactive experiences.

Bring your curiosity, your questions, and whatever you’ve been wanting to make. I’m looking forward to building 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
  • Your first 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