GLTF obj color theme in Threebox

user_4308326 0
Viewed 287

I insert a GLTF object in mapbox by threebox with the following codes. The appearance of the obj looks dark. Any options is available to change the color theme of the GLTF object?

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

Image Output in Web

mapbox-gl-js mapbox three.js
2 Answers

If you’re using Threebox, first of all your init Params are wrong, instead of:
mtl: './models/WMK-CSC-ALL-XX-XX-00_0.bin'
It should be:
bin: './models/WMK-CSC-ALL-XX-XX-00_0.bin'

If you are initializing Threebox properly with default lights:

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

it should be well illuminated with an AmbientLight and two DirectionalLight. I’m maintaining the latest version of threebox so feel free to open an issue there if this doesn’t solve your issue.

user_135835980

Thank you for your inputs. I added the two "DirectionalLight" to resolve the issue.

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);
                    ....
                    ....
user_43083260
Related