Display your own 3D Model with Javascript | three.js
ฝัง
- เผยแพร่เมื่อ 7 พ.ย. 2020
- In this video I'll teach you how to use three.js to display any 3d model with Javascript! We use the GLTFLoader module to import a .gltf model.
three.js github link: github.com/mrdoob/three.js/
Info on same origin policy (live server requirement): en.wikipedia.org/wiki/Same_ori...
I will be making daily videos about programming on this channel, so subscribe for more great content! Don't be shy to comment too with any questions. - วิทยาศาสตร์และเทคโนโลยี
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 65 [ซับไทย]](http://i.ytimg.com/vi/4EsinscQCfs/mqdefault.jpg)
I have tried many videos, but I haven't got the output. But you are really great. You have explained each and every step. Now I got the output. Thank you very much, Mike.
Finally a clear and simple video about this topic, thanks man!! :)
You're doing an amazing job man, such a helpful video
Dude...AWESOME tutorial, thanks for the clarity.
Great! Helped me. Also, if you guys want to get rid of that errors in console at the end of the video, then place animate() call into loader.load() second parameter (on loaded function).
Thank you so much man, this is the best instruction about gltf!
Thank you Mike , very helpful tutorial !
I've tried not just one or two videos like this but you just break my curiosity as to why mine wasn't working. many thanks for putting this out here.
Thanks bro, this awesome, i look many videos and read many documentation, but dont understand, and when i look u video i understand all mechanics, thank u, u cool bro
I have been seeking this for hours. Thank u ,u made my day (qwq)
Very good video by the way sad that you got not that much subscribers, content 10+
Thanks a lot !!! I was struggling for 2 days with this shit ! God bless you
Thank you soooo much. Just one problem I faced was when importing GLTFLoader at 4:20 in the video. So I installed three.js using npm on the project directory and did not change the line 64 on GLTFLoader.js file. Then imported it using import {GLTFLoader} from "./three/examples/jsm/loaders/GLTFLoader.js"; instead of "./GLTFLoader.js" (5:00) and everything worked just fine!
Thanks so much! Loved your video
AHHHH Finally Something that works!!! , subscribed
Thanks bro very much appreciated 💪🏼
Mr. Cube is the real MVP here...
omfg thanks I had some issues with importing the modules
Good one ! Keep it up
Hey Mike,
Thanks for the tutorial, the error you thrown in the last minute of your video is not caused by the live server. It's loader.load() function is asynchronous
So basically the loader is still loading the scene.gltf and JS will continue to run the code below, however since the obj.rotation and scene.add(light) depends the loading, then you see all the errors on the console.
To solve this issue you need to do the following:
//let's load the scene.gltf file
//loader.load takes 2 parameters
//1) .gltf file
//2). a callback function
loader.load("scene.gltf", function (gltf) {
obj = gltf.scene;
scene.add(gltf.scene);
//after the scene is loaded
//we can add the background and light
//also run the animate function
scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 10);
scene.add(light);
camera.position.set(0, 10, 40);
animate();
});
basically, you set the backgound and the light inside this callback function and finally run the animate() function
The async javascript is tricky, check this article
developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous
I like this guy's honesty, he's not trying to read a statement from wikipedia presenting himself as mr. known it all(which most other uthubers do). When you don't know much about a topic then dont buII$hlt
Fantastic it works
Hey smith, you're such a great programmer. Can I ask a video from your tutorial here in youtube. A 3D model in sketchfab which you can navigate or can rotate by the mouse cursor like an orbit function in sketchup. Thank you. I'm your new subscriber
Thanks man its awesome
Amazing job, please dont stop, you help a lot. One question, do you know how to do this, if i click on the gltf model it will change color? please thanks
thank you sooooo much it final worked
thanks a lot!
Thanks man :D!
Wow it is awesome
its CORS kind sir, to resolve: 1.you can use an extension 2. dont load them from your pc, get them hosted somewhere and just link it up. 3. if you host that in flask for example, flask cors will take care of it for you
Great video! do you know if there is anyway that we could move the model, like up and down ?
Great vid.
Does this work with an OBJ file or would I need OBJ specific loader code?
Hello. Please make a video on how you would run this on Flask instead of Live server. Thank you
Please make more videos in Three.JS
thanks very useful, please make ur camera smaller next time so it doesn't block vsc
Can you do this, but with Angular, importing THREE and other dependencies using npm etc. That would be awesome, thanks.
Tysm
this was SO helpful thank you so much!!!
It works after following this video , but how can I setup the shadow to make it more like reality?
And one more. How can I navigate or can rotate by the mouse cursor like an orbit function on website.
thank you for the helpful video!
fucking chad, it finally worked
is it possible to use the camera from the [imported] file?
(instead of coding one as demonstrated here)
thanks!
Can you make a tutorial about displaying a large .obj file on web? The file is over 2.5 gb
me ajudou pkrl valeu 😀
I'm getting an error with my code. Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
even i am getting same error, have you resolved it ?
you fucking saved my ass! thank you so much. I was searching for days....
Hey Mike great video but I'm a little stuck on something and was wondering you could me out. I've downloaded the three.js zip folder from the three.js site but the code within GLTFLoader.js file is completely different from the one you have, am I getting the wrong files? I ended up grabbing your version from a previous comment but I'm just wondering why your file is different from the one off the site?
Me too. Wondering. You seem to need exactly that missing piece.
So does this work with the glb binary format also?
❤
Would we need to import the OrbitControls in the same manner?
Personally feel that I am in love with this wonderful man
Bro Get IN more Threejs Tuts ...
i would love to se0e
Can you help me out...how can I add color customizer into this??
Thanks for your video, but I got an error showed "The requested module './GLTFLoader.js' does not provide an export named 'GLTFloader'", could you please help me with that?
i fucking love you and your voice
brother i do the same but facing error i am new would you please help me:
Uncaught SyntaxError: Cannot use import statement outside a module
Can u make the extension content that makes options to change the color of the car?
I'm unfortunately taking a break from videos for school at the moment, but I'll remember this in the future! For now, try looking at the three.js documentation, or perhaps what you could do is change the model colors in whatever 3d modelling software you're using and then switch the models at a press of a button. That solution would work, but would perhaps be inefficient loading so many models, I'm sure there is a way to do it within three.js.
Good.
Can you help me to create a project use three.js ?
hi sir, thanks for the great work
I am new to Three.js, and I follow your steps, but it doesn't work with me.
my question is do I need NodeJs to use "import {filename} from" or it should be work fine by adding type="module",
or maybe its just the package version issue, I really need to know why it doesn't work even the background was white, but with no error on the console.
thanks in advance
same with me do you got any solution to this?
hey can u pls share the the github link for the project
hi looking to load ply files to just view?? any help??
Hey Mike, Firstly Thanks a lot for this full of information video. I think my fault but can you help me? I have this errors on my page. When I save the codes I dont see anything. I am clearly write the codes but not works.
three.module.js:49851 WARNING: Multiple instances of Three.js being imported.
3D.html:30 Uncaught TypeError: THREE.WebGlRenderer is not a constructor
@mike smith
L capital in GLRenderer
Hey Smith, I followed each one of your steps but I get an error on the browser console: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". If you or anyone can solve this it'be great!!
now, can you solve this?
In the html, before the threejs import
{ "imports": { "three": "../build/three.module.js" } }
Thanks a lot. but there is an error question: TypeError: Cannot read properties of undefined (reading 'rotation')
at animate
found the answer in a minute)) not obj.rotation.y + = 0.01; => scene.rotation.y + = 0.01;
Hi Mike,
I am getting the error : " WARNING: Multiple instances of Three.js being imported. @ three.module.js:49490 ." What could cause this issue?
Same here, I still cant find the solution
4:30 I could not use this form, I need to write this down instead "./three.module". I don't know why. can you explain to me?
Hmm, I would go to that directory and see if there is a .js file extension on that file to get some more insight. Seems weird that it wouldn't be included on the file. Maybe some sort of bug happened when it was being downloaded, or perhaps you got the files from a different place than I did?
Thanks for this video. But I got a WARNING: Multiple instances of Three.js being imported. three.module.js:48909 How can this problem be solved?
hey mike, I tried using your code to import my 3d model but it doesnt work, can i have the code you typed in
or email me
Sure thing, David. I put the files I made in the video on to github at this link: github.com/michaelmss/threejsfileimport
I did not include the model files I used because they were too big for github, but if you just put your .gltf and .bin file into the source directory it should work. You might have to mess around with background colors and camera position, check my reply to Philip Rosner in this comment section for more on that. (Also, be sure that you are using some sort of live hosting feature as you cant just open the .html file, it has to be hosted because of some obscure browser rules with model files, see the link in the description for more on that.)
same steps on 2023?
Please help me out with color customizer!!
Maybe this link could help you: tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/
@@MikeSmith-mb5em thanks!! Better if u make such videos of adding customizer...
4:12 I don't have it inside GLTFLoader.js
I found it, looks like library contains two files with the same name... we need one from JSM folder
This is not working now a days!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
the scene and your gltf scene is making a lot of confusion
Improvements :
1. Upload the source code to Github so that people don't have to copy the code according to your video like an idiot.
2. Your camera feed is way too large and it blocks the code, which is much important than your face.