Three.js Journey - The ultimate Three.js course

90h 46m 32s
English
Paid

Course description

Have you ever wanted to create stunning 3D websites? Whether you are a beginner or a more advanced developer, Three.js Journey is the only course you need to learn WebGL with Three.js.

Read more about the course

What will you learn?

The course is complete, yet accessible for beginners. We will start by discovering what WebGL is and why using the Three.js library is a must. We will then discover the various components of Three.js and once the basics are acquired, we will move on to more advanced techniques to display millions of particles, add physics, add interactions, create a galaxy, animate a raging sea, etc.

At the end of the course, you will have a deep understanding of Three.js and enough experience to start your own projects.

As a bonus, we will also learn how to use the 3D software Blender to be able to create our own models.

Is this course for you?

The course is beginner friendly

You don't need to have done WebGL or Three.js before.

This training is intended for absolute beginners and will explain the basics before tackling more advanced topics.

You don't have to be good at mathemathics.

Yes, we're going to do mathematics, but at a simple level and we will explain how it works with drawings and practice slowly.

You don't need to know how to use 3D software.

Together we will learn the basics of the 3D software Blender to create a model and import it into our scene.

You don't need to be good at JavaScript.

All you need are JavaScript basics like variables, objects, arrays, loops, functions and events. We will learn the rest together.

You don't need a crazy ass computer.

In some lessons, we will tickle performance limits, but we will also learn how to handle and optimize our code to get a good frame rate.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 66 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Three.js Journey - The ultimate Three.js course

0:00
/
#1: Introduction

All Course Lessons (66)

#Lesson TitleDurationAccess
1
Introduction Demo
35:24
2
What is WebGL and why use Three.js
23:56
3
First Three.js Project
01:19:28
4
Transform objects
46:12
5
Animations
30:27
6
Cameras
57:55
7
Fullscreen and resizing
30:41
8
Geometries
35:01
9
Debug UI
48:17
10
Textures
01:14:58
11
Materials
01:21:20
12
3D Text
44:30
13
Go live
24:30
14
Lights
42:03
15
Shadows
01:00:45
16
Haunted House
01:15:49
17
Particles
49:52
18
Galaxy Generator
01:08:47
19
Scroll based animation
01:23:02
20
Physics
01:57:23
21
Imported models
01:07:38
22
Raycaster and Mouse Events
01:07:31
23
Custom models with Blender
01:59:46
24
Environment map
01:49:34
25
Realistic render
01:12:22
26
Code structuring for bigger projects
03:19:41
27
Shaders
02:17:58
28
Shader patterns
01:49:25
29
Raging sea
01:15:33
30
Animated galaxy
01:14:12
31
Modified materials
51:55
32
Coffee Smoke
01:25:08
33
Hologram
01:21:19
34
Fireworks
01:47:28
35
Lights Shading
01:17:09
36
Raging Sea Shading
57:03
37
Halftone Shading
56:05
38
Earth
01:40:43
39
Particles Cursor Animation
01:48:08
40
Particles Morphing
01:35:12
41
GPGPU Flow Field Particles
02:23:00
42
Wobbly Sphere
01:16:27
43
Sliced Model
01:04:00
44
Procedural Terrain
01:24:19
45
Post-processing
01:36:40
46
Performance tips
01:12:25
47
Intro and loading progress
49:54
48
Mixing HTML and WebGL
58:08
49
Creating a scene in Blender
02:04:52
50
Baking and exporting the scene
02:11:58
51
Importing and optimizing the scene
46:56
52
Adding details to the scene
01:34:52
53
What are React and React Three Fiber
25:50
54
First React Application
04:23:02
55
First R3F Application
02:05:24
56
Drei
01:14:15
57
Debug
51:44
58
Environment and Staging
02:02:07
59
Load models
01:29:58
60
3D Text
59:14
61
Portal Scene
41:55
62
Mouse Events
47:15
63
Post-processing
01:53:21
64
Fun and Simple Portfolio
51:21
65
Physics
02:11:34
66
Create a game
04:01:51

Unlock unlimited learning

Get instant access to all 65 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Three.js & GameDev

Three.js & GameDev

Sources: SimonDev
Start with the basics of Three.js and gradually move on to advanced topics such as streaming infinite worlds, GPU memory optimization, and scalable...
47 hours 38 minutes 23 seconds
Impress everyone with a 3D particle scene with Blender and Three.js

Impress everyone with a 3D particle scene with Blender and Three.js

Sources: awwwards.com
When you work as a developer you know that the budget for outsourcing and finding the perfect content creator for your project may be a long and unpleasant proc
2 hours 11 minutes 56 seconds
Create a 3D multi-player game using THREE.js and Socket.IO

Create a 3D multi-player game using THREE.js and Socket.IO

Sources: udemy
With Socket IO it is very easy to create a game where multiple remote players can share data. In this course we start by installing NODE.js, a prerequisite of S
2 hours 39 minutes 55 seconds
Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)

Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)

Sources: udemy
Learn how to create interactive 3D experiences such as web application and games. A step by step process is used to show everything from setting up to creating
1 hour 32 minutes 8 seconds
Advanced FrontEnds

Advanced FrontEnds

Sources: Gary Simon
"Advanced FrontEnds" is a comprehensive course by Gary Simon, focusing on creating highly animated, interactive landing pages. It covers JavaScript, GSAP, and Three.js, with a p...
8 hours 58 minutes 38 seconds