Description

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 https://github.com/fireship-io/threejs-scroll-animation-demo #3D #webdev #js 🔗 Resources Three.js Docs https://threejs.org/ WebGL Overview https://youtu.be/f-9LEoYYvE4 Inspiration https://atelier.net/virtual-economy/ Scrolling Animation with Three.js 📚 Chapters 00:00 Mindblowing 3D Websites 00:42 What we’re building 01:19 What is Three.js 02:12 Project Setup 03:35 Scene 03:52 Camera 04:28 Renderer 05:07 Geometry 05:28 Material 06:02 Mesh 06:16 Animation Loop 07:13 Lighting 08:45 Three.js Helpers 09:17 Orbit Controls 09:56 Random Generation 11:05 Scene Background 11:37 Texture Mapping 12:57 Scroll Animation 14:36 CSS Grid 🤓 Install the quiz app iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8 Android https://play.google.com/store/apps/details?id=io.fireship.quizapp 🔥 Watch more with Fireship PRO Upgrade to Fireship PRO at https://fireship.io/pro Use code lORhwXd2 for 25% off your first payment. 🎨 My Editor Settings - Atom One Dark - vscode-icons - Fira Code Font