Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

3D Programming with JavaScript and the Three.js 3D Library

Name: 3D Programming with JavaScript and the Three.js 3D Library
Rating: 4.0 (974 reviews)

Create 3D computer graphics, using webgl in a cross-browser environment. Learn about 3D Graphical space, and 3D Depth.

Created byTim Buchalka's Learn Programming Academy, Shay Tavor

Last updated 4/2025

English

What you'll learn

Design 3-dimensional logos, texts and animations, and incorporate them in your own page, application or game
Write simple to complex 3D applications using 3js in Javascript and master their theories and practices
Create and add 3-dimensional depth to any video html based game
Apply geometry skills while writing large, complex and structured programs
Be competent in one of the most sought after fields of expertise that clients and organizations are looking for

Course content

10 sections • 56 lectures • 5h 37m total length

Course Introduction7:56
In this lecture we'll make an overview of Three.js library and about the course's topics.
Math Preliminaries11:10
In this video we'll review some of the basic math elements that will be used through this course.
Javascript Preliminaries16:09
In this video we'll review some of the basic JS concepts and key features of ES6 that will be used in the course.

Download and Use the Library10:30
In this lecture we'll see how to download the Three.js source code and how to get it working in your browser. In addition we'll see the official Three.js website and its contents.
The Application's Blueprints2:48
In this lecture we'll see an outline for a Three.js application, which will be used for the rest of this course
Basic Elements of a 3D Application1:51
This lecture overviews the three basic elements every 3D application must have.
Showing a First Scene3:18
In this lecture we'll finally write our first application - this application is very simple - it renders the scene, and it's basic code for each application that follows.

Working With Geometry2:36
In this lecture we'll talk about geometric objects and see what is needed in order to work with them.
Locating the Cube3:16
In this lecture we'll locate the cube on the screen and see how to move and rotate it.
Exercise 1 solution2:42
A detailed solution for the rotating cube exercise.
Exercise 1 Solution Unit System1:47
In this lecture we'll explain the Three.js unit system.
The Sphere5:35
In this lecture we'll see a very useful geometric object - the sphere.
Torus8:12
In this lecture we'll see another interesting shape - the torus.
Exercise 2 Solution3:23
A detailed solution to the Saturn exercise.
Custom Geometry5:00
In this lecture we'll see how to create geometries from scratch by building vertices and faces.
Exercise 3 Solution2:16
A detailed solution to the Butterfly exercise.
Section Wrap Up1:38
This lecture reviews the main things we've learned and presents a suggested section project.
Text Geometry10:25
In this lecture we'll see how to write 3d text on the screen

Section Overview1:29
A short overview about what we are going to learn in this section
Normal Materials5:31
In this lecture we'll see another property of the basic material and then we'll see a different material that uses the norms to create colors.
Depth Material3:31
In this lecture we'll see a material that changes the geometries' colors according to their distance (depth)
Line and Points Material5:50
In this lecture we'll see another way of showing objects - using line and points material.
Light Sensitive Materials6:31
In this lecture we'll see three materials that response to light.
Section Wrap Up2:41
In this lecture we'll see a short reminder of this section's topics, and we'll take an overview of the challenge.
Ex4 Solution14:43
In this video we'll see a detailed solution to the fragments challenge.

Section Overview1:16
In this lecture we'll see a short overview about the light's section.
Ambient Light5:28
In this lecture we'll light the scene with an ambient light
Hemisphere Light4:55
In this lecture we'll light the scene with a hemisphere light.
Directional Light8:55
In this lecture we'll see the directional light - a light that comes from one source and goes to one target.
Point Light9:48
In this lecture we'll see the point light - a light that comes from a single light source and radiates in a sphere.
Spot Light6:31
In this lecture we'll see the spot light. This light comes from a single light source but it casts a cone shape of light.
Section Wrap Up1:37
In this lecture we'll see a short reminder of this section's topics, and we'll take an overview of the challenge.
Challenge Solution7:38
A detailed solution to the spots exercise.

Section's Overview1:21
An overview of the cameras section
Perspective Camera10:17
In this video we'll look in more detailes on the perspective camera that we are using from the beginning of the course
Orthographic Camera8:18
In this video we'll look at a different type of camera - an orthographic camera that sees the scenes differently from the perspective camera.
Section's Wrap Up2:10
In this video we'll make a short reminder of the cameras we saw in the section, and overview the section's challenge.
Challenge Solution5:13
A detailed solution to the following object exercise.

Section's Overview3:24
An overview of this section and a reminder of the event handling mechanism in html
Keyboard Events9:08
In this video we'll see how to react to keyboard events.
Mouse Events10:10
In this video we'll see how to catch a mouse event and we'll introduce the ray caster object in order to convert mouse coordinates into 3d coordinates.
Mouse Picking10:09
In this video we'll see how to use the ray caster to manipulate existing objects on the screen
Ray Object5:15
In this video we'll take a look at the ray itself, and see how we can use it to get real 3d coordinates on the screen.
Section Wrap Up3:00
Challenge Solution11:59
A detailed solution to the balloons challenge.

Section Overview2:04
An overview about what we'll learn in this section
Textures8:48
In this video we'll see how to apply a texture image to the geometric shapes.
Panorama12:05
In this video we'll see how to use textures for panoramic view
Cast Shadow11:13
In this video we'll add some realism to our scene by casting shadows
Section Wrapup1:54
In this video we'll make a short wrap up of this section and introduce the challenge for the section
Challenge Solution11:22
A detailed solution to the pyramids challenge

Requirements

Basic knowledge of JavaScript programming
A computer with a browser
Knowledge in using simple calculations with geometry
Enthusiasm and a willingness to take your existing Javascript programming skills to the next level

Description

Do you want to get into 3D programming with Javascript but don't know where to start?

Maybe you have tried out the Three.js 3D Library but found it too difficult to figure out.

Or maybe you've just decided you want to create 3D games using Javascript but don't know where to begin.

Whatever the reason, if you want to get up to speed with 3D programming in Javascript, you are at the right place.

Become competent in one of the most sought after fields of expertise that clients and organizations are looking for!

Your course instructor is Shay Tavor who has over 15 years of Javascript programming experience and has made a name for himself as an expert 3D programmer and teacher.

If you have any experience in 3D programming, you probably found it quite difficult.

Shay has unique skills in making the complex easy to understand, and he will explain the important concepts and topics in 3D programming using Javascript the Three.js 3D Library.

This course contains the most comprehensive and detailed tutorials that cover everything you need to know about Javascript 3D programming.

By the end of this course you will have a deeper understanding of the concepts relating to 3D graphical space, be able to add 3 dimensional depth to any html game, and will be able to create 3-dimensional logo's, texts and animations, and incorporate them in a standard static html page. And that's just the beginning.

What will you learn in this course?

You will learn how to develop and make your own 3 dimensional logos, texts and animations, and be able to incorporate them in a standard static html page or html game. This forms one of the most essential components of web applications.

The 3D Programming course uses Javascript and Three.js (a 3D Javascript library) and provides the most comprehensive and detailed course on this popular Javascript 3D library.

What are the main topics covered in this course?

The Javascript: Three.js application

Geometric objects

Sophisticated material on geometry

Lights

Cameras

User interaction

Adding realism

In addition, this course includes 10 coding challenges that will help you sharpen your newly acquired skills and understanding of the entire process and how it works.

Why enrolling in this course is the best decision you can make.

The ideal student would be someone with a basic knowledge of Javascript who is eager to improve their skills and master 3D programming to take their understanding to new levels.

Many examples are included to make it even easier to learn and understand.

Completing the 3D Programming with Javascript: Three.js course will provide you with the tools and skill required to take your programming to the next level.

Ready to bring your ideas to life? Why not get started today?

Click the Signup button to sign up for the course!

Who this course is for:

This is course is suitable for those with basic skills, who wish to become an expert in 3D programming
Students who are comfortable with simple calculations in geometry
Students who have knowledge in JS6 features, functions, variables and class definitions to expand their learning

3D Programming with JavaScript and the Three.js 3D Library

What you'll learn

Explore related topics

Course content

Prelimineries3 lectures • 35min

Setting up the Environment4 lectures • 18min

Working With Geometry11 lectures • 47min

Working With Materials7 lectures • 40min

Lights8 lectures • 46min

Cameras5 lectures • 27min

User Interaction7 lectures • 53min

Adding Realism6 lectures • 47min

Final Challenge3 lectures • 17min

Extra Information - Source code, and other stuff2 lectures • 6min

Requirements

Description

Who this course is for: