Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Three.js Tutorial Crash Course - 2021

Chris Courses via YouTube

Start learning Write review
DataCamp Ad

PowerBI Data Analyst - Create visualizations and dashboards from scratch

Learn More → Coursera Ad

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This course demonstrates how to develop an interactive 3D environment in the browser with Three.js. Learners create and animate meshes, add lighting and controls, manipulate geometry, and build a simple HTML/CSS interface.

Syllabus

- Install three.js & vite
- Create a scene, camera, and renderer
- Add a box mesh to the scene
- Animating and rotating the box
- Add a plane mesh
- Add directional lights
- Add depth / jaggedness to plane
- Modify to taste with dat.gui
- Rotate scene with OrbitControls
- Add hover effect
- Tailor hover effect to exact colors
- Fade out hover effect over time with GSAP
- Begin to set plane to exact dimensions
- Add randomized vertice movement
- Finishing exact plane dimensions
- Add interface with HTML and CSS

Taught by

Chris Courses

Reviews

Start your review of Three.js Tutorial Crash Course - 2021

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.