3D Programming with JavaScript and the Three.js 3D Library
4.4 (496 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,169 students enrolled

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

Create 3D computer graphics, using webgl in a cross-browser environment. Learn about 3D Graphical space, and 3D Depth.
Bestseller
4.4 (498 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,172 students enrolled
Last updated 2/2020
English
English [Auto-generated]
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 1 article
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Expand all 56 lectures 05:37:42
+ Prelimineries
3 lectures 35:15

In this lecture we'll make an overview of Three.js library and about the course's topics.

Preview 07:56

In this video we'll review some of the basic math elements that will be used through this course.

Math Preliminaries
11:10

In this video we'll review some of the basic JS concepts and key features of ES6 that will be used in the course.

Javascript Preliminaries
16:09
+ Setting up the Environment
4 lectures 18:27

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.

Preview 10:30

In this lecture we'll see an outline for a Three.js application, which will be used for the rest of this course

The Application's Blueprints
02:48

This lecture overviews the three basic elements every 3D application must have.

Basic Elements of a 3D Application
01:51

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.

Showing a First Scene
03:18
+ Working With Geometry
11 lectures 46:50

In this lecture we'll talk about geometric objects and see what is needed in order to work with them.

Working With Geometry
02:36

In this lecture we'll locate the cube on the screen and see how to move and rotate it.

Locating the Cube
03:16

A detailed solution for the rotating cube exercise.

Exercise 1 solution
02:42

In this lecture we'll explain the Three.js unit system.

Exercise 1 Solution Unit System
01:47

In this lecture we'll see a very useful geometric object - the sphere.

Preview 05:35

In this lecture we'll see another interesting shape - the torus.

Torus
08:12

A detailed solution to the Saturn exercise.

Exercise 2 Solution
03:23

In this lecture we'll see how to create geometries from scratch by building vertices and faces.

Custom Geometry
05:00

A detailed solution to the Butterfly exercise.

Exercise 3 Solution
02:16

In this lecture we'll see how to write 3d text on the screen

Text Geometry
10:25

This lecture reviews the main things we've learned and presents a suggested section project.

Section Wrap Up
01:38
+ Working With Materials
7 lectures 40:16

A short overview about what we are going to learn in this section

Section Overview
01:29

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.

Preview 05:31

In this lecture we'll see a material that changes the geometries' colors according to their distance (depth)

Depth Material
03:31

In this lecture we'll see another way of showing objects - using line and points material.

Line and Points Material
05:50

In this lecture we'll see three materials that response to light.

Light Sensitive Materials
06:31

In this lecture we'll see a short reminder of this section's topics, and we'll take an overview of the challenge.

Section Wrap Up
02:41

In this video we'll see a detailed solution to the fragments challenge.

Ex4 Solution
14:43
+ Lights
8 lectures 46:08

In this lecture we'll see a short overview about the light's section.

Section Overview
01:16

In this lecture we'll light the scene with an ambient light

Ambient Light
05:28

In this lecture we'll light the scene with a hemisphere light.

Hemisphere Light
04:55

In this lecture we'll see the directional light - a light that comes from one source and goes to one target.

Preview 08:55

In this lecture we'll see the point light - a light that comes from a single light source and radiates in a sphere.

Point Light
09:48

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.

Spot Light
06:31

In this lecture we'll see a short reminder of this section's topics, and we'll take an overview of the challenge.

Section Wrap Up
01:37

A detailed solution to the spots exercise.

Challenge Solution
07:38
+ Cameras
5 lectures 27:19

An overview of the cameras section

Section's Overview
01:21

In this video we'll look in more detailes on the perspective camera that we are using from the beginning of the course

Perspective Camera
10:17

In this video we'll look at a different type of camera - an orthographic camera that sees the scenes differently from the perspective camera.

Orthographic Camera
08:18

In this video we'll make a short reminder of the cameras we saw in the section, and overview the section's challenge.

Section's Wrap Up
02:10

A detailed solution to the following object exercise.

Challenge Solution
05:13
+ User Interaction
7 lectures 53:05

An overview of this section and a reminder of the event handling mechanism in html

Section's Overview
03:24

In this video we'll see how to react to keyboard events.

Keyboard Events
09:08

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 Events
10:10

In this video we'll see how to use the ray caster to manipulate existing objects on the screen

Mouse Picking
10:09

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.

Ray Object
05:15
Section Wrap Up
03:00

A detailed solution to the balloons challenge.

Challenge Solution
11:59
+ Adding Realism
6 lectures 47:26

An overview about what we'll learn in this section

Section Overview
02:04

In this video we'll see how to apply a texture image to the geometric shapes.

Textures
08:48

In this video we'll see how to use textures for panoramic view

Panorama
12:05

In this video we'll add some realism to our scene by casting shadows

Cast Shadow
11:13

In this video we'll make a short wrap up of this section and introduce the challenge for the section

Section Wrapup
01:54

A detailed solution to the pyramids challenge

Challenge Solution
11:22
+ Final Challenge
3 lectures 17:02

In this video we'll view the final challenge for this course

Challenge Overview
01:47

In this video we'll see a detailed solution to the final challenge.

Challenge Solution
12:53

Final words for this course

Course Wrap Up
02:22
+ Extra Information - Source code, and other stuff
2 lectures 05:54
Source Codes
01:05
Bonus Lecture and Information
04:49
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