Three.js Importing Models Tutorial | How to Import GLTF Models in Three.js

In this coding tutorial, we go over importing GLTF models in Three JS. We start off by learning when it is useful to import 3D models. Then we go over the different file formats for 3D models like GLTF, OBJ, and FBX. Finally, we find a model on Sketchfab and learn how to import it into our Three.js scene.
📖 Code - github.com/Sub...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/Sub...
🌎 Website - suboptimaleng.com
== [ Credits ] ==
zixisun02 - sketchfab.com/...
Shiba by zixisun02 - sketchfab.com/...
Caterina Zamai - www.artstation...
Hand Anatomy by Caterina Zamai - sketchfab.com/...
== [ Resources ] ==
Three.js - threejs.org
Three.js Tutorials - sbcode.net/thr...
== [ Timestamps ] ==
00:00 Intro to Three.js
00:30 Why Use 3D Models?
01:49 File Formats for 3D Models
02:43 Find Model in Sketchfab
03:46 Import GLTF Model
05:03 Transform + Scale Model
05:37 Animate Model
== [ Tags ] ==
#suboptimal #metaverse #threejs

[@mr.pushkin6213]

I am having so much trouble with this it's just not working...

[@Aastha-gl2wo]

Thanks for the awesome tutorial on importing 3D models in three.js! 🚀

[@matthewbaynham6286]

The folders on your GitHub doesn't match what is on the video.

[@sele-nap]

Thanks for the follow up videos! it's super clear and helps me a lot :)

[@maxhoffmann1298]

Why does the scene from "07-import-model" keep reloading after 30 seconds or so?

[@developerenn]

This channel is goldmine!

[@johncena-qr4yg]

how to change width and height of that canvas to (512x512)? how to remove left top corner fps stats?

[@sikeplayz]

hey did u fixed this?

[@onemorechris]

several days trying to get a model to appear in a webpage 😭. I think your tutorial as as clear and simple as this is going to get and i still can’t get it to work. when i download all your code, i get weird errors about accessing main.jsx.

[@SuboptimalEng]

It didn’t work after you followed the instructions on the readme?

[@onemorechris]

@@SuboptimalEng i didn’t fully understand it. i think it might be something wrong with another part of my code as i was getting similar errors before. i think what i’m trying to do is beyond my abilities sadly

[@SuboptimalEng]

@@onemorechris don't say that! Most programmers struggle with coding all the time! Hope you figure out the bug.

[@onemorechris]

@@SuboptimalEng lol. i’ll try again another day. nice tutorial either way 👍

[@user-di6nv8cs7k]

Thank's for this tutorial, it made my model appear!

[@SuboptimalEng]

Glad it helped!

[@tundeakinola8122]

Pls how does one import the downloaded model into React.js? Do u have a video for that?

[@suhaanbhandary4009]

Eg of a cube model:
import CubeModel from './cube.gltf';

[@dungcuyeu]

​@@suhaanbhandary4009😮

[@bestapps4709]

How to let it more shiness, metalness to appear alive?

[@cyraxvisuals6203]

textures import cleanly as well? normal etc

[@vegetagod2013]

I use VITE for react and THREE JS ...but when I try to deploy it in netlify the build fails ....it says.. [vite]: Rollup failed to import 'three' from scr/lib/... but the deployment build is working locally ..please help

[@SuboptimalEng]

Unfortunately, I’m not familiar with Netlify. I’ve mainly use GitHub pages.

[@vegetagod2013]

@@SuboptimalEng When I use Github Pages the GLTF models dosent loads up but it atleast deploys ...so can you make a tutorial to deploy or u have any solution ...cause i am using the same THREE.js and React(Vite) setup

[@corretorortografico5534]

I don't know what's happening in my project. It keeps sending this error message: JSON.parse: unexpected character at line 1 column 1 of the JSON data.
Can someone help?

[@cyberprank7549]

Hello, did you find a solution to this problem?

[@corretorortografico5534]

@@cyberprank7549 Hi, I don't remember it very well, but I believe that I wasn't able to import other file resources. So I used a HTTP server. It's very simple to create one, since you can do it with a simple command

[@corretorortografico5534]

@@cyberprank7549 Also, there's a pretty awesome guy who recommends the use of a bundler named Parcel. I really don't know what a bundler is, but it really helped. Take a look

[@cyberprank7549]

@@corretorortografico5534 And I am using a faucet Parcel. Unfortunately, nothing works.

[@cyberprank7549]

@@corretorortografico5534
100% loaded
index.js:24 SyntaxError: Unexpected token '

[@vedantkanoujia]

import shirt model success but not textures fix please

[@Ddddddddyu]

i have same problem, have you find solve for it ?

[@JFKTLA]

what if i have a glb would this still work

[@SuboptimalEng]

According to the Three.js docs the GLTF loader should also work on GLB files.

[@petero.oyebanji959]

Love the tutorial man! Is there a way to put this on a iOS simulator for an app

[@SuboptimalEng]

Thanks Peter! I’m not sure what you mean by put it in an iOS simulator. I know the Unity game engine makes it easy to make 3D games on mobile.

[@petero.oyebanji959]

@@SuboptimalEng like rather than on the local hist it would be on a react native emulator

[@dclxviclan]

Cool bro

[@IllusiveMediaYT]

What is your VSCode Theme?

[@SuboptimalEng]

It’s a custom variant of the Gruvbox dark theme. You can find more details in my Dotfiles repository on GitHub.

[@natialo]

Thanks for this bro

[@SuboptimalEng]

Glad the video could help Olaitan 😊

[@sergdomina]

dont work, model dont upload

[@TRUE043]

I don't call it a tutorial, not all of you are able to show, a project from a to z, always parts. It doesn't make you want to move on, maybe it's done on purpose.
Result me, and others are having a hard time, because of selfish people, who do anything, I'm very angry, I haven't seen a tutorial, complete, a file is always missing, not the right version, more compatible file, zoom part, part from start or end. You do it on purpose, you are disgusted people, so keep your programming to yourself. I'm tired of wasting my time with guys who don't even know how to do a complete tutorial from A to z, and without skimming over.👎👎👎👎👎👎👎

[@muhannsh4393]

I feel you man, but our guy here is doing his best to make those tutorials, and I'm sure he thinks that every one made it so far have the knowledge to do all the previous things! Believe I'm totally new to there.js I'm just starting now! Cheers ^.^

[@SamuelQueen-re8bc]

he has other tutorials that lead up to this point. there's no need to insult people just because you are too lazy to figure it out and want everything handed to you

[@deuldmarinho3434]

hi bro I really need your help every-time I scroll the page the fbx model despair from the de scene what can i do to stop this problem here is the code:
const clock = new THREE.Clock();
let mixer;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const pt = new THREE.Vector3(0, 1, 2);
camera.lookAt(pt);
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(40);
renderer.render(scene, camera);
//Background
// Lights
scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 200, 100 );
dirLight.castShadow = true;
dirLight.shadow.camera.top = 180;
dirLight.shadow.camera.bottom = - 100;
dirLight.shadow.camera.left = - 120;
dirLight.shadow.camera.right = 120;
scene.add( dirLight );
// Helpers
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(4.5, 0, 4.5 );
controls.enablePan = false;
controls.maxPolarAngle = Math.PI/2;
controls.enableDamping = true;
controls.noPan = true;
controls.noKeys = true;
controls.noZoom = true;
controls.enableZoom = false;
// Scroll Animation
function moveCamera() {
const t = document.body.getBoundingClientRect().top;
const currentTimeline = window.pageYOffset/3000
const rx= currentTimeline*Math.PI*2
camera.rotation.set(rx,0,0)

camera.position.z = t * -100;
camera.position.x = t * 0;
camera.position.y = t * 0;

}
document.body.onscroll = moveCamera;
moveCamera();
//load model
const loader = new FBXLoader();
loader.load( 'assets/Strut Walking.fbx', function ( object ) {
mixer = new THREE.AnimationMixer( object );
const action = mixer.clipAction( object.animations[ 0 ] );
action.play();
object.traverse( function ( child ) {
if ( child.type == 'SkinnedMesh' ) {
child.frustumCulled = false;
}
} );
scene.add( object );
} );
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );
controls.update();
renderer.render(scene,camera);
}
animate()