model - Threebox Mapbox：我编辑的每个模型最终都变成了天空中的巨大球

问题描述

当我将 truck.glb 作为自定义图层添加到 mapbox 地图时，一切都很好。示例中的所有模型都很好。我用 three.js 编辑器或 nunustudio.org 编辑的每个模型都呈现为一个巨大的灰色球，在距离地面数百公里的太空中。

使用相同的代码：

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

三盒示例中的模型按预期显示，但导出为 .glb 或 .gltf 的每个其他模型看起来都像是非常糟糕的科幻电影续集的悬念：

从三个编辑器导出时我做错了什么？

谢谢提示

请在下面找到一个模型

probolt.ch/test.glb

在编辑器中完美渲染，但在三框里有一个大的黑色大理石。感谢您的支持。

标签： modelmapboxthreebox

您的问题与 Threebox 或 Three 无关...我下载了它，您的模型只是一个球体...用 3D 查看器打开：

用threejs.org/editor打开

问题是您在模型周围创建了一个巨大的球体，显然是为了创建天空，如果您想创建一个投射和反射光的环境，这是不必要的，而且不是方法。

如果您只是隐藏或删除mesh_0您的模型将显示在任何工具中。

还有三盒

这是相关代码（我添加了一个工具提示，真实的阳光和阴影）：

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

model - Threebox Mapbox：我编辑的每个模型最终都变成了天空中的巨大球

问题描述

解决方案

推荐阅读