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
source
Trust me if my mom wasn't here I would have gave a standing ovation to your method of teaching, hats of to you jeff! thanks for making me your new subscriber I'm lucky one.
i dont understand 2:33 idk how to proceed plss
what terminal program to use to run again or generate that local host link?
nice work experience
Quick question. Which drag and drop website builder can anyone recommend to me to use where i can add my own js and css code?
God damnit that work history section is too relatable 15:27
If someone wants to make a 3d modelling app, is this better or unity?
if someone is experienced with unity, is it worth investing in three.js
If anyone else is getting unexpected behavior, passing a canvas object to the WebGLRenderer constructor gives me a white screen. The scene works as intended with no parameters passed to the constructor (4:32).
Is this video suitable for those who know nothing about coding and Javascript?
well, I was using position: relative/absolute/fixed, but the way u r usinggrid for item placement is more easy and efficient. Thank you!
2:31 bruh i already can't do even just the first step lmfao… is it cus i have a mac. my mac just shows my username when i ask it to run a new terminal. wtf is this even bruh
If I have a Nextjs project can I implement Three.js in my existing project or would I have to start from scratch?
Can you create a small game in this?
How to remove those grids🙂
im still waiting for English dub XD
Looks AMAZING.
Bloody Brilliant.
how to go to 2:30 Im new to VS Code
is there a full three js playlist