blender gltf export looks weird when loaded in three.js

Question

I exported a simple cube with a material from Blender as a GLTF (GLB) file. When loaded in three.js it doesn't look right, as if I was watching the inside of the cube.

In my example I've put side by side: - the mesh loaded from the GLTF file (on the left, in the image) - a mesh with BoxBufferGeometry and a MeshStandardMaterial (on the right, in the image). I have an ambiente light (HemisphereLight) and a main light (DirectionalLight). The created mesh looks ok but the loaded mesh looks weird. When exporting from blender I've tried not exporting the Normals; it got a little better but basically I get the same result. It looks like I'm looking at the cube's interior.

let container;
let camera;
let renderer;
let scene;
let mesh;

function init() {
    container = document.querySelector( '#scene-container' );

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x8FBCD4 );

    createCamera();
    createLights();
    createMeshes();
    createRenderer();

    renderer.setAnimationLoop( () => {

        render();

  } );
}

function createCamera() {
    camera = new THREE.PerspectiveCamera(
        35, // FOV
        container.clientWidth / container.clientHeight, //aspect
        0.1, // near clipping plane
        100, // far clipping plane
    );
    camera.position.set( -1, 1, 10 );
}

function createMeshes() {
    const geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );
    const material = new THREE.MeshStandardMaterial( { color: 0x800080 } );
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    mesh.position.set(2.5, 0, 0);

    var loader = new THREE.GLTFLoader();
    loader.load('models/teste.glb',
                function ( gltf ) {scene.add( gltf.scene );},
                // called while loading is progressing
                function ( xhr ) {console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );},
                function ( error ) {console.log( 'An error happened' );}
                );
}

function createLights() {
    const ambientLight = new THREE.HemisphereLight(
    0xddeeff, 
    0x202020, 
    5, 
    );

    const mainLight = new THREE.DirectionalLight( 0xffffff, 5 );
    mainLight.position.set( 10, 10, 10 );

    scene.add( ambientLight, mainLight );
}


function createRenderer() {
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( container.clientWidth, container.clientHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    container.appendChild( renderer.domElement );
}

function render() {
    renderer.render( scene, camera );
}

init();

I would expect the left cube (the GLTF one) to look like the right one.

Does your exported mesh looks okay when you import it in the following three.js based glTF viewer? gltf-viewer.donmccurdy.com — Mugen87
Thank you in advance for your help. Here's the link to the file. drive.google.com/open?id=1Gtvge6fsdP3pKjL2qUhuLOpGR14swxra It's a simple cube (the one that blender creates when you open a new file). I've changed the material to "Principled BSDF" and chose any color. When exporting to GLTF I've let unchanged the parameters with the exception that I only exported the select object. What really bugs me is that I did all this in another computer and it worked just fine. Unfortunately I no longer can access that computer to see if there are any differences in the parameters. — Ladislau Morais

Ladislau Morais Ladislau Morais · Accepted Answer · 2019-10-20T18:35:48

I found the answer. I'm on Blender 2.79. I must use the old version of the addon (https://github.com/KhronosGroup/glTF-Blender-Exporter)

blender gltf export looks weird when loaded in three.js

1 Answers