Learn Three.JS with hands on Projects

Learn Three.JS with hands on Projects, available at $19.99, with 63 lectures, and has 5 subscribers.

You will learn about Set up the HTML and CSS files Set up a basic Three JS scene with the camera and renderer Create a sphere using a geometry, a mesh and a material Load a texture and map it on to a sphere Adding lights to a Three JS scene Animating a Three JS scene Handling user input Loading glTF models Adding post processing effects Creating a mug configurator Controlling the Camera using Orbit Controls Using Cube Camera to create 360° images This course is ideal for individuals who are Beginner ThreeJS web developers who want to learn ThreeJS by doing real world projects It is particularly useful for Beginner ThreeJS web developers who want to learn ThreeJS by doing real world projects.

Enroll now: Learn Three.JS with hands on Projects

Summary

Title: Learn Three.JS with hands on Projects

Price: $19.99

Number of Lectures: 63

Number of Published Lectures: 63

Number of Curriculum Items: 63

Number of Published Curriculum Objects: 63

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Set up the HTML and CSS files

Set up a basic Three JS scene with the camera and renderer

Create a sphere using a geometry, a mesh and a material

Load a texture and map it on to a sphere

Adding lights to a Three JS scene

Animating a Three JS scene

Handling user input

Loading glTF models

Adding post processing effects

Creating a mug configurator

Controlling the Camera using Orbit Controls

Using Cube Camera to create 360° images

Who Should Attend

Beginner ThreeJS web developers who want to learn ThreeJS by doing real world projects

Target Audiences

Beginner ThreeJS web developers who want to learn ThreeJS by doing real world projects

This short course is mainly aimed at Beginner Three.JS learners who want to learn the Basics of Three.JS. The student will get the opportunity to develop web applications along with the tutor and gain hands on experience in Three.JS. This course will cover the following basic topics in ThreeJS.

Creating a basic Three.JS Scene

Adding a Perspective Camera

The Field Of View (FOV), Aspect Ratio, Near Point and Far Point of Perspective Camera

Changing the Camera Position

Adding the WebGL Renderer

Changing the background of the WebGL Renderer

Updating the Renderer Size when the Window Resizes

Creating a Sphere using the Sphere Geometry

Loading Images using Texture Loader

Mapping the Image as a Texture to the Material

Meshing the Material to the Sphere Geometry

Adding Ambient Light to the Scene

Changing the Color and Intensity of Ambient Light

Adding Directional Light to the Scene

Changing the Position, Color and Intensity of Directional Light

Animating the Rotation of the Sphere

Request Animation Frame in Animation

Using the glTF Loader to Load glTF models

Using Orbit Controls to control the Motion of the Camera

Using the Orthographic Camera to view the glTF model in different angles

Using the Effect Composer and Render Pass to add Post Processing Effects

Using the After Image Pass to add dynamism to the scene

Using the Glitch Pass to add a glitching effect to the scene

Applying a black and white dot like effect to the scene using Dot Screen Pass

Applying an old film like effect using the Film Pass

Applying a greyscale effect using the Halftone Pass

Using the Shader Pass to add a Pixelation Effect

Creating a Mug Configurator Web Application

Developing the Codes used to change the Color of the Mug

Developing the Codes used to change the Texture of the Mug using Texture Loader

Developing the Codes to remove the Color applied before applying a Texture

Developing the Codes to remove the Texture applied before applying a Color

Limiting Zoom Using Orbit Controls

Limiting the Polar Rotation Angle using Orbit Controls

Using Cube Camera to create 360 degree environment maps using skybox images

Using Cube Texture Loader to load 6 skybox images

Additionally, the student will also learn the following JS topics.

Handling Event Listeners for Window Resize

Handling Event Listeners for Drag and Drop

Handling Event Listeners for Zooming in and out using Mouse Scrolling

Handling Image Files

Creating Color Icons using JS

Creating Texture Icons using JS

Course Curriculum

Chapter 1: Introduction to the Course

Lecture 1: What are you going to develop?

Lecture 2: What will you learn while developing the web app?

Chapter 2: Setup the HTML, CSS & JS files

Lecture 1: How to link the ThreeJS file to the HTML file?

Lecture 2: How to import the Three.JS library to the JS file?

Lecture 3: How to add a Drag and Drop Box?

Lecture 4: How to style the webpage using CSS?

Chapter 3: Create a Scene and Render it with Camera

Lecture 1: How to create a Scene?

Lecture 2: How to create a Camera and position it in the Three.JS Scene?

Lecture 3: How to Render a Scene with the Camera?

Lecture 4: How to resize the Renderer with the Window Size?

Chapter 4: Create a Sphere with Sphere Geometry & Material

Lecture 1: How to create a Sphere Geometry?

Lecture 2: How to assign a Material to the Sphere?

Lecture 3: How to Mesh the Material with the Sphere Geometry?

Chapter 5: Add Lightings

Lecture 1: What is Ambient Light and how to add it to the Scene?

Lecture 2: What is Directional Light and how to add it to the Scene?

Chapter 6: Animate the Scene

Lecture 1: How to Animate the Scene using the Animate function?

Chapter 7: Handling User Interaction

Lecture 1: How to add Event Listeners for Drag and Drop of Images?

Lecture 2: How to add Event Listener for Clicking on the Box?

Lecture 3: How to handle a selected Image File?

Lecture 4: How to add Event Listener for mouse wheel Zoom Events?

Chapter 8: Conclusion

Lecture 1: Final Words

Chapter 9: Create a web app that loads glTF models

Lecture 1: How the output would look like

Lecture 2: How to setup the HTML and JS files

Chapter 10: Load glTF models

Lecture 1: Use the glTF loader to load glTF models

Chapter 11: Use of Orbit Controls

Lecture 1: How to use Orbit Controls to control the motion of the Camera

Chapter 12: Use of Orthographic Camera

Lecture 1: How to use the Orthographic Camera to view glTF models

Chapter 13: ThreeJS Post Processing Effects

Lecture 1: What Post Processing Effects will you learn

Lecture 2: The Effect Composer and The Render Pass

Chapter 14: After Image Pass

Lecture 1: Application of After Image Pass Effect

Chapter 15: Glitch Pass

Lecture 1: Application of Glitch Pass Effect

Chapter 16: Dot Screen Pass

Lecture 1: Application of Dot Screen Pass Effect

Chapter 17: Film Pass

Lecture 1: Application of Film Pass Effect

Chapter 18: Halftone Pass

Lecture 1: Application of Halftone Pass Effect

Chapter 19: Pixelation Shader Pass

Lecture 1: Uniforms attribute in Shader Pass

Lecture 2: Vertex Shader attribute in Shader Pass

Lecture 3: Fragment Shader attribute in Shader Pass

Chapter 20: Create a Mug Configuration Web Application

Lecture 1: What will you develop

Lecture 2: How to setup the HTML & JS files

Lecture 3: Change of Background Color

Lecture 4: Design and Development of Color Icons

Lecture 5: Mug Initial Color Setup

Lecture 6: Model Color Change Function

Lecture 7: Design and Development of Texture Icons

Lecture 8: Model Texture Change Function

Lecture 9: Removal of Color applied before applying a Texture

Lecture 10: Removal of Texture applied before applying a Color

Lecture 11: How to limit Zoom in and Zoom out using Orbit Controls

Lecture 12: How to limit the Polar Rotation Angle using Orbit Controls

Chapter 21: 360 Degree Environment Mapping using Cube Camera

Lecture 1: Use of Cube Camera and Cube Texture Loader to generate Environment Maps

Chapter 22: Create Particle Effects using Buffer Geometry and Shaders

Lecture 1: What we are going to develop

Lecture 2: How to setup the HTML and JS files

Lecture 3: Define Vertex Shader and Fragment Shader codes

Lecture 4: Load Particle Image using Texture Loader

Lecture 5: Define Shader Material

Lecture 6: Create the Particle System Geometry

Lecture 7: Add the Particle System to the Scene

Lecture 8: Animate the Particle System

Chapter 23: Create a 3D Youtube Widget

Lecture 1: What we are going to develop

Lecture 2: How to setup the HTML and JS files

Lecture 3: Import Trackball Controls and CSS 3D Renderer

Lecture 4: Create Div and Iframe Elements

Lecture 5: Use of Blocker Element to control Camera Rotation

Lecture 6: How to change the parameters of Elements

Instructors

Muhammad Razni Hashim
Web Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 0 votes

5 stars: 0 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!