Create a pro-level 3D site, using Three.js, Motion One + GLSL shaders

Discover how to create your very own professional-level 3D website with cutting-edge techniques.

Taught by

Rik Lomas

If you want to make your own 3D site, this workshop is the perfect place to start. You’ll learn:

How to set up lighting and materials with Three.js
Creating orbit controls, rotation on scroll, and position on load
How to fade in tags with Motion One
The Vite build system
Applying GLSL shaders to Three.js

…and more! Knowledge of HTML, CSS, and Javascript is required for this intermediate workshop. The project is inspired by the award-winning Office for Future Furnishing site, and you’ll create a site for ‘Normal Sneakers’ using several techniques to achieve an effective 3D web experience. You can view the demo project here, ready?

Links + downloads

assets.zip

6.1mb

final.zip

6.1mb

3D model by Craig Waxman, photos by Daniel Farò.

Get access to Create a pro-level 3D site, using Three.js, Motion One + GLSL shaders

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Rik Lomas

Founder + CEO at SuperHi

Rik has taught technical skills to tens of thousands of people worldwide. In this workshop, he'll teach you how to create your very own professional-level 3D website, using Three.js, Motion One + GLSL shaders

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

Email Discord