Premium Features
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
Great delivery from Chris, my instructor. Might you recommend plugins from your SublimeText for effective workflow? Thank you so much!!!
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'.
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.
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 ? :/
I'll use live server instead of vete
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.
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? :/
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