3D on the web with Three.js

The web is no longer just a place for images and video but, thanks to WebGL and Three.js, can become a full-blown 3D metaverse. Even adding a little 3D to your website can make a big impact!

We'll begin with a showcase of what is possible with 3D on the web. We'll then learn how to build a 3D-enabled website from scratch; working with models, lights, cameras; playing with animation and interactivity; learning about materials; and integrating it into a website.

Goals

• Understand the possibilities and limitations of 3D on the web.
• Build simple scenes with objects, lights and cameras.
• Integrate a 3D scene with your page using scrolling techniques.

Requirements

This course is for students with a bit of background in HTML/CSS and a little to no background in JavaScript. If you need a refresher, you can watch a recording of our web introduction course.

Next Steps

Get a recap of the basics in the official Three.js documentation.

• The ultimate resource for learning Three.js is Bruno Simon's amazing Three.js journey.
• Look at the projects on the Three.js homepage and get inspired!