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

Question

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);

Is it possible to export with SketchUp to `glTF` instead? If so, please try this 3D format and load your model with `GLTFLoader`. — Mugen87, Apr 27 '20 at 09:53
Cool beans. SketchUp doesn't have glTF export but when I exported with Collada it worked as expected! Thank you, @Mugen87 ! — mglonnro, Apr 27 '20 at 14:59
Okay, but keep in mind that `glTF` will load faster than Collada. It would be great if a direct export to `glTF` would be possible. — Mugen87, Apr 27 '20 at 15:18

score 1 · Accepted Answer · answered Apr 27 '20 at 15:00

1

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!

answered Apr 27 '20 at 15:00

mglonnro

151
10

Can you share the .obj file that didn't load somewhere? – gman Apr 28 '20 at 09:18
Here it is, @gman: https://storage.googleapis.com/naked-sailor.appspot.com/experimental/hanse388_006.obj – mglonnro May 05 '20 at 12:17

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

1 Answers1