Chris Courses Logo
Out now

Become a Three.js pro with the ultimate Three.js course bundle

Out now

Become a Three.js pro with the ultimate Three.js course bundle

Ever wonder how 3d sites are built? Look no further. Learn everything you need to build out full-fledged 3d sites on the web with Three.js.

Introducing

The Beginner and Intermediate
Three.js Bundle

By purchasing the Beginner & Intermediate Three.js bundle, you'll get lifetime access to over 23 lessons with 9 hours worth of video content, along with any future updates.

Lessons
23
Hours of Video
9
Source Code Branches
20
Candid Shot

Hi! I'm Christopher Lis, an Awwward winning, full-stack web developer who has worked professionally for clients such as Ford, Harvard University, and the American Advertising Federation, for over eight years.

When I first started Three.js development back in 2016, resources were scarce—your best bet for learning how to code 3D websites was to follow the limited docs posted on Three.js' website.

Back then, I struggled greatly to do what should be simple things, such as animate geometry, or interact with meshes using mouse move and click event listeners, however, through five years of practice, I've honed my skills, reaching the point where these difficult tasks are really quite simple.

Today, I figured, it's 2021, there have to be some great Three.js tutorials out there on the web... things should definitely be easier than they were in 2016, right?

Well after scanning some of the top listed Three.js videos on YouTube, I was amazed that this just wasn't the case. The tutorials, although popular, were extremely rudimentary, hand-holding you through the "Getting Started" examples in the Three.js docs. I figured, I could do better, as there's so much more that really goes into creating a wonderful, 3D website that reacts well across various screen sizes. Thus, the idea for these two courses was born.

These courses cover everything I've learned throughout my five years of Three.js development. Rather than having you struggle to find the right resources and put all of the pieces together correctly (like I had to do), I've compiled everything into a few hours worth of concise, straight to the point videos, that'll get you started with all of the basics required to program your very own 3D website.

What you'll build

Together we will build a geometric, interactive, 3D homepage used to greet your users, and entice them to explore more of your site. On button click, you'll be able to seamlessly transition to the next page using custom Three.js animations and Nuxt.js.

View Project Demo

Covered Concepts

This bundle is for developers who know their way around JavaScript, at least a little bit. No prior experience in 3D development or modeling is required. By the end of these courses, you'll come out with a solid understanding of each of these following Three.js topics:

  • Vite Setup
  • Three.js installation
  • Geometries and materials
  • Mesh creation
  • Buffer attributes
  • Raycasters
  • 3D interactivity
  • Point clouds and particles
  • Camera movement
  • Renderer resizing
  • Seamless page transitions
  • Nuxt.js integration
  • Custom vertex and fragment shaders
  • Attributes, varyings, and uniforms
  • Bulk data imports
  • Mesh animation
  • Click and drag functionality
  • Mobile responsiveness

Included Lessons

On purchase, you'll receive 23 in-depth lessons (20 videos, 1 quiz, and 2 code challenges) on how to create premium Three.js websites totaling 9 hours long. You'll also receive any completed code files and assets, so you can see exactly how these sites were made.

Beginner Three.js

11 Lessons — 4h 56m
01 Three JS Crash Course
2h 35m
02 Creating a Starfield
9m
03 Text Animation on Load
10m
04 Animate Camera Movement
10m
05 Browser Resizing
9m
06 Change URL On Animation Completion
4m
07 Refactor Into Single Page App
29m
08 Nuxt Google Fonts
13m
09 Nuxt Routing Integration
9m
10 Seamless Page Transitions
34m
11 Deploy Nuxt with Netlify
8m

Intermediate Three.js

23 Lessons — 4h 19m
01 Add Blue Shade to Earth Texture
8m
02 Add HTML & CSS
18m
03 Add Background Stars
6m
04 Add Mouse Movement Interaction
6m
05 Add Atmosphere
8m
06 Add Texture to Fragment Shader
11m
07 Modify Vertex Shader for Use With Three JS
7m
08 Create a Vertex Shader
10m
09 Sharpen Rendering
2m
10 Map Texture Onto Sphere
2m
11 Create a Sphere
5m
12 Introduction
1m
13 Create A Fragment Shader
3m
14 Place Points with Latitude and Longitude
23m
15 Maintain Canvas Size on Refresh
4m
16 Always Show Globe on Refresh
2m
17 Replace Points with Rectangular Prisms
9m
18 Animate Prisms with GSAP
9m
19 Create Data Labels on Mouse-Over
44m
20 Insert Bulk Country Data
18m
21 Click and Drag Functionality
22m
22 3D Scene Responsiveness
17m
23 Mobile Event Listeners
13m

Simple no-tricks pricing

If you're not satisfied, contact me within the first 14 days and I'll send you a full refund

Beginner Three.js

$ 29
  • Lifetime access to Beginner Three.js

  • 10 lessons for a total of 4hrs 47min of watch time

  • Access GitHub source code

  • 14 day money back guarantee

Most popular

The Complete Bundle

$ 60
$ 49
  • Lifetime access to Beginner and Intermediate Three.js

  • Save 16.5% compared to buying separately

  • Access premium code snippets

  • Access GitHub source code

  • 14 day money back guarantee

Intermediate Three.js

$ 29
  • Lifetime access to Intermediate Three.js

  • 13 lessons for a total of 4hrs 6min of watch time

  • Access GitHub source code

  • 14 day money back guarantee

Or subscribe and get 347 additional lessons

“I really enjoy your teaching style, your obvious JEDI talents and the depth of information. You go into detail, quite in depth, in a rapid amount of time, giving the max amount of information in an allocated amount of time. Placing data upon the vertices would be taking this, which is already to an extreme, to new levels, where even Jim and Spock would salute your pixel, binary manipulated boldness! You are now one of two of my favorites. The Mad Scientist (he is not mad) Frank and now you!”

John Adrian
Commenter, YouTube

“Man I have to say this tutorial is awesome! Best one I have seen so far. You are very good at explaining everything. Thank you!”

M Ritz
Commenter, YouTube

Frequently asked questions

Is this a subscription based purchase?

No, this is meant to be a one-time purchase for the Beginner and Intermediate Three.js courses. If you'd like a subscription option, click the "subscribe" text underneath "The Compete Bundle" pricing card above.

Are credit card payments secure here?

Yes! All credit card payments are managed directly through Stripe, an online payment processor considered "the standard" when it comes to accepting online payments. Your credit card never actually touches any part of the chriscourses.com server—it is encrypted and managed directly by Stripe which has strict protocols in place to ensure your card is always secure.

How long is this course?

At the time of this posting, the beginner and intermediate Three.js courses are a total of 9 hours long

I already have a chriscourses.com subscription, will I be able to access this course's contents?

Yes! If you are currently subscribed as a chriscourses.com premium member, you will be able to access this course without any additional purchase. You can do so by signing into your account and visiting the courses page.

What exactly do I get after purchase?

After purchase, you'll get direct and unlimited access to both the beginner and intermediate Three.js courses. The courses will be associated with your chriscourses.com account which you can use to view or download the videos at any time.

Where can I use the code from this course?

You can use this code anywhere you'd like—a portfolio, personal website, or client website. Once you buy this course, you instantly gain the ability to use this code without crediting me at all.

What if I'm not satisfied?

Send me a message using the chriscourses.com contact form and I'll immediately refund you 100% of your purchase. I've been burned too many times by companies who refuse to offer a refund because "I've already used their product," even though I wasn't satisfied with it. I think that's deceptive, poor practice, and I vowed to never do the same to others as a business owner.

Have a question not answered here?

If you have a question that wasn't answered here on this FAQ, feel free to contact me directly and I'll get back to you as soon as possible.