A Quick Guide for Three.JS Beginners who want to learn the Basics of Three.JS Web App Development
This short course is mainly aimed at Beginner Three.JS learners who want to learn the Basics of Three.JS within an hour. The student will get the opportunity to develop a web application along with the tutor and gain hands on experience in Three.JS. In this short course the student will be developing a web application that accepts an Image as Input and Projects it onto a Rotating Sphere. This course will cover the following basic topics in ThreeJS.
What you’ll 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.
Course Content
- Introduction to the Course –> 2 lectures • 2min.
- Setup the HTML, CSS & JS files –> 4 lectures • 6min.
- Create a Scene and Render it with Camera –> 4 lectures • 17min.
- Create a Sphere with Sphere Geometry & Material –> 3 lectures • 9min.
- Add Lightings –> 2 lectures • 13min.
- Animate the Scene –> 1 lecture • 2min.
- Handling User Interaction –> 4 lectures • 16min.
- Conclusion –> 1 lecture • 1min.
Requirements
This short course is mainly aimed at Beginner Three.JS learners who want to learn the Basics of Three.JS within an hour. The student will get the opportunity to develop a web application along with the tutor and gain hands on experience in Three.JS. In this short course the student will be developing a web application that accepts an Image as Input and Projects it onto a Rotating Sphere. 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
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