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

== [ Resources ] ==

== [ Timestamps ] ==
00:00 Intro
02:00 Vite + React + Tailwind CSS
06:04 Add Box Geometry to Scene
06:41 Orbit Controls + Stats
07:25 Refactor Code into Class
08:17 Github Repository
08:37 Outro

== [ Tags ] ==
#suboptimal #metaverse #threejs

[jlau]

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

[selmabenkaza]

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

[ayanverma]

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

[katiekirby]

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

[bekalutilahun]

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

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

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

[saypapi]

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

[mroberts]

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.

[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.

[shraddhasingh]

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

[hughliu]

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?

[abzynt]

linda papi, esto es justo lo que necesitaba

[tinabremer]

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?

[jack_wyus]

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

[RaviSingh-dsei]

which zsh theme plugin you are using for your terminal?

[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 ?

[bekalutilahun]

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?

[eduardoalejandre]

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

[foo_tube]

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

[nicolaslupu]

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