3D model exported from SketchUp to three.js looks terrible

Cheers,

I'm using a SketchUp 3D model in a Mapbox custom layer (with threebox/THREE.js) and I'm having a problem getting it to look less than awful.

The model looks great in SketchUp but when I add it to Mapbox, the lights are all messed up. The triangles seem to have individual directional light sources that point all over the place.

And this is what it looks like after exported (as .OBJ + .MTL) and imported:

The onAdd looks like this:

      onAdd: function(map, gl) {
        this.tb = new Threebox(map, gl, { defaultLights: true });

        const baseName = "hanse388_006";

        var manager = new THREE.LoadingManager();
        new THREE.MTLLoader(manager).load(
          baseName + ".mtl",
          function(materials) {
            materials.preload();

            new THREE.OBJLoader(manager).setMaterials(materials).load(
              baseName + ".obj",
              function(object) {
                this.boat = this.tb.Object3D({ obj: object, units: "meters" });
                this.boat.setCoords([DEFAULT_LNG, DEFAULT_LAT, 0]);
                this.tb.add(this.boat);
              }.bind(this)
            );
          }.bind(this)
        );

The default lights from threebox (slightly changed by me) look like this:

        this.scene.add( new THREE.AmbientLight( 0xffffff, 0.6 ) );
        var sunlight = new THREE.DirectionalLight( 0xffffff, 0.7 );
        sunlight.position.set(0,80000000,100000000);
        sunlight.matrixWorldNeedsUpdate = true;
        this.world.add(sunlight);

As a workaround suggested by @Mugen87, I tried the export/import in a different format.

SketchUp doesn't support glTF but when I used Collada (.dae) it worked nicely!