Threebox和Mapbox:为什么纹理和形状在同一个GLTF模型的连续实例上消失了？

Question

我正在使用Mapbox-gl (2.2.0)和优秀的Threebox (2.2.3)插件将相同GLTF模型的多个实例添加到场景中。

第一个模型渲染正确，第二个模型存在于场景中，但会丢失纹理和/或形状。

可以加载不同的模型，并且它们彼此不冲突，但是，在每个模型的第二个和连续的实例丢失纹理和/或形状的情况下，会发生相同的行为。

Two different (but similar) models, loaded twice. The first instance of each model renders correctly, the second instance does not

Mapbox2.0之前的版本运行良好，所以我认为这要么是个bug，要么是我误解了一个特性。如果能在最新版本的3D地形中实现这一点，那将是一件很棒的事情。

下面是相关的代码，直接去掉：

    let map = new mapboxgl.Map({
        style: "mapbox://styles/mapbox/satellite-v9?optimize=true",
        center: [7.059806068014609, 46.058219779837316],
        zoom: 9.848554211380023,
        pitch: 85,
        bearing: -154.1,
        container: 'map',
        antialias: true, 
        hash: true
    });

    map.on('style.load', function () {

        map.addLayer({
            id: '3D-overlay',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, mbxContext) {

                window.tb = new Threebox(
                    map,
                    map.getCanvas().getContext('webgl'),{});

            },

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

        addBike(1);
        addBike(2);

    });

    function addBike(num){

        var options = {
            obj: "./gltf/cyclist/scene.gltf",
            type: 'gltf',
            scale: 10,
            units: 'meters',
            rotation: {x: 90, y:177, z:0},
            anchor: 'auto'
        }

        tb.loadObj(options, function (model) {

            tb.add(model);

            model.setCoords([6.927566+(num/10), 45.984111 + (num/10), 4000]);

            model.traverse(function (object) {
                object.frustumCulled = false;
            });

            model.playAnimation({ animation: 0, duration: 1000000000 });

            model.selected = true;

        })

    }

以下是包含这些文件的github存储库：

https://github.com/nickshreck/threebox-mapbox-gltf-issue.git

运行npm i，将mapbox令牌放入main.js，然后输入npm run dev

非常感谢

Answer 1

感谢你以如此详细和清晰的方式报道了如此棘手的问题。它帮助我发现了Threebox代码中的一个问题。This issue has been resolved向现在接受clone: false的tb.loadObj添加新属性。它已经在代码库中可用，并将很快作为npm module v2.2.4发布。在此期间，您可以使用the bundle file from github。

您的函数addBike现在将如下所示：

    function addBike(num){

        var options = {
            obj: "./gltf/cyclist/scene.gltf",
            type: 'gltf',
            scale: 10,
            units: 'meters',
            rotation: {x: 90, y:177, z:0},
            anchor: 'auto',
            clone: false //objects won't be cloned
        }

        tb.loadObj(options, function (model) {

            tb.add(model);

            model.setCoords([6.927566+(num/10), 45.984111 + (num/10), 4000]);

            model.traverse(function (object) {
                object.frustumCulled = false;
            });

            model.playAnimation({ animation: 0, duration: 1000000000 });

            model.selected = true;

        })

    }

我还建议您在addLayer方法外部而不是内部声明tb对象。这将激发一些与真实太阳光和地形图层相关的自动行为，并删除重复的灯光。

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

        map.on('style.load', function () {

            map.addLayer({
                id: '3D-overlay',
                type: 'custom',
                renderingMode: '3d',
                onAdd: function (map, mbxContext) {

                    addBike(3);
                    addBike(4);

                },

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


        });

​

​

再次感谢！