How to load glTF models with separate texture folder

Questions
, ,
1

i am working on loading an external .GLTF model from https://sketchfab.com/3d-models/samsung-ativ-book-9-5e5725666200416cbf650ddce1f84eb4 . I validated this model at https://gltf-viewer.donmccurdy.com/ and the model works if i drag the whole folder. I tried exporting this model in three.js and i dont see anything rendered. I went through a couple of old posts about loading GLTF models and noticed an advice about making sure textures and models are in the same folder. In my case, i have my textures in different folder, would this be a problem? I tried making sure all the jpeg, bin and gltf files are in the same folder but i dont see anything rendering. My understanding is that .gltf file exported has the path to textures folder and will continue picking up the textures from this folder. Is there a different way to add textures for these models ?

Pasting my code for reference
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(5, window.innerWidth/window.innerHeight, 0.1, 5000 );
camera.position.z = 3;
var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

renderer.setClearColor('white');

document.body.appendChild( renderer.domElement );

 window.addEventListener('resize', ()=>{

 renderer.setSize( window.innerWidth, window.innerHeight );

camera.aspect = window.innerWidth/window.innerHeight;

camera.updateProjectMatrix();

 })

var controls = new THREE.OrbitControls(camera, renderer.domElement);

 controls.enableDamping = true;

 controls.dampingFactor = 0.25;

 controls.enableZoom = true;

 var ambient = new THREE.AmbientLight(0xffffff, 0.4);

scene.add(ambient);

 var keyLight = new THREE.DirectionalLight(0xffffff, 2.5);

 keyLight.position.set(-100, 0, 100);

 var fillLight = new THREE.DirectionalLight(0xffffff, 2.5);

 fillLight.position.set(100, 0, 100);

  var backLight = new THREE.DirectionalLight(0xffffff, 1.0);

  backLight.position.set(100, 0, -100).normalize();

  var loader = new THREE.GLTFLoader();

  loader.load('/examples/3d-obj-loader/assets//samsung_ativ_book_9/scene.gltf', function ( gltf ) {

  var model = gltf.scene

  scene.add( model );



   }, undefined, function ( error ) {

  console.error( error );

   } );

  var animate = function () {

  requestAnimationFrame( animate );

  controls.update();

  renderer.render(scene, camera);

  };

 animate();
2

If you don’t need the textures to be in a separate folder, you could just pack it all together with something like https://glb-packer.glitch.me/ or glTF-Pipeline.

Otherwise, it’s essential that the texture folder remain in its original location relative to the .gltf file. If that isn’t the case, you’ll see errors (404 Not Found, or similar) in your JS Console. Open the JS Console in your browser’s developer tools to see any errors that are reported.

1 Like
3

Thank you for your reply ! I tried packing everything together with the link you shared and got a out.glb file which when loaded renders nothing but a black screen (even though i have my background set to grey ) I checked for errors in the console and there are none. I even tried with the texture folder in its original location but i get the same issue with the black screen . I tried a different model and that seems to render. Do you think there is something specific missing in the model ?

4

Hm, that sounds like a bug in the packing tool… glTF-Pipeline is more robust if you want to try that. Or if you can share a .ZIP I’ll pack it into a .glb for you.

5

I tried using glTF-pipeline and run into the same problem of nothing being rendered but a black screen. Not sure what the problem is . Attaching the model as well.samsung_ativ_book_9.zip (670.1 KB)

6

This GLB created with glTF-Pipeline works correctly on https://gltf-viewer.donmccurdy.com/.

samsung.glb (1008.1 KB)

If you’re still getting a black screen, you will need to open the JS console and look for any errors appearing there.

7

Thank you ! I dont see any errors in the JS console but i can keep digging. Thank you for your help !