Load a 3D Model Using the Three.js OBJ Loader

Written tutorial:

View it on Github:

[professionalservices]

Thank god man, you didnt waste even one extra second mixing a tutorial with a class. I just needed to get up and running and this was what I needed. Fantastic.

[hamzaakhtar]

Been struggling for 5 hours and just by watching this video was able to fix it. Respect! Would also love to see one in React as well.

[MrAer]

You are my hero. Not messing with npm for now (maybe later). I am just trying to get some code running on an xamp. This has got me back on track.

[Dankr]

Dude, you are awesome! I get really fascinating when I see people like you, that use time for making such content!

[michelecattellani]

Man we need more of this. Thank you a lot

[davidpicarazzi]

Would you be able to explain the npm install part? I've never done this step before. How come I can't just double click the index.html file and see it that way?

[ravivora]

have you any idea about.. changing materials and textures in real time using three.js

[mariocabrera]

Thank you bro, I'll have extra points for this

[sivakumarthuvarahan]

Thank you for your tutorials, able to load r2-d2 model, but unable to load other models. Any reason?
Thanks

[mikelemon]

Hey nice tut I'm trying to run it in 2023 but after doing the npm install and just double clicking the index.html file in the examples folder of the obj viewer demo doesn't work and the written tutorial web is 404, any chance for a quick explanation of how to run it?

[ems_]

Maaaan! This is a great tutorial👍.
I have a question:
How would I be able to move the object?
I would add an event handler. When forward arrow is pressed, object.position.z += 5;
How to reach the object from outside of the callback function?

Keep up the good work buddy 👍

[LeoniVoltz]

What do you mean by "install the dependencies and start the server" in min 1:28. Do I need a server to view the 3D object? I am struggeling now since one day with that, becuase I am quite new to coding and did never had to install a server or sth like that. When I open it, I get a blank page and I have read that I somehow need a server. what would be the easiest way to get that fixed? I just want to view a 3D object :(

[priyankahegde]

Thank you for this great tutorial. I tried the code you shared to render r2-d2.obj and i get a blank canvas when i refresh the browser page. Is there something missing in the video when i try it with the latest branch ?

[JoshBowman]

I've downloaded your Github repository and have everything loading the correct way, but I always get MTLLoader is not a constructor error whenever I try to load texture. If I comment out the texture code the R2D2 model loads and i can see it without texture.

[serhiip]

Fetch API cannot load
URL scheme "file" is not supported.

[nguyenduc]

what type of object is the model when it's imported? is it possible to get the mesh and the material objects of the model? I imported the model but was unable to get its mesh or anything from it to do further calculation

[ritikkatkam]

Sir ... i downloaded the code from your github
it works but this is not working if I add other 3D obj files in assets folder
can you please tell me whats wrong

[uixmat]

Great tutorial but my model gives the following error in console:
[.WebGL=0x7fc0e80ab600]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1

[顏毅-of]

Hi, Thank you for your video.I try to load my own .obj file but it showed me the error message like below:
Very grateful.

[subhashchandra]

Hey, from where you downloaded this obj and mtl files?