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
