HomeCoursesLearn Three.js for 3D Computer Graphics

Trending

Intermediate

20h

Updated yesterday

Learn Three.js for 3D Computer Graphics

Explore how to develop 3D scenes and apply principles of physics to simulated objects using Three.js in a web browser.

Join 2.7 million developers at

Overview

Content

Reviews

Three.js is a web browser-based JavaScript library and API that creates and displays 3D scenes and animated objects using WebGL. The course contains four parts. You will start by setting up a basic scene, with a spinning cube. You will be introduced to basic geometries, meshes, and light sources. In the second part, you will work more deeply with advanced geometries and different materials and textures. This part also introduces points and sprites. In the third part, you will learn how to create animations. You will use camera movements and explore more advanced topics in meshes, geometries, and textures. In the final part, you will learn how to add physics and sound to your 3D scenes to create a realistic, dynamic behavior. You will also learn how to use Three.js with other frameworks such as React, Blender, WebXR, etc. By the end of this course, you will be able to create 3D animated scenes and objects for use in web development and games.

Three.js is a web browser-based JavaScript library and API that creates and displays 3D scenes and animated objects using WebGL....Show More

WHAT YOU'LL LEARN

An understanding of the basic blocks of Three.js and its application for creating realistic-looking 3D objects

Working knowledge of Three.js for creating 3D scenes and graphics

Working knowledge of linking Three.js with other frameworks such as Blender, React, TypeScript, WebXR, etc

Hands-on experience playing with, modifying, and creating 3D objects and scenes using Three.js in a web browser

The ability to integrate physics and sounds into objects to create realistic effects using Three.js

Familiarity with the core components of Three.js including light sources, textures, materials, geometries, points, and sprites

Familiarity with components like cloud particles, advanced meshes, and geometries and moving cameras to create 3D animations

An understanding of the basic blocks of Three.js and its application for creating realistic-looking 3D objects

Content

160 Lessons14 Quizzes

Introduction to the Course

1 Lessons

Master immersive 3D scene creation and animation using Three.js and WebGL.

Course Overview

Part 1: Getting Up and Running

1 Lessons

Master essential Three.js concepts to create your first 3D scene.

Introduction to Three.js Fundamentals

Creating the First 3D Scene with Three.js

9 Lessons

Master 3D graphics creation with Three.js, focusing on scene setup, animation, and interactivity.

3D Web Graphics with Three.js

Testing and Experimenting with the Examples

Rendering and Viewing a 3D Object

Adding Lights and Meshes

Adding an Animation Loop

Enabling Orbit Controls

Helper Objects and Util Functions

Summary of Creating First 3D Scene with Three.js

Quiz Yourself: Creating First 3D Scene with Thee.js

The Basic Components That Make Up a Three.js Application

11 Lessons

Master the essential components and functionalities for building 3D scenes in Three.js.

Basic Components of Three.js Application

Creating a Scene with Basic Functionality

Add and Remove Objects and Fog

Changing the Background

Updating All the Materials in the Scene

Geometries and Meshes

Functions and Attributes for Meshes

Using Different Cameras for Different Scenes

Debugging What a Camera Looks At

Summary of the Basic Components of a Three.js App

Quiz Yourself: The Basic Components That Make Up a Three.js App

Working with Light Sources in Three.js

11 Lessons

Explore various light sources in Three.js to enhance 3D scene realism.

Getting Started with Light Sources

Types of Lights

Working with Basic Lights

Working with Basic Lights: SpotLight

Working with Basic Lights: PointLight

Working with Basic Lights: DirectionalLight

Creating Color Object in Three.js

Working with Special Lights

THREE.LightProbe and THREE.LensFlare

Summary of Working with Light Sources in Three.js

Quiz Yourself: Working with Light Sources in Three.js

Part 2: Working with the Three.js Core Components

1 Lessons

Explore Three.js materials and geometries to create dynamic 3D scenes.

Mastering Three.js Materials, Geometries, and Effects

Working with Three.js Materials

12 Lessons

Explore diverse materials in Three.js to enhance 3D object visuals and effects.

Materials in Three.js

Properties of Materials in Three.js

Starting with Simple Materials

Simple Materials: MeshDepthMaterial

Simple Materials: MeshNormalMaterial

Multiple Materials for a Single Mesh

Advanced Materials

Advanced Materials: Standard, Physical, and Shadow

Using Our Own Shaders with ShaderMaterial

Materials for Line Geometry

Summary of Working with Three.js Materials

Quiz Yourself: Working with Three.js Materials

Learning to Work with Geometries

10 Lessons

Explore diverse geometries in Three.js for creating and customizing 2D and 3D objects.

Introduction to Work with Geometries

2D Geometries: PlaneGeometry

2D Geometries: CircleGeometry and RingGeometry

2D Geometries: ShapeGeometry

3D Geometries: BoxGeometry and SphereGeometry

3D Geometries: CylinderGeometry and ConeGeometry

3D Geometries: TorusGeometry and TorusKnotGeometry

3D Geometries: Polyhedra Shapes

Summary of Learning to Work with Geometries

Quiz Yourself: Learning to Work with Geometries

Exploring Advanced Geometries

10 Lessons

Explore advanced geometries in Three.js for creating intricate 3D shapes and text.

Introduction to Exploring Advance Geometries

Advanced Geometries: ConvexGeometry and LatheGeometry

Advanced Geometries: BoxLineGeometry and RoundedBoxGeometry

Advanced Geometries: TeapotGeometry

Creating a Geometry by Extruding a 2D Shape

Extruding 3D Shapes from an SVG Element

Geometries We Can Use for Debugging

Creating a 3D Text Mesh

Summary of Exploring Advanced Geometries

Quiz Yourself: Exploring Advanced Geometries

10.

Points and Sprites

8 Lessons

Explore the creation and manipulation of points and sprites in Three.js.

Introduction to Points and Sprites

Understanding Points and Sprites

Styling Particles Using Textures

Using Textures to Style Particles

Working with Sprite Maps

Creating THREE.Points from Existing Geometry

Summary of Points and Sprites

Quiz Yourself: Points and Sprites

11.

Part 3: Particle Clouds, Loading, and Animating Models

1 Lessons

Explore Three.js by mastering meshes, animations, and textures for enhanced 3D graphics.

Understanding Three.js: Meshes, Animations, and Textures Explained

12.

Creating and Loading Advanced Meshes and Geometries

11 Lessons

Explore advanced techniques for creating and loading complex geometries in Three.js.

Introduction to Advanced Meshes and Geometries

Grouping the Geometries

Geometries from External Resources

Local Storage to Save and Load Scene

Importing from 3D File Formats

Loading a glTF Model

Loading LEGO and Voxel-Based Model

Loading PDB Model

Loading PLY Model

Summary of Creating and Loading Advanced Meshes and Geometries

Quiz Yourself: Advanced Meshes and Geometries

13.

Animation and Moving the Camera

17 Lessons

Explore animation techniques and camera controls in Three.js for dynamic 3D scenes.

Introduction to Animation and Moving the Camera

Animations in Three.js

Selecting Objects with Mouse

Moving Objects with Mouse

Animating with Tween.js

Camera Controls in Three.js: ArcballControls

Camera Controls in Three.js: TrackballControls

Camera Controls in Three.js: FlyControls Camera

Camera Controls in Three.js: FirstPersonControls

Camera Controls in Three.js: OrbitControls

Morphing and Skeleton Animation

Animation with Morph Targets

Animation with Skeleton

Animations with External Models: glTF and FBX Model

Animations with External Models: Quake, COLLADA, and BHV Model

Summary of Animation and Moving the Camera

Quiz Yourself: Animation and Moving the Camera

14.

Loading and Working with Textures

16 Lessons

Explore advanced techniques for applying and managing textures in Three.js.

Introduction to the Working with Textures

Textures in Materials

HDR Images as Textures

Bumps and Wrinkles with Normal Map

Displacement Map to Alter Position of Vertices

Ambient Occlusion Map

Creating Fake Lighting Using a Lightmap

Metalness and Roughness Maps

Rendering to a Canvas and Using It as a Texture

Summary of Loading and Working with Textures

Quiz Yourself: Loading and Working with Textures

15.

Part 4: Post-Processing, Physics, and Sounds

1 Lessons

Enhance 3D graphics with advanced postprocessing, physics, and sound techniques.

Mastering Postprocessing, Physics, and Sounds in Three.js

16.

Render Post-Processing

10 Lessons

Enhance 3D visuals in Three.js through advanced postprocessing techniques and custom shaders.

Introduction to Render Postprocessing

Setting Up Three.js for Postprocessing

Postprocessing Passes

Render Multiple Outputs on the Same Screen

Advanced EffectComposer

Advanced Pass: BokehPass and SSAOPass

Custom Effects Using THREE.ShaderPass

Custom Postprocessing Shaders

Summary of Render Postprocessing

Quiz Yourself: Render Postprocessing

17.

Adding Physics and Sounds to Our Scene

10 Lessons

Integrate physics and sound in Three.js for immersive 3D experiences.

Introduction to Physics and Sounds in Three.js

Three.js and Rapier

Simulating Dominos in Rapier

Restitution and Friction

Rapier Built in Shapes

Joints of Objects

Spherical, Revolute, and Prismatic Joint

Sound in Three.js Scene

Summary of Adding Physics and Sound to Our Scene

Quiz Yourself: Adding Physics and Sounds to Our Scene

18.

Working with Blender and Three.js

8 Lessons

Integrate Blender and Three.js for seamless 3D modeling and animation workflows.

Introduction to Working with Blender and Three.js

Importing Three.js Scene into Blender

Importing Simple Blender model in Three.js

Importing Animation from Blender into Three.js

Blender to Bake Lightmaps and Ambient Occlusion

Custom UV Modeling in Blender

Summary of Working with Blender and Three.js

Quiz Yourself: Working with Blender and Three.js

19.

Three.js: Together with React, TypeScript, and WebXR

9 Lessons

Explore the integration of Three.js with React, TypeScript, and WebXR for dynamic 3D applications.

Introduction to Three.js with React, TypeScript, and WebXR

Using Three.js with TypeScript

Using Three.js and React with TypeScript

Using Three.js and React with React Three Fiber

Using Drei Package with React Fiber

Integrating Three.js and VR

Integrating Three.js and AR

Summary of Three.js Together with React, TypeScript, and WebXR

Quiz Yourself: Three.js with React, TypeScript, and WebXR

20.

Conclusion

1 Lessons

Master 3D web development with Three.js, covering essential techniques and integrations.

Wrap Up

21.

Appendix

2 Lessons

Master essential tools and structured coding for Three.js 3D graphics development.

Technical Requirements

Code Structure Used in the Course

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath