Three.js Setup Guide Tutorial | Getting Started with React + Three.js

[@jlau04]

Thanks for this video! Made three.js look so simple compared to those unnecessarily long 45 minute videos lol

[@katiekirby4690]

I didn't get the option for base, it's trying to make me choose typescript or javascript

[@ayanverma2721]

I’ve been searching to make this cube to make other models you made. Thanks for the guide

[@SuboptimalEng]

Glad it helped!

[@selmabenkaza]

Amazing video! Used it to do my first threejs rendering ever :)

[@SuboptimalEng]

Thanks Selma!

[@АндрійПодиряко]

Yo man I did it all step by step, but i have a white screen and no render then (((

[@shraddhasingh1967]

When I used this same code and same process , I am getting white Screen . and same process . Can you help me with this ?

[@SSSamael]

Had the same problem until I noticed that I wrote "sceme" on line 34 lol

[@hughliu7427]

Thanks for the video but I am a bit lost after "Vite + React + Tailwind CSS" and the start of "Three.js Setup Guide". I am having my "Hello World" open, and there is nothing happening when I input "npm install three." Is it because I am now in the Vite environment? Where should I input "npm install three" plesae?

[@eduardoalejandre7958]

i get the vite + react screen but not the cube even with the code from github

[@bekalutilahun9398]

Great video...Clean and straight to the point.

[@SuboptimalEng]

Thanks, Bekalu!

[@RaviSingh-ds2ei]

which zsh theme plugin you are using for your terminal?

[@SuboptimalEng]

I customized the default plugin. You can see it on my GitHub under the dotfiles repository.

[@od1367]

Why not use react 3 fiber?

[@SuboptimalEng]

I decided to use JavaScript because most engineers can read and transform this code into other frameworks like Vue or Angular. Choosing react three fiber can deter folks (coming from other frontend frameworks) from watching this series and learning Three JS.

[@tinabremer9544]

I have a cad model that I want to load with three.js and interact with it. The model is a machine that can perform individual movements. Rotations around joints etc. How can I implement this? How can I import the tree structure of the model in which its geometry is defined? Can I load the model as a whole and then access its individual components with three.js and then execute the desired movements with these? Or does the model first have to be rendered in Blender or something?

[@SuboptimalEng]

I made another video on how to import a model in Three JS. You can run animations on the models you import as well, but I don’t have a tutorial on that yet.

[@bekalutilahun9398]

I was following along but i was using next.js ... and here is the problem.... I changed the 3d object to a component and when I load it in my index.js ..it shows up on my other pages too. What shall i do?

[@SuboptimalEng]

You may have to manually remove the canvas element after the component dismounts

[@bekalutilahun9398]

@@SuboptimalEng Thank you for replying...I fixed it by removing the document.append... line. I decreased the size of the object and made a few changes in the css of my home page ... that's when I was able to notice that every time I route to another page and useEffect executes it appends a new object to the document. removing that line and treating the three.js object as a component solves the issue. Another thing, for anyone who may find it useful....I was not able to use a state variable to make a change in the animation of the object, it said "too many re-renders"............ Don't use a state variable, instead, create a button or another form of input and capture it and its changes/value from within the three.js object class using document.getElementById() and event listeners.

[@waxxes_animation498]

This playlist gave me hope😂

[@SuboptimalEng]

Don't do that, don't give me hope...

[@ChawanratNurat]

I got warning after trying this tutorial which is "WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program" when I moved the cube. Is this normal or I just did something wrong ?

[@clickfoundry149]

did you end up figuring this out?

[@sele-nap]

Thank you so much for your videos😀

[@SuboptimalEng]

Thanks Selena 🙌

[@sele-nap]

@@SuboptimalEng Hey, I finished all your Three.js videos, they were really interesting and informative. Are you going to continue making more? 😄

[@SuboptimalEng]

@@sele-nap Yep! I'm currently working on making a playable Three.js game with physics, but after that is done, I want to make 2 Three.js tutorials per week. Right now, I make about 1 tutorial per week.

[@foo_tube]

box doesn't actually render after refactoring? oh well, I kinda get it

[@Tifidy]

Let me tell you why this content is golden over react three fiber is cuz r3f happens to conflict with material ui (Box) which is what I have and I dont want to go through workarounds to force my code look sort of ridicilious. So I am taking route of implementing three this way. Thank you.

[@SuboptimalEng]

Yea I wanted to minimize dependencies but still use React. Glad the tutorial was helpful!

[@srinivasnahak3473]

Thank you so much!

[@oddysy1880]

i wish you would show more code when you refactor. its hard to follow every change you made when you neglect to show 1/3 of the file

[@saypapi1292]

thank you for this beatiful guide, i liked the video and subscribed to the channel although that's something i rarely do!!

[@SuboptimalEng]

Thanks, I’m glad the video was helpful!

[@jack_wyus2013]

Ohh bro, this is amazing, thanks for your help 🙂

[@SuboptimalEng]

Glad the video helped Jack!

[@abzynt666]

linda papi, esto es justo lo que necesitaba

[@mroberts1]

Agree with @jackepner9984, this is way too fast to follow and the code in App.jsx in the video is completely different from the code in the corresponding tutorial on the GitHub repo.

[@nicolaslupu6306]

im very sorry but it says npm does not exist for me

[@rowan7366]

Bro pls post threejs + next js set up guide

[@bekalutilahun9398]

Add three.js as a dependency... Create a components folder and write the class just like he did except ... don't add the document.appendChile line. And don't use state variables to make changes to your object. use event listeners. You can import and use your three.js object in any of your pages.

[@techworld3043]

watch it later

[@jackepner9984]

You need to provide more narration of what's going on, and move and talk a more slowly. I have three years of coding, and needed to slow the video down just to follow anything. If you want to provide tutorials, you're not just recording yourself doing what you do, you're instructing, and need to pace it for others to follow. I'm getting so annoyed by the three minute mark, I'm about to just find a different tutorial for three.js. And I already slowed the video down.... Really, you need to slow down and focus on TEACHING if you want these videos to be helpful.

[@jackepner9984]

Also appears starter code is now quite different, and you don't even scroll back to the top after deleting, so ... I wanted to do this one, because the cube actually looks good, but this is insane. I need to find one that actually shows what's going on, and I don't have to slow to 0.5 speed just to see anything.

[@ArcAiN6]

you're like "ok, let teach you how to get this setup and installed...run this command" Except, you make no mention of what you're running this command in... what environment are you in, is that linux, and IDE of some sort...