Threebox Mapbox: Every of my edited models ends up a as giant ball in the sky

Question

When i add the truck.glb as a custom layer with threebox to a mapbox map, every thingworks fine. All the models from the examples are fine. Every model edited by me with three.js editor or nunustudio.org is rendered as a giant grey ball far away in space hundreds of km's above the ground.

With the same code:

  // model
                var options = {
                    type: 'gltf',
                    obj: 'models/truck.glb',
                    scale: 100,
                    units: 'meters',
                    anchor: "bottom",
                    rotation: { x: 90, y: 90, z: 0 }, //rotation to postiion the truck and heading properly
                }

                tb.loadObj(options, function (model) {

                    truck = model.setCoords(origin_truck);
                    truck.set({ rotation: { x: 0, y: 0, z: 7200 }, duration: 200000 })
                    tb.add(truck);
                })

The models from the threebox examples is displayed as expected but EVERY other model exported as .glb or .gltf looks like a cliffhanger for a sequel from very bad science fiction movie:

What am i doing wrong when exporting from three editor?

Thx for a hint

Please find a model under

probolt.ch/test.glb

Renders perfectly in the editor but one big black marble in the threebox. Thx for your support.

Answer 1

Your problem has nothing to do with Threebox or Three... I downloaded it and your model is just a sphere... Opened with 3D Viewer:

Opened with threejs.org/editor

The problem is that you have created a huge sphere around your model apparently to create the sky, which is unnecessary and not the way if you want to create an environment to cast and reflex lights.

If you just hide or remove mesh_0 your model will be shown in any tool.

And also in Threebox

This is the relevant code (I added a tooltip, real sunlight & shadow):

        mapboxgl.accessToken = 'PASTE YOUR TOKEN HERE!';

        var map = (window.map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/satellite-v9',
            zoom: 18,
            center: [-4.0094,41.4104],
            pitch: 60,
            antialias: true 
        }));

        window.tb = new Threebox(
            map,
            map.getCanvas().getContext('webgl'),
            {
                realSunlight: true,
                enableSelectingObjects: true,
                enableTooltips: true
            }
        );

        let modelOrigin = [-4.0094, 41.4104];

        function createCustomLayer(layerName, origin) {
            let model;
            //create the layer
            let customLayer3D = {
                id: layerName,
                type: 'custom',
                renderingMode: '3d',
                onAdd: function (map, gl) {

                    let options = {
                        type: 'gltf', 
                        obj: './test.glb', //model url
                        units: 'meters', 
                        scale: 10,
                        rotation: { x: 90, y: 180, z: 0 }, 
                        anchor: 'center'
                    }
                    tb.loadObj(options, function (model) {
                        model.setCoords(origin);
                        model.addTooltip("A logo in the middle of nowhere", true);
                        tb.add(model);
                        model.castShadow = true;
                        tb.lights.dirLight.target = model;
                    });

                },
                render: function (gl, matrix) {
                    tb.update();
                }
            };
            return customLayer3D;

        };

        map.on('style.load', function () {
            map.addLayer(createCustomLayer('3d-model', modelOrigin));
        });