从 SketchUp 导出到 three.js 的 3D 模型看起来很糟糕

Question

干杯，

我在 Mapbox 自定义图层（使用 threebox/THREE.js）中使用 SketchUp 3D 模型，但我在让它看起来不那么糟糕时遇到了问题。

模型在 SketchUp 中看起来很棒，但是当我将它添加到 Mapbox 中时，灯光全乱了。三角形似乎有指向各处的独立定向光源。

这是导出（作为 .OBJ + .MTL）和导入后的样子：

onAdd 看起来像这样：

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

threebox 的默认灯（我稍微改动了一下）如下所示：

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

Answer 1

作为@Mugen87 建议的解决方法，我尝试了不同格式的 export/import。

SketchUp 不支持 glTF，但当我使用 Collada (.dae) 时它运行良好！

从 SketchUp 导出到 three.js 的 3D 模型看起来很糟糕

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

three.js

sketchup

mapbox-gl

mapbox-gl-js