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

In this intro to 3D coding video, we go over how to set up a Three.js project. We start off by creating a React app with Vite JS. Then we install the Three.js npm library and set up a basic scene. Afterward, we add a box geometry to the scene and also set up Three JS orbit controls. Finally, we refactor the code into a class for readability. Setting up Three.js can help you get started in building 3D experiences for the Metaverse.
📖 Code - github.com/SuboptimalEng/thre...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Three.js - threejs.org
Three.js Tutorials - sbcode.net/threejs
== [ Timestamps ] ==
00:00 Intro
00:36 Why use Vite.js + React?
02:00 Vite + React + Tailwind CSS
03:29 Three.js Setup Guide
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

[@jlau04]

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

[@bekalutilahun9398]

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

[@SuboptimalEng]

Thanks, Bekalu!

[@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!

[@jack_wyus2013]

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

[@SuboptimalEng]

Glad the video helped Jack!

[@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!

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

[@abzynt666]

linda papi, esto es justo lo que necesitaba

[@katiekirby4690]

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

[@waxxes_animation498]

This playlist gave me hope😂

[@SuboptimalEng]

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

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

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

[@user-rn9rg6df7y]

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

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

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

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

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

[@foo_tube]

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

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

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

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

[@techworld3043]

watch it later

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

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

[@user-iz1tt2vw6s]

@@jackepner9984 Also this dude is mixing up html components into three.js components between 4:20 till 4:33. Like whaa? Did you skip something?

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