Create a pro-level 3D site, using Three.js, Motion One + GLSL shaders, with an award-winning coder.
In this project, award winning coder and founder of SuperHi, Rik Lomas, will show you how to create your very own professional-level 3d website using tools such as Three.js, Motion One, GLSL shaders, Vite build system, HTML and CSS, and more!
Inspired by the award-winning Office for Future Furnishing site, Normal Sneakers is using several cutting edge techniques to achieve an effective 3d web experience.
If you want to make your own sneaker site or 3d site, this is the perfect place to start!
00:00:00 Intro
00:01:23 Why me?
00:02:04 Rough order of operations
00:04:42 Vite build tools
00:08:43 HTML and CSS
00:22:35 Motion One to fade in tags
00:31:05 Three.js setup
00:42:09 Three.js lighting and materials
00:50:42 Orbit Controls
00:55:47 Rotation on scroll and position on load
01:03:30 Responsive and z-index fixes
01:08:15 Adding a GLSL shader pass
01:25:28 Shader effect on scroll
01:35:21 Loading our 3d GLTF object
01:42:36 Adding a preloading screen
01:48:30 Building our project with Vite
01:49:34 Outro
Demo:
https://superhi-videos.s3.amazonaws.c...
Links:
https://offficestud.io/
https://nodejs.org/
https://vitejs.dev/
https://motion.dev/
https://threejs.org/
https://sketchfab.com/
Assets:
https://superhi-videos.s3.amazonaws.c...
Final code:
https://superhi-videos.s3.amazonaws.c...
3d model by Craig Waxman:
https://polyspherecreative.com/
Photos by Daniel Farò
https://app.deathtothestockphoto.com/...
Weather-aware websites: How to add weather data and styling to a website using Javascript
Scroll animations! How to add a flowing path like the Lusion site with SVG and Javascript
