GLB / GLTF Model Shows BUT NO COLOR

textures
materials
loaders
blender-exporter
gltf-loader
react

#1

Hi,

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

Code

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;
                this.scene.add(this.treeHead);
                this.start()

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

This is my animate function and my start function

    animate = () => {
        this.controls.update();
        var time = Date.now() * .001;
        // this.treeHead.rotation.y += .01;
        this.renderScene();
        this.frameId = window.requestAnimationFrame(this.animate);
    }

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

Images

My blender View

My three.js View

Your help would be much appreciated!


#2

I would refer to the troubleshooting steps here, first: https://threejs.org/docs/#manual/en/introduction/Loading-3D-models. 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.


#3

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?


#4

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


#5

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 Array.map (<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)

#6

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.


#7

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)


#8

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.


#9

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


#10

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

09%20AM

02%20AM

22%20AM

09%20AM


#11

That looks right, I used all the defaults and tested on http://gltf-viewer.donmccurdy.com/. It’s possible that the version of the exporter in 2.8 is a bit behind the GitHub version (https://github.com/KhronosGroup/glTF-Blender-IO). I’ve installed the latter, but would expect this example to work in either.


#12

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


#13

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

/Applications/blender-2.80.0-git20181129.26d5a3625ed-x86_64/blender.app/Contents/Resources/2.80/scripts/addons/io_scene_gltf

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