logo
Course

Vanilla Three.js Course

0% completed

100%

Chapter 01

Getting Started

  • Meet Adrian, Your Instructor

    Free
  • Get the Most Out of This Course

    Free
  • Access to a Private 24/7 Community

    Free
  • Environment Setup

    Free

Chapter 02

Introduction to 3D and Three.js

  • What is Three.js and Why Use It?

  • Setting Up Three.js — Your First Step into 3D Web

  • Basic Three.js Structure

  • Cameras

  • OrbitControls

Chapter 03

Transformations

  • Transformations

  • Position

  • Rotation

  • Scale.

Chapter 04

Meshes and Geometries

  • An Introduction to Meshes

  • Geometries

  • BoxGeometry

  • SphereGeometry

  • TorusGeometry

  • PlaneGeometry

  • Custom Geometry

Chapter 05

GUI (Graphical User Interface)

  • GUI (Graphical User Interface)

  • lil-gui library

  • Range (Slider)

  • Color Picker

  • Checkbox Controls

  • Folders

  • Dropdown (Select)

Chapter 06

Lights

  • Introduction to Lights

  • AmbientLight

  • DirectionalLight

  • PointLight

  • SpotLight

  • RectAreaLight

  • HemisphereLight

  • Final Lesson of Light

Chapter 07

Materials

  • Introduction to Materials

  • MeshBasicMaterial

  • MeshStandardMaterial

  • MeshPhysicalMaterial

  • MeshMatcapMaterial

  • MeshPhongMaterial

  • MeshToonMaterial

Chapter 08

Textures

  • Textures

  • Color/Albedo Map

  • Normal Map

  • Roughness Map/Gloss Map

  • Displacement Map

  • Metalness Map

  • Emissive Map

  • Specular Map

  • Mask Map

  • Environment Map

Chapter 09

Models

  • Let’s Talk About 3D Models

  • Add First Model

  • Change colors

  • 🎛️ Adding GUI Controls for Each Mesh

  • Playing Model Animations

  • OBJLoader

  • Loading .obj + .mtl Models

  • FBXLoader

  • Loading FBX Models

Chapter 10

Animations

  • Basic Animation

  • GSAP & Three.js

  • Advanced Camera Animation with GSAP

Course

Meet Adrian, Your Instructor

Loading...

Meet Adrian, Your Instructor

Loading...
Loading...
Loading...
    Video thumbnail
    Course icon

    Sign up to watch this lesson (and more).

    By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.

    Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.

    You'll also be the first to know about upcoming launches, events, and exclusive discounts.

    No spam—just helpful content to level up your skills.

    If that sounds fair, go ahead and log in to continue →

    Enter your name and email to get instant access

    or

    Already have an account? Log in

    0 Comments

    glass-bbok

    No Comments Yet

    Be the first to share your thoughts and start the conversation.

    tick-guideNext Lesson

    Get the Most Out of This Course

    You and I are about to dive into an exciting journey as you work your way through this course. So, let me introduce myself.

    I’m Adrian, and you might recognize my voice from my YouTube channel, where I’ve spent years creating tutorials that have reached millions of learners worldwide.

    I’m a GitHub star, conference speaker and an educator, and I’ve been doing this for almost a decade. Over time, I’ve been honored to teach a growing community of over 1 million developers, with videos that have accumulated nearly 100 million views and been watched for over 10 million hours. That’s like someone watching non-stop for over 1,140 years!

    But beyond the numbers, the most fulfilling part of this journey has been hearing from developers like you—people who’ve turned their dreams into reality. Many of them have landed their first developer jobs, transitioned into tech careers, or even launched successful startups after completing one of my courses.

    Take Gary from the US, for example. He said, "Adrian is a great teacher, very informative material and makes learning a subject like Next.js much more enjoyable than if I tried to learn it on my own."

    Or Nana from Ghana, who shared: "This course has been a game-changer for me. If you're on the fence about purchasing, let me assure you: this course has everything you need to become an industry-standard developer."

    And there’s Vamshi from India, who said: "Thank you, bro! Your course is helping me a lot both from YouTube and here."

    These are just a few of the thousands of success stories I’ve heard over the years. And now, it’s your turn to put in the time, trust the process, and make these skills your own.

    I’m here to guide you every step of the way, so let’s dive right in!