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

Question

干杯。

我在Mapbox自定义图层中使用一个SketchUp 3D模型（使用threeboxTHREE.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)时，它工作得很好。