Threejs / glTF - Black spots on mesh

Question

I'm getting some weird black spots on a mesh loaded in threejs in glTF. Anyone already have this problems before ?

The mesh is heavy 145 663 vertices, the biggest part have 89 000 vertices

I'm using version r94 of threejs and i load mesh with ths following code :

`

function setup(scene, camera, renderer) {
    var loader = new THREE.GLTFLoader();
    THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
    loader.setDRACOLoader( new THREE.DRACOLoader() );

    // Load a glTF resource
    loader.load(
        // resource URL
        'mesh/ExportAllcleanNoMap.glb',
        // called when the resource is loaded
        function ( gltf ) {

            gltf.scene.scale.set(10,10,10);
            scene.add( gltf.scene );
            var anim = gltf.animations[0];

            mixer = new THREE.AnimationMixer( gltf.scene );

            var action = mixer.clipAction(anim);
            action.play();

            orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
            orbitControls.target.set( 0, 1, 0 );
            orbitControls.update();

            light = new THREE.HemisphereLight( 0xbbbbff, 0x444422, 2 );
            light.position.set( 0, 1, 0 );
            scene.add( light );

            scene.add(light);
            var ambient = new THREE.AmbientLight( 0x222222 );
            scene.add( ambient );
        },
        // called while loading is progressing
        function ( xhr ) {

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {
            console.log(error);
            console.log( 'An error happened' );

        }
    );
}
`

Thanks.

Edit : Black spot not appear when draco compression is disabled. Looks like an issue between threejs, draco and heavy mesh.

Black spot on mesh

Welcome to StackOverflow! Unfortunately, this question is liable to downvotes because you should give which current settings you have, and some code-process — Ṃųỻịgǻňạcểơửṩ
The mesh is heavy 145 663 vertices, the biggest part have 89 000 vertices — Florent Baudon

manthrax manthrax · Accepted Answer · 2018-07-04T22:42:55

This looks like doubled up geometry. You somehow have two copies of the model perfectly on top of each other.

Check in your modelling software by selecting the vertices of one object and moving them and see if there is a duplicate hiding behind them.

If you are using blender, you can select a single vertex in the affected area in edit mode, and do ctrl L to select linked vertices... then move those aside and see if there is geometry hiding behind them.

Threejs / glTF - Black spots on mesh

1 Answers