HOT
blank

Learn Three.JS with hands on Projects

Development

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

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!

You may also like

Top 10 Ethical AI Courses to Learn in November 2024

Top 10 Game Development Courses to Learn in November 2024

Top 10 Software Testing Courses to Learn in November 2024