0:00 / 0:00
Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial
Fireship
4.3M subscribers • 38 videos on Hallway
- Recommended by 1 person: 1 in engineering communities.
- Presented by Jeff Delaney, creator of Fireship
- Linked in the descriptionfireship-io/threejs-scroll-animation-demo
Beginner. No background in the topic needed.
3M views5 years ago1 recommendation
Graphics and audioWeb developmentCreative codingRendering
Jeff Delaney teaches the basics of Three.js by building an animated 3D scrolling portfolio website.
Learn the basics of Three.js - a tool for building amazing 3D graphics with JavaScript. In this tutorial, we create an animated 3D scrolling animation for a portfolio website github.com/fireship-io/threejs-scroll-animation-demo #3D #webdev #js 🔗 Resources Three.js Docs threejs.org/ WebGL Overview youtu.be/f-9LEoYYvE4 Inspiration atelier.net/virtual-economy/ Scrolling Animation with Three.js 📚 Chapters Mindblowing 3D Websites What we’re building What is Three.js Project Setup Scene Camera Renderer Geometry Material Mesh Animation Loop Lighting Three.js Helpers Orbit Controls Random Generation Scene Background Texture Mapping Scroll Animation CSS Grid 🤓 Install the quiz app iOS itunes.apple.com/us/app/fireship/id1462592372?mt=8 Android play.google.com/store/apps/details?id=io.fireship.quizapp 🔥 Watch more with Fireship PRO Upgrade to Fireship PRO at fireship.io/pro Use code lORhwXd2 for 25% off your first payment. 🎨 My Editor Settings - Atom One Dark - vscode-icons - Fira Code FontWhy it's here
1 person recommends thisWhat people say. Recommended as a great starting point for learning Three.js and WebGL basics.
u/zudchuin r/Frontend • Mentions
On “How to recreate this website?”
By menu you mean the second video? I saw that more as a scroll effect but that doesn't really change the look of it. It's important to note that this is not a real site, it's a 3d render. While it's possible to recreate the animation and general look and feel you can not achieve this level of fidelity in real time.
I have some experience with three.js, here's the site I've built for reference On Running, Solace. And here's how I got started and what I learned from this experience:
1. This video taught be the basics, it actually include animation on scroll. You will get quite far and learn most of the basics.
2. Three has excellent documentation and you get a lot out of the box.
3. Creati…