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ểơửṩ, Jul 04 '18 at 17:41
The mesh is heavy 145 663 vertices, the biggest part have 89 000 vertices — Florent Baudon, Jul 06 '18 at 08:23
Does the issue still appear if you omit the Draco compression? And, would you be able to share a link to the model? — Don McCurdy, Jul 09 '18 at 05:00
Hello, i tried without draco compression, and black spots disappears. it's look like an issue betwwen draco, threejs and heavy mesh. Thanks a lot. — Florent Baudon, Jul 09 '18 at 07:59
In that case it probably comes down to the tool you're using to create the mesh, and the specific Draco settings involved. See https://github.com/facebookincubator/FBX2glTF/issues/101 — if that doesn't fix it, I'd file an issue on the tool. — Don McCurdy, Jul 09 '18 at 20:42

manthrax · Answer 1 · 2018-07-04T23:29:58.487

0

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.

edited Jul 04 '18 at 23:29

answered Jul 04 '18 at 22:42

manthrax

4,918
1
17
16

Thanks for your anwser, but i check in blender and there are no overlapped geometry. – Florent Baudon Jul 06 '18 at 08:24
If you comment out the mixer/action/play stuff, does it still show artifacts? Upload your mesh somewhere so we can take a look... – manthrax Jul 06 '18 at 19:21

Threejs / glTF - Black spots on mesh

1 Answers1