JavaScript Tutorial with Three.js – 5 Projects for Beginners
Learn fundamental JavaScript and Three.js with 5 stand-alone projects.✏️ Course developed by @robotbobby9
0) Three.js Roadmap
A roadmap to help you get started.
Starting code: https://github.com/bobbyroe/getting-started-threejs/tree/start
1) Textures in Three.js
Everything you need to know about applying textures to your 3D models
Free Textures: https://polyhaven.com/textures
2) Create A 3D Globe
Create a lovely globe with country outlines floating in the stars.
3D Globe code: https://github.com/bobbyroe/3d-globe-with-threejs
3) Simple Particle Effects
Quick, easy-to-create effects like Fire, Smoke and Sparkles.
Particle Effects: https://github.com/bobbyroe/Simple-Particle-Effects
4) Scroll Animation
Smooth animation triggered by scrolling.
Scroll Animation: https://github.com/bobbyroe/scroll-animation
5) Physics Variations
Interactive physics project with Three.js and Rapier Physics.
Physics: https://github.com/bobbyroe/physics-with-rapier-and-three
Since each project is stand-alone, feel free to skip around!
🔗 Learn Three.js Basics Course: https://robotbobby.thinkific.com/courses/learn-threejs-basics
⭐️ Contents ⭐️
Course Introduction
- 0:00 Welcome & Course Overview
- 0:20 Projects You'll Build
- 0:51 Meet Your Instructor: Bobby Row
- 1:03 The 5 Standalone Projects
- 1:34 Skipping Around the Course
Project 0: 3JS Road Map
- 1:39 Getting Started with 3JS
- 2:23 Understanding the 3JS Toolbox
- 2:54 The Core 3JS Components (Scene, Camera, Renderer)
- 3:10 Geometries, Materials & Meshes
- 4:13 The Importance of Lighting
- 4:30 Simple Animations
- 4:57 The Beginner's Road Map
- 5:12 The Intermediate Road Map
- 6:21 The Advanced Road Map
- 6:45 Where to Find Help & Inspiration
- 7:08 Learn by Experimenting
Project 1: Textures
- 7:26 An Introduction to Textures
- 7:50 Applying a Simple Texture
- 8:48 Handling Texture Aspect Ratios
- 10:50 Normal & Roughness Maps
- 12:20 Materials & Lighting
- 14:40 Understanding Normal Maps
- 15:11 Roughness Maps & Shininess
- 16:45 Experimenting with Different Textures
Project 2: 3D Globe
- 17:35 Building the 3D Globe
- 18:50 Setting Up the Sphere
- 21:56 Adding Stars to the Scene
- 22:54 Drawing Country Outlines
- 28:17 Using Fog for Depth
- 31:56 Adding Random Colors
Project 3: Particle Effects
- 34:50 Creating Particles
- 35:43 Building a Smoke Effect
- 37:12 Tweaking Particle Properties
- 39:38 Creating a Fire Effect
- 41:46 The Sparkly Dot Effect
- 45:50 The Role of Rotation
Project 4: Scroll Animation
- 46:20 Scroll-Triggered Animations
- 46:55 Setting up HTML & CSS
- 48:25 Linking 3JS to the DOM
- 49:03 Responding to Scroll Events
- 50:42 Loading the Astronaut Model
- 53:48 Applying a Matcap Material
- 54:38 Linking Rotation to Scroll
- 55:29 Adding a Starfield
- 57:49 Smoothing the Animation
Project 5: Physics
- 1:00:46 An Introduction to Physics with Rapier
- 1:02:00 Initial Scene Setup
- 1:05:27 Adding HDR Environment Lighting
- 1:07:49 Creating Metallic & Reflective Objects
- 1:09:08 Incorporating Different Geometries
- 1:10:45 Adding Rotational Physics
- 1:11:31 Visualizing Colliders
- 1:12:47 Using convexHull for Custom Colliders
- 1:17:31 Improving Mouse Interactivity
- 1:21:20 Integrating a GLTF Model
- 1:22:55 Adding a Color Palette
❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp
🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news Receive SMS online on sms24.me
TubeReader video aggregator is a website that collects and organizes online videos from the YouTube source. Video aggregation is done for different purposes, and TubeReader take different approaches to achieve their purpose.
Our try to collect videos of high quality or interest for visitors to view; the collection may be made by editors or may be based on community votes.
Another method is to base the collection on those videos most viewed, either at the aggregator site or at various popular video hosting sites.
TubeReader site exists to allow users to collect their own sets of videos, for personal use as well as for browsing and viewing by others; TubeReader can develop online communities around video sharing.
Our site allow users to create a personalized video playlist, for personal use as well as for browsing and viewing by others.
@YouTubeReaderBot allows you to subscribe to Youtube channels.
By using @YouTubeReaderBot Bot you agree with YouTube Terms of Service.
Use the @YouTubeReaderBot telegram bot to be the first to be notified when new videos are released on your favorite channels.
Look for new videos or channels and share them with your friends.
You can start using our bot from this video, subscribe now to JavaScript Tutorial with Three.js – 5 Projects for Beginners
What is YouTube?
YouTube is a free video sharing website that makes it easy to watch online videos. You can even create and upload your own videos to share with others. Originally created in 2005, YouTube is now one of the most popular sites on the Web, with visitors watching around 6 billion hours of video every month.
