Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial

Published: 21 May 2021
on channel: Fireship

2,699,076

103k

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/threej...

#3D #webdev #js

🔗 Resources

Three.js Docs https://threejs.org/
WebGL Overview • WebGL 3D Graphics Explained in 100 Se...
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/fires...
Android https://play.google.com/store/apps/de...

🔥 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

Watch video Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial online, duration hours minute second in high quality that is uploaded to the channel Fireship 21 May 2021. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 2,699,076 times and liked it 103 thousand visitors.

5,440