Premium Features

Download Video

Three JS Crash Course

Want to learn more about this course before buying? Check out its detailed landing page here: https://chriscourses.com/threejs-bundle

Practical Three.js development is rarely taught these days, but let's see if we can fix that—this course aims to demystify the process of developing an interactive 3D environment in the browser.

Here you'll learn everything you need in order to get up and running with your own Three.js themed website. You'll learn how to set up a development environment with Vite, how to create geometries, materials, and meshes, how to alter geometries dynamically, and how to integrate a slider interface to edit your meshes real time.

Later in the course, you'll learn how to take things to the next level by adding a star-field, animating your text and camera movement, and finally, you'll refactor your piece into a seamless single page app using Nuxt.js.

🔗 Links

Comments

Want to participate?

Create a free Chris Courses account to begin

Login
budski82 posted 2 years ago

all I get is a flickering line not a box object anyone else have an issue. Tried 3 times and copy & pasted his code into the editor and got the same thing ...any help

0
m
mew99 posted 3 years ago

Great delivery from Chris, my instructor. Might you recommend plugins from your SublimeText for effective workflow? Thank you so much!!!

0
T
Tanner posted 3 years ago

For everyone looking to follow this tutorial as of January 2023, about 2 years after this video was dropped there are a few deprecated features used in this. I had to do lots of documentation reading to make the necessary changes in order for the effect to still work.

The first being the flatShading property holds a boolean value, defaulted to false. I looked everywhere and the THREE.FlatShading property he used does not exist. Even upon cloning his code it still did not work until I changed it to 'flatShading: true'.

2
kindahytz posted 3 years ago

Hi Chris,

I'm sorry if i sound annoying with saying this but you where pronouncing vite wrong the whole time. This is how you pronounce it https://youtu.be/ZGTZFbsJems. Other than that thanks for the video.

0
e
elodiehg posted 4 years ago

Hello,

When I try to install dat.gui I got this error : Uncaught TypeError: Failed to resolve module specifier "dat.gui". Relative references must start with either "/", "./", or "../".

I don't know how to resolve that, can you help me please ? :/

0
A
A1010 posted 4 years ago

I'll use live server instead of vete

0
h
harp34 posted 4 years ago

Questions about messing around with z vertices:

for (let i = 0; i < planeGeoArray.length; i+=3) { const x = planeGeoArray[i]; const y = planeGeoArray[i + 1]; const z = planeGeoArray[i + 2]; console.log(`${i} + ${i + 2} z is: ${z}`)

// whats happening here?

planeGeoArray[i + 2] = z + Math.random(); }

so we are getting each i + 2 which makes it always y and gives us 2.5 no? So how is this changing the z value everywhere?

Please explain whats happening here.

0
chris posted 4 years ago

So remember, indices always start at 0, so by accessing the first element with: const x = planeGeoArray[i];, we are getting the x value within the array. These arrays are laid out where the first element is x, the second is y, and the third is z. So if we were to get the next element within the array, we'd add 1 onto i which would give us the second element within the array. Finally, by adding 2 onto i, we'd effectively get the third element in the array.

The array would looks something like this:

const planeGeoArray = [x, y, z]

So you can see how using i for your index can give you x, y, and z.

With this line:

planeGeoArray[i + 2] = z + Math.random();  }

we're selecting the z location for that one specific point, then altering it by its current location by a random value we generate. z is different for each point we loop through, so for each iteration, we call Math.random() and generate a new value to add on.

Hope that makes sense, can explain more if needed.

0
h
harp34 posted 4 years ago

Thanks.

so:

for (let i = 0; i < planeGeoArray.length; i+=3) {

console.log(i)

}

so this gives me: 0, 3, 6, 9, and etc.

to get to z points in the array we need to add 2 and will give us as follows: 2, 5, 8, 11, and etc. These points hold the value of z.

Now we want to give new values to the z vertices as right now all points in the array for z = 0. We change z vertices as follows:

Getting the point in the array: 2, 5 and etc. which are z vertex
const z = planeGeoArray[i + 2]; // 2, 5, 8, and etc.

Taking our vertex of z we desire and then add a new z value
with Math.random. Ex: 5 = 5 + Math.random();
planeGeoArray[i + 2] = z + Math.random();

Am I on the right track? lol

0
h
harp34 posted 4 years ago

Please let me know Chris.

0
chris posted 4 years ago

Yes, exactly, definitely on the right track.

planeGeoArray[i + 2] = z + Math.random();

This statement right here says: take the current z-position, the add on a randomly generated number 0-1 onto it. You could also randomize the z-position in the opposite direction by using Math.random() to obtain a negative value along with a positive one like so:

planeGeoArray[i + 2] = z + (Math.random() - 0.5);

This'll give you any number -0.5 to 0.5, thus allowing z to be affected in both directions.

1
h
harp34 posted 4 years ago

thanks.

I did it this way, does this seem okay?

for (let index = 2; index < array.length; index+=3) {

  // Get z values
  const z = array[index];

  // place new z values into z vertices
  array[index] = z + Math.random();

}

Also, const z = array[index] this gives me '0' does it also give me the position in the array or just the value?

0
a
atrimn posted 4 years ago

Bought the bundle thinking that I'd have access to the github repo or code to be able to cross reference since it's pretty much needed due to the size of your code editor breaking off every line and Making it a headache to actually compare code but it says I need a premium account. So Buying the courses itself doesn't give you repo access? :/

0
chris posted 4 years ago

Hi atrimn, believe we may have talked over email, but go ahead and give the page a refresh and try again. You should have full course access with all associated Git repos as soon as you've purchased.

Just shoot me an email at chris@chriscourses.com if there are ever any issues 🙌

0
f
flight505 posted 3 years ago

Hi Chris, I am also missing access to the repo. I have purchased the bundle under user flight505

Thanks

0
chris posted 3 years ago

Hi flight505, can you try clicking on the purple "Video Source Code" button beneath the video when logged in? You should be redirected to the repo from there, but let me know if it's still giving you any issues.

0

Providing the lift to launch your development career

© 2026 Chris Courses. All rights reserved.