So I created a model in sketchup and exported it to blender as a .dae file. From blender, I added textures and materials and exported it as a .glb file, using Khronos glTF-Blender-IO I was able to successfully export from blender to a glb / gltf file using the export default settings in blender, which I believe exports the materials / textures.

Now I was also able to successfully add the model to the three.js canvas. My issue, however, is that none of the textures / materials seem to be showing up. The model looks material-less and I can’t figure out why.

Just an FYI I am using React JS for this project


My scene has several lights as shown below:

		var lights = [];
		lights[ 0 ] = new THREE.PointLight( 0xffffff, .4, 0 );
		lights[ 1 ] = new THREE.PointLight( 0xffffff, .3, 0 );
		lights[ 2 ] = new THREE.PointLight( 0xffffff, .8, 0 );

		lights[ 0 ].position.set( 0, 200, 0 );
		lights[ 1 ].position.set( 100, 200, 100 );
		lights[ 2 ].position.set( - 100, - 200, - 100, 100 );

		this.scene.add( lights[ 0 ] );
		this.scene.add( lights[ 1 ] );
		this.scene.add( lights[ 2 ] );

        var ambientLight = new THREE.AmbientLight( 0x916262 );
		this.scene.add( ambientLight );

        var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
        this.scene.add( light );

This is my code for the glb loader:

        var loader = new GLTFLoader();
        loader.load( glb,
            object => {
                console.log("entered into the stage");
                this.treeHead = object.scene;
                // this.treeHead.position.y += 30;

            xhr => {console.log( ( xhr.loaded / * 100 ) + '% loaded' );},
            error => {console.log("Error! ", error);}

This is my animate function and my start function

    animate = () => {
        var time = * .001;
        // this.treeHead.rotation.y += .01;
        this.frameId = window.requestAnimationFrame(this.animate);

    start = () => {
        // changed orbit controls parameters from just to both the camera and the renderer dom element
        this.controls = new OrbitControls(;, 20, 0);
        if (!this.frameId) {
            this.frameId = requestAnimationFrame(this.animate)


My blender View


My three.js View


Your help would be much appreciated!

I would refer to the troubleshooting steps here, first: If the two viewers mentioned there also do not show color, it’s likely that the colors and textures have not been exported.

For best results, I’d recommend the Blender 2.8 beta and the Principled BSDF material type. I’m not sure whether Principled BSDF will work in 2.79 or not.

1 Like

Thanks for the quick response. I got Blender 2.8 beta and used the Principled BSDF type. Now unfortunately, nothing is showing, not even the model, and I just have a black screen. I don’t think anything is crashing, but its certainly not showing the model either. Any ideas?

Could you try the steps above to narrow down whether the model appears in any other viewers?

Ah I wasn’t paying attention closely to the console.logs
This is the error I’m getting:

    Error!  TypeError: Cannot read property 'length' of undefined
    at GLTFParser.loadMesh (index.js:1931)
    at GLTFParser.getDependency (index.js:1297)
    at index.js:2253
    at GLTFParser.loadNode (index.js:2291)
    at GLTFParser.getDependency (index.js:1293)
    at buildNodeHierachy (index.js:2331)
    at GLTFParser.loadScene (index.js:2406)
    at GLTFParser.getDependency (index.js:1289)
    at index.js:1359
    at (<anonymous>)
    at GLTFParser.getDependencies (index.js:1358)
    at GLTFParser.getMultiDependencies (index.js:1379)
    at GLTFParser.parse (index.js:1219)
    at GLTFLoader.parse (index.js:151)
    at Object.onLoad (index.js:52)
    at XMLHttpRequest.<anonymous> (three.module.js:23288)

From this step:

View the model in another application. For glTF, drag-and-drop viewers are available for three.js and babylon.js. If the model appears correctly in one or more applications, file a bug against three.js. If the model cannot be shown in any application, we strongly encourage filing a bug with the application used to create the model.

Does the model show up in either of the viewers linked? I’m trying to narrow down whether the model itself is broken, or whether there’s a bug in your code or three.js. A live demo or the .blend file might be another way to go, if you’re able to share them.

Hi Don,

Thanks again so much for all of your help so far. Here is the attached blender file. I tried loading it into your web renderer but it was also unsuccessful and produced the same error.

newBlender.blend (1.6 MB)

hey so I noticed something interesting as I was trying to debug. When I exported using the gltf exporter in Sketchup, it worked! Obviously the materials don’t look as good as blender but I guess its better than nothing! I think that there might be a bug with exporting it in the beta version of blender.

Exporting from Blender 2.8 (beta) this looks right to me:


1 Like

hmm that’s so bizzarre. It still isn’t exporting properly for me. Are these the same export settings you have?






1 Like

That looks right, I used all the defaults and tested on It’s possible that the version of the exporter in 2.8 is a bit behind the GitHub version ( I’ve installed the latter, but would expect this example to work in either.

How would you go about updating the exporter in 2.8? I can’t find the File -> User Preferences section like in 2.79.

The menu is under Edit -> Preferences now, but I think you may have to delete the old one manually. For me it’s under:


…and then you’d replace that folder with the addons/io_scene_gltf folder on github.

1 Like

Lol i have similar problem :stuck_out_tongue_winking_eye:

Hello did anyone have a solution, when I use this file 'human skeleton ’ from sketchfab I also
The codepen testing file on Sketchfab here
Imgur: The magic of the Internet

The problem with your model was, that it for some reason was put in a root within a root, within a root, within a root, within a root, within a root, making everything unaccessible. I fixed that part, now you can access everything. I exported a sample mesh with texture and normal maps. If you wish to add the occlusion and specular, feel free to do so in node manager and rexport the model. When exporting the model, use Blenders own gltf exporter, it should be up to date.

See Gltf model not loading with texures in threejs but working with babylonjs - #2 by donmccurdy. The model must be converted from spec/gloss to metal/rough. Loading the model in and exporting will also fix the issue.

Thanks for your answer… but I did not get the skeleton correct.
I tried it with an other example and video and this video and it worked to get this arrow arrow karel glb
model: Wooden Sign - Baked Low Poly - Download Free 3D model by JeffK (@jeffkolada) [0d2fbde] - Sketchfab )
=> I added the picture to github next to my model and so the gltf gets the texture

=> so please can you help me with the skeleton, the pictures are visible when I open the file into and I can export to glb or gltf but into I can’t see the colors of the skeleton.

image of the unlit image
image of the metal/roughness

It might be best to start a new thread with full context to reproduce the issue — especially the code you’re using to light the scene, and ideally a demo. I see you mention a codepen above, but I don’t see a link to it. You’ll need to add a source of light to the scene, see various glTF examples on the website: three.js examples

It looks fine on, do you see something other than this?