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

In this tutorial I teach you how to build a 3D model viewer using three.js obj loader and mtlloader libraries.
Written tutorial:
www.learnthree...
View it on Github:
github.com/lea...

[@hamzaakhtar959]

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.

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

[@vincent-paolocorputty4060]

Just type npm install in your terminal

[@sivakumarthuvarahan5617]

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

[@babali840]

I had the same prolblem and i have resolved it by creating a local serveur to upload my html and obj files like below threejs.org/docs/#manual/en/introduction/How-to-run-things-locally

[@fabisierra7655]

@@babali840 hi! do you know if is something like that for upload to Django?

[@Kloud9Creative]

Any reason why I'm getting "Uncaught TypeError: THREE.OrbitControls is not a constructor" ?Is there a finished branch in the repo? finished just shows the animating green cube, and the tutorial here just throws errors: www.learnthreejs.com/load-3d-model-using-three-js-obj-loader/

[@thiagosalesdev]

Thanks!!!

[@mineturtle1841]

Very helpful thanks

[@JoshBowman1]

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.

[@nguyenduc6288]

you should check the modules see if they were all imported

[@ravivora757]

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

[@one_way_tech]

i like it

[@professionalservices1094]

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.

[@one_way_tech]

alu kuat alu hebat

[@eljefe400]

these are awesome tutorials. Thanks

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

[@learnthreejs2184]

Hey Mohammed, Assign the object to a variable, then create an event listener on your arrow key to bump the position X amount of units. Here's something to get you started: 1. Create the global variable, so make sure it is outside of any function. Even the very top if fine. var 3dModel; 2. Assign the object to the variable once it finished loading, this is inside of your objLoader callback function 3dModel = object; 3. Create the event listener with a function to do what you'd like. function move3DObject() { // 38 is the number assigned to your forward arrow key if (38 === e.which) { 3dModel.position.z += 5; } } document.addEventListener('keyup', 'move3DObject'); *** I didn't get a chance to test this, but it should do the trick. Cheers!

[@ems_]

Hey, Thank you for the reply. I really appreciate it. Yes. It is working. I came across this method before I read your reply. Here is a thing that I am not sure of (and probably would make a great video tutorial). Whenever I try to console.log(3dModel) anywhere in the code it is undefined. unless I use a setTimeout function for few seconds than it is returned what I expect. I am (in a way or another) new to Javascript, I don't get the idea of synchronous interpreting. If you have time, making a great video tutorial would be so great. Keep up the good work.👏 looking forward to the next video. You can consider me a #1 fan 👍🏻 cheers, M.

[@mikelemon5109]

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?

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

[@Meltdown_Gaming]

2:43

[@serhiip5206]

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

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

[@Dan2000kr]

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

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

[@MrAer85]

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.

[@ritikkatkam2845]

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

[@anaymittal7720]

2:42 is where the video actually starts :)

[@ravivora757]

thanks man.

[@deanrezaei5107]

awesome video. Thanks

[@marc9169]

I can't make it work, the console says: Failed to load resource: the server responded with a status of 404 (Not Found). Anyone can help me pls?

[@nguyenduc6288]

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

[@subhashchandra2107]

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

[@nishagharpure5342]

I have a human obj file and I want to change its waist, bust, etc according to form input. What should I do?

[@lliammcbean6819]

This is low key a big ask. Ideally I would say load different models for preset sizes. Geometry and vertices are manilpulatable within the vertex shader of the object but I have never heard of applying a custom shader to a model.

[@ivanenzhaev2373]

Maybe has someone a link on simple example how to load an object from OBJ using Three.js and TypeScript?

[@lliammcbean6819]

No. This is as simple as it gets.

[@mariocabrera6766]

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

[@artyombelluyan8605]

Hello my freand. Thanks for the video tutorial. Sorry for my bad english, i have a querstion. How make a buttons "cam 1" "cam 2" "cam3" & click to button change camera positon froм object?.The buttons are responsible for the camera position.

[@sirlock1945]

Yes you can.

[@michelecattellani2157]

Man we need more of this. Thank you a lot

[@dgpham3909]

I pulled the code from github and run the server. But it doesn't render the object like in the video. The object look black and i hardly see anything

[@RigvedDeshpandeArt]

Does your scene have a light? Try creating a point light and adding it to your scene. var light = new THREE.PointLight( 0xff0000, 1, 100 ); light.position.set( 50, 50, 50 ); scene.add(light); Hope this helps!

[@moeminkhant2995]

download the github file and run it. but nothing comeup any idea whyy?

[@moeminkhant2995]

or this only work with server?

[@fabisierra7655]

@@moeminkhant2995 a little late, but, yes, only run with server :)

[@mayankkumargiri4312]

Thanks a lot. Nice tutorial.

[@ministryofhumor]

How to apply a cubemap/reflections of skybox on the object?

[@chasercode1349]

var textureSkyCube=new THREE.CubeTextureLoader().setPath("images/sky/").load(["lf.jpg","rt.jpg","up.jpg","dn.jpg","ft.jpg","bk.jpg"]); and add material var mat=new THREE.MeshPhongMaterial({ color:0x00253C, shininess:80, envMap:textureSkyCube, reflectivity:0.8, combine:THREE.MixOperation, });

[@葛袁军]

One question: how to import OBJLoader as a es6 module?

[@DesignByAdrian]

This is currently a mess and you need to do some web pack magic: github.com/mrdoob/three.js/issues/9562#issuecomment-394542093

[@babali840]

Do not forget to create a server, il will allows javascript to read local files ;) threejs.org/docs/#manual/en/introduction/How-to-run-things-locally

[@abdulbasitikram871]

Great tutoral sir. i have question for you sir. how can i access or get layers of .obj file in three js?? means how can i change the color of .obj file in three js please sir answer

[@MuffinMan0521]

You can use the chrome console inspector to see what's available to you and change properties to see what they do. The object loader will give you a THREE.Group, from there you can enumerate the children and then use material.color.setHex(0xFFF) syntax to set a color of a particular child.

[@abdulbasitikram871]

MuffinMan0521 Very Thank u brother, actually i want to get data of .obj materials in three.JS . i am working on a project that design 3d custom product. so i want to access materials layers which i build in 3d max design. if customer want to edit design of any part of shirt etc.. i just want to get or fetch data. Like... dyo.blksport.com/ Please do some help

[@abdulbasitikram871]

Also I cant's find Three.Group There in my console?

[@MuffinMan0521]

I suggest asking on stackoverflow. I'm not sure.

[@abdulbasitikram871]

MuffinMan0521 Thanks for helping bro

[@6B26asyGKDo]

every tutorial I watch about this is completely useless, and their stupid github files DO NOT WORK

[@zanepokemaster]

I'm ion the same boat, what's going on?