javascriptthree.jsapplication-blocks

THREE OBJ Loader missing geometry faces from Blocks


Loading in some OBJs from Google Blocks I'm noticing that a few of the faces go missing. I've got the smooth shading but can't make the missing faces appear. Ideas? Here is my current template:

mtlLoader.load(mtlUrl, (materialLoader) => {
        materialLoader.preload();

        for (let material in materialLoader.materials) {
            materialLoader.materials[material].side = THREE.DoubleSide;
        }

        let objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materialLoader);

        let onSuccess = function (object) {
            var mesh = object.children[0];
            mesh.geometry = new THREE.Geometry().fromBufferGeometry(mesh.geometry);
            mesh.geometry.computeFaceNormals();
            mesh.geometry.mergeVertices();
            mesh.geometry.computeVertexNormals();
            mesh.geometry.center();

            this.group.add(object);                
        };

        let onProgress = function (event) {
            if (event.lengthComputable) {
                let percentComplete = event.loaded / event.total * 100;
                let output = 'Download of Object: ' + Math.round(percentComplete) + '%';
            }
        };

        let onError = function (event) {
            let output = 'Error of type "' + event.type + '" occurred when trying to load: ' + event.src;
        };

        objLoader.load(objUrl, onSuccess, onProgress, onError);
    });

Artifacts:

SNES WRONG

Correct:

SNES Correct


Solution

  • The following pull request accounts for the missing faces.

    https://github.com/zerohun/three.js/blob/e9abb6f0fe5966178b1c0b64289ffa4df8b3be6a/examples/js/loaders/OBJLoader.js