5513Students already enrolled

Vanilla Three.js Course

JavaScript-based WebGL engine that can run GPU-powered games and other graphics-powered apps straight from the browser.

Introduction to Three.js

Discover the fundamentals of Three.js and learn how to create stunning 3D graphics for the web. We'll cover the basics of setting up a scene, adding objects, and rendering them efficiently.

Join a Community of 5,000+ Students

Be a part of a thriving learning environment with thousands of fellow students.

Globe
Book Open
Detailed Lessons & Guides

Maximize Your Investment in Your Future

Gain lifetime access to this content

cashcashcashcashcash

Access to Exclusive Discord Community

Join our exclusive Discord server for support and networking

Globe

course content

Value-Packed Learning Experience

Learn the essential technologies with a hands-on approach. You'll get practical knowledge, clear explanations, and the tools you need to understand and apply new skills effectively

Whether you're a beginner or looking to sharpen your skills, this journey will equip you with the knowledge and confidence to make the most out of this field.

    Three.js in Action

    Three.js in Action

    Create stunning 3D visuals and interactive experiences

    Frontend Development

    Frontend Development

    Develop effective client-side web apps.

    Write Clean Code

    Write Clean Code

    Learn best practices to write readable code.

Enough, I'm sold. Take me to the pricing section

Course curriculum

Vanilla Three.js Course: Master 3D Web Graphics

Unleash your creativity with JSMastery.pro’s Vanilla Three.js Course, designed for beginners and developers eager to build stunning 3D web experiences. This practice-based, 8-hour program teaches you to create interactive 3D graphics using Three.js, a powerful JavaScript library, without relying on frameworks. You’ll explore core concepts like scenes, cameras, meshes, lighting, and animations. The course emphasizes practical learning through real-world projects, including building a fully interactive 3D web application. You’ll master vanilla JavaScript techniques to manipulate 3D objects, optimize performance, and integrate Three.js into modern web projects. A basic understanding of JavaScript and HTML is recommended but not mandatory. You get lifetime access to updated resources, a Discord learner community, and a certificate of completion. The course is ideal for web developers, game designers, or creative coders. The Vanilla Three.js Course equips you with cutting-edge skills for 2025’s dynamic tech landscape. Enroll today to transform your web development portfolio with immersive 3D visuals and captivate users with next-level interactivity!

top-index

01

curriculum

Getting started

Kickstart your learning journey by meeting your instructor, setting up your environment, and accessing our private Discord community to maximize your course experience.

01

Meet Adrian, Your Instructor

Free Lecture

02

Get the Most Out of This Course

Free Lecture

03

Access to a Private 24/7 Community

Free Lecture

04

Environment Setup

Free Lecture
top-index

02

curriculum

Introduction to 3D and Three.js

In this beginner's guide, we'll delve into the basics of 3D and introduce you to Three.js, a popular JavaScript library that makes 3D web development.

01

What is Three.js and Why Use It?

02

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

03

Basic Three.js Structure

04

Cameras

05

OrbitControls

top-index

03

curriculum

Transformations

Transformations are what allow us to move objects, resize them, and spin them in space.

01

Transformations

02

Position

03

Rotation

04

Scale.

top-index

04

curriculum

Meshes and Geometries

The basic structure that defines the shape of your 3D object

01

An Introduction to Meshes

02

Geometries

03

BoxGeometry

04

SphereGeometry

05

TorusGeometry

06

PlaneGeometry

07

Custom Geometry

top-index

05

curriculum

GUI (Graphical User Interface)

An interface that allows you to adjust values and settings in real time, instead of manually changing them in your code

01

GUI (Graphical User Interface)

02

lil-gui library

03

Range (Slider)

04

Color Picker

05

Checkbox Controls

06

Folders

07

Dropdown (Select)

top-index

06

curriculum

Lights

Light is what makes your scene look real. It helps you see shapes, colors, and details. In Three.js, you can add different types of lights, just like in real life.

01

Introduction to Lights

02

AmbientLight

03

DirectionalLight

04

PointLight

05

SpotLight

06

RectAreaLight

07

HemisphereLight

08

Final Lesson of Light

top-index

07

curriculum

Materials

Materials are like the “skin” of 3D objects—they define how an object looks, whether it’s shiny, rough, metallic, or even glowing.

01

Introduction to Materials

02

MeshBasicMaterial

03

MeshStandardMaterial

04

MeshPhysicalMaterial

05

MeshMatcapMaterial

06

MeshPhongMaterial

07

MeshToonMaterial

of

0

Hear from our students

  • Jeremy McCabe

    Jeremy McCabe

    verified

    Software developer

    The instructor puts a heavy focus on explaining the building block concepts so you understand why you are doing what you are doing. Then all of the coding afterwards just makes more sense. I've watched his free courses on youtube and his teaching style was a big reason I paid for the full course.
  • Shahnoor Mujawar

    Shahnoor Mujawar

    verified

    Software developer

    Yesterday, I was selected as a junior backend developer without having a degree. I just passed high school, and I want to thank you because I've learned many things in web development from you. I have deep respect for you because you are changing people's lives.
  • Alvin Kuishinbō

    Alvin Kuishinbō

    verified

    Software developer

    I’ve learned production-level skills that I didn’t gain from my work experience, such as streamlining the flow of functions and server actions. We didn’t do that in my previous company, which is why it was challenging for me to add new features and manage data rendering.
  • Samad Khan

    Samad Khan

    verified

    Software developer

    Congratulations to BEST YouTuber! I'm forever grateful to your brother for creating content that helped kickstart my career as a Full Stack Dev! 4 years of experience later, I'm still thankful for the impact your videos had on me! Sending love from India.
  • Zen Abhi

    Zen Abhi

    verified

    Software developer

    Congratulations, sir! A heartfelt salute to your hard work and dedication. Thank you for transforming the lives of millions of students like me, without asking for anything in return. Because of you, I've landed a job and taken a step closer to my dreams. I will never forget the invaluable knowledge and inspiration you've given me. You didn't just teach us code; you gave us hope and a future. I only hope that one day, I can repay this unpayable debt in some meaningful way. You've changed my life forever.
  • Anyars Yussif

    Anyars Yussif

    verified

    Software developer

    When I started with the JSM Pro course, understanding file based routing, dynamic routes, extraction of params, the creation of APIs and handlers have never been this easy. Thanks to Adrian Hajdin for making technical concepts so easy to understand. I am very proud to be part of the JSM family.
  • Gourav Kumar

    Gourav Kumar

    verified

    Software developer

    I just got a job as a Software Developer because of you. Thnx for amazing videos, helped me a lot to gain much skills.
  • Musawir Raji

    Musawir Raji

    verified

    Software developer

    Adrian should be awarded best tutor of the year, the way he explain every bit of all topic is this course is so great, that it gives me better understanding of nextjs, and getting to truly understand the backend architecture is a plus for me, it used to be one of the most confusing topic since i started web development, now i have confidence to approach any Nextjs project given to me.
  • Community Member

    Community Member

    verified

    Software developer

    Hi Adrian, i hope this comment finds you well. I finally landed on my first job as a fresh grad. Your videos genuinely helps a LOT dude especially in the interview part. I learned a lot from you. Cheers homie!
View more testimonials

Instructor details

Meet Your Instructor Adrian Hajdin

JSMastery Logo

JavaScript Mastery

Be a part of a thriving learning environment with thousands of fellow students.

990k

250k

185k

Loved by 1,190,000+ developers

achievement

3x Github Star

Out of 150 million developers, only 70 have earned direct recognition from GitHub for elite expertise and influence.

achievement

Speaker at GitNation

Recognized as a trusted educator in the tech community, holding talks and sharing insights.

Testimonial

Jeremy McCabe

Software developer

The instructor puts a heavy focus on explaining the building block concepts so you understand why you are doing what you are doing. Then all of the coding afterwards just makes more sense. I've watched his free courses on youtube and his teaching style was a big reason I paid for the full course.

Testimonial

Alvin Kuishinbō

Software developer

I've learned production-level skills that I didn't gain from my work experience, such as streamlining the flow of functions and server actions. We didn't do tha

Testimonial

Samad Khan

Software developer

Congratulations to BEST YouTuber! I'm forever grateful to your brother for creating content that helped kickstart my career as a Full Stack Dev! 4 years of experience later, I'm still thankful for the impact your videos had on me! Sending love from India.

Testimonial

Zen Abhi

Software developer

Congratulations, sir! A heartfelt salute to your hard work and dedication. Thank you for transforming the lives of millions of students like me, without asking for anything in return. Because of you, I've landed a job and taken a step closer to my dreams. I will never forget the invaluable knowledge and inspiration you've given me. You didn't just teach us code; you gave us hope and a future. I only hope that one day, I can repay this unpayable debt in some meaningful way. You've changed my life forever.

Testimonial

Anyars Yussif

Software developer

When I started with the JSM Pro course, understanding file based routing, dynamic routes, extraction of params, the creation of APIs and handlers have never been this easy. Thanks to Adrian Hajdin for making technical concepts so easy to understand. I am very proud to be part of the JSM family.

Testimonial

Gourav Kumar

Software developer

I just got a job as a Software Developer because of you. Thnx for amazing videos, helped me a lot to gain much skills.

Testimonial

Musawir Raji

Software developer

Adrian should be awarded best tutor of the year, the way he explain every bit of all topic is this course is so great, that it gives me better understanding of nextjs, and getting to truly understand the backend architecture is a plus for me, it used to be one of the most confusing topic since i started web development, now i have confidence to approach any Nextjs project given to me.

Testimonial

Community Member

Software developer

Hi Adrian, i hope this comment finds you well. I finally landed on my first job as a fresh grad. Your videos genuinely helps a LOT dude especially in the interview part. I learned a lot from you. Cheers homie!

Testimonial

Jeremy McCabe

Software developer

The instructor puts a heavy focus on explaining the building block concepts so you understand why you are doing what you are doing. Then all of the coding afterwards just makes more sense. I've watched his free courses on youtube and his teaching style was a big reason I paid for the full course.

Testimonial

Alvin Kuishinbō

Software developer

I've learned production-level skills that I didn't gain from my work experience, such as streamlining the flow of functions and server actions. We didn't do tha

Testimonial

Samad Khan

Software developer

Congratulations to BEST YouTuber! I'm forever grateful to your brother for creating content that helped kickstart my career as a Full Stack Dev! 4 years of experience later, I'm still thankful for the impact your videos had on me! Sending love from India.

Testimonial

Zen Abhi

Software developer

Congratulations, sir! A heartfelt salute to your hard work and dedication. Thank you for transforming the lives of millions of students like me, without asking for anything in return. Because of you, I've landed a job and taken a step closer to my dreams. I will never forget the invaluable knowledge and inspiration you've given me. You didn't just teach us code; you gave us hope and a future. I only hope that one day, I can repay this unpayable debt in some meaningful way. You've changed my life forever.

Testimonial

Anyars Yussif

Software developer

When I started with the JSM Pro course, understanding file based routing, dynamic routes, extraction of params, the creation of APIs and handlers have never been this easy. Thanks to Adrian Hajdin for making technical concepts so easy to understand. I am very proud to be part of the JSM family.

Testimonial

Gourav Kumar

Software developer

I just got a job as a Software Developer because of you. Thnx for amazing videos, helped me a lot to gain much skills.

Testimonial

Musawir Raji

Software developer

Adrian should be awarded best tutor of the year, the way he explain every bit of all topic is this course is so great, that it gives me better understanding of nextjs, and getting to truly understand the backend architecture is a plus for me, it used to be one of the most confusing topic since i started web development, now i have confidence to approach any Nextjs project given to me.

Testimonial

Community Member

Software developer

Hi Adrian, i hope this comment finds you well. I finally landed on my first job as a fresh grad. Your videos genuinely helps a LOT dude especially in the interview part. I learned a lot from you. Cheers homie!

Hassle-Free Subscription

Purchase with confidence

  • No Strings Attached

    No Strings Attached

    Cancel at any time, hassle-free. Well keep you informed with timely email reminders leading up to your next renewal.

    Applicable only for recurring subscription

  • Risk-Free Purchase

    Risk-Free Purchase

    Didn't like what you got? Get a refund within the first 7 days of purchase. No questions asked.

    Applicable only for recurring subscription

  • Price Lock Guarantee

    Price Lock Guarantee

    Your renewal will always happen at the same price you purchased at, even when we increase price in future.

    Applicable only for recurring subscription

Find Answers to Common Queries

Frequently Asked Questions

Your path to clarity and understanding