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

Question

干杯,

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

这个模型在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建议的一种解决方法，我尝试了不同格式的导出/导入。

SketchUp不支持glTF，但当我使用Collada (.dae)时，它工作得很好！

​

​