Threebox中的GLTF obj颜色主题

Question

我用下面的代码在mapbox by threebox中插入了一个GLTF对象。obj的外观看起来很暗。是否有任何选项可用于更改GLTF对象的颜色主题？

     var options = {
              obj: './models/WMK-CSC-ALL-XX-XX-00_0.gltf',
              mtl: './models/WMK-CSC-ALL-XX-XX-00_0.bin', 
              type: 'gltf',
              scale: 1,
              units: 'meters',
              rotation: { x: 90, y: 120, z: 0 }, 
              anchor: 'center'
        }

      tb.loadObj(options, function (model) {
                let bldg = model.setCoords(origin3);
                tb.add(bldg);
        })

​

​

Answer 1

如果你使用的是Threebox，首先你的初始化参数是错误的，而不是：

mtl: './models/WMK-CSC-ALL-XX-XX-00_0.bin'

它应该是：

bin: './models/WMK-CSC-ALL-XX-XX-00_0.bin'

如果使用默认灯光正确初始化Threebox：

window.tb = new Threebox(
    map,
    map.getCanvas().getContext('webgl'), //get the context from the map canvas
    { defaultLights: true }
);

它应该有一个AmbientLight和两个DirectionalLight很好地照亮。我正在维护最新版本的threebox，如果这不能解决您的问题，请随时在那里打开问题。

Answer 2

感谢您的投入。我添加了两个"DirectionalLight“来解决这个问题。

onAdd: function (map, mbxContext) {

                    tb.altitudeStep = 1;

                    //// initialize geometry and material of our cube object
                    var geometry = new THREE.BoxGeometry(30, 60, 120);

                    // create two three.js lights to illuminate the model
                    var directionalLight = new THREE.DirectionalLight(0xffffff);
                    directionalLight.position.set(0, -70, 100).normalize();
                    tb.scene.add(directionalLight);
                     
                    var directionalLight2 = new THREE.DirectionalLight(0xffffff);
                    directionalLight2.position.set(0, 70, 100).normalize();
                    tb.scene.add(directionalLight2);
                    ....
                    ....