三维模型中的三盒工具提示

Question

我一直在尝试在一些导入的3D模型上启用工具提示，但它不起作用。

我已经在三个框中启用了工具提示，在3d元素的选项中启用了工具提示，如下所示。

tb = new Threebox(
    map,
        mbxContext,
    {
        realSunlight: true,
        enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
        enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models 
    }
);

var proptions = {
    obj: './models/er.glb',
    type: 'gltf',
    scale: 10,
    units: 'meters',
    rotation: { x: 90, y: 0, z: 0 }, //default rotation
    anchor: 'center',
    adjustment: { x: 0, y: 0, z: 0.4 },
    enableToltips: true
}

在加载对象时，我执行了以下操作：

tb.loadObj(proptions, function (model) {
    model.setCoords(place);
    model.addTooltip("A radar in the middle of nowhere", true);
    model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
    tb.add(model);
});

尽管该对象出现在呈现中，但当我将鼠标放在上面或单击它时，没有显示工具提示。

我错过了什么？

编辑：

在@jscastro响应之后，我将html页面顶部的导入更改为<link href="./threebox-plugin/examples/css/threebox.css" rel="stylesheet" /> (路径是文件所在位置的正确路径)

我还删除了enableTooltip: true in proptions。

尽管如此，它仍然不起作用，下面我将保留代码如下：

var origin = [-8.4, 41.20, 1];
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: origin,
    zoom: 11,
    pitch: 30,
    antialias: true
});

//Things related to dateTime ommited

window.tb = new Threebox(
    map,
    map.getCanvas().getContext('webgl'),
    {
        realSunlight: true,
        enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
        enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models 
    }
);

map.on('style.load', async function () {
    await importarLinhas();
    // stats
    // stats = new Stats();
    // map.getContainer().appendChild(stats.dom);
    animate();

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

            var eroptions = {
                obj: './models/stationBus.fbx',
                type: 'fbx',
                scale: 0.01,
                units: 'meters',
                rotation: { x: 90, y: 20, z: 0 }, //default rotation
                anchor: 'center',
                adjustment: { x: -0.1, y: -0.1, z: 0.4 }
            }

            var poptions = {
                obj: './models/Busstop.fbx',
                type: 'fbx',
                scale: 0.03,
                units: 'meters',
                rotation: { x: 90, y: 20, z: 0 }, //default rotation
                anchor: 'center',
                adjustment: { x: -0.1, y: -0.1, z: 0.1 }
            }

            var proptions = {
                obj: './models/er.glb',
                type: 'gltf',
                scale: 2.7,
                units: 'meters',
                rotation: { x: 90, y: 0, z: 0 }, //default rotation
                anchor: 'center',
                adjustment: { x: 0, y: 0, z: 0.4 }
            }

                allNos.forEach((element) => { //For each one of a list that i fill first
                    //center of where the objects are
                    var place = [element.lng, element.lat, 0];

                    //cylinder as "base" for each one of the 3d Models 
                    **//in here i cant do the Tooltip for the object**
                    const geometry = new THREE.CylinderGeometry(0.6, 0.6, 0.15, 32);
                    const material = new THREE.MeshLambertMaterial({ color: 0x5B5B5B });
                    const cylinder = new THREE.Mesh(geometry, material);

                    var baseOptions = {
                        obj: cylinder,
                        anchor: 'center',
                        adjustment: { x: 0, y: 0, z: -0.4 }
                    }

                    let base = tb.Object3D(baseOptions);
                    base.setCoords(place);
                    base.setRotation({ x: 90, y: 0, z: 0 })
                    //The text is just for the test
                    base.addTooltip("A radar in the middle of nowhere", true);
                    // base.castShadow = true;
                    window.tb.add(base);
                    
                    //next i check what type of element it is 
                    //it can only be one at the same time, so i use different models for each type
                    if (element.tipo === "p") {
                        window.tb.loadObj(poptions, function (model) {
                            model.setCoords(place);
                            model.addTooltip("A radar in the middle of nowhere", true);
                            model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
                            // model.castShadow = true;
                            window.tb.add(model);
                        });
                    }
                    if (element.tipo === "er") {
                        window.tb.loadObj(eroptions, function (model) {
                            model.setCoords(place);
                            model.addTooltip("A radar in the middle of nowhere", true);
                            model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
                            // model.castShadow = true;
                            window.tb.add(model);
                        });
                    }
                    if (element.tipo === "pr") {
                        window.tb.loadObj(proptions, function (model) {
                            model.setCoords(place);
                            model.addTooltip("A radar in the middle of nowhere", true);
                            model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
                            // model.castShadow = true;
                            window.tb.add(model);
                        });
                    }

                });

        },

        render: function (gl, matrix) {
            window.tb.setSunlight(date, origin.center);
            window.tb.update();
        }

    })
    map.addLayer(createCompositeLayer());

    map.on('SelectedFeatureChange', onSelectedFeatureChange);
});

Answer 1

编辑我下载了您在聊天中共享的页面，并在代码中发现了许多不同的问题和错误。

1.您使用了错误的属性来启用3D对象的选择，您使用enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection，也就是如注释中所说的用于Mapbox填充挤出特性，但是对于3D模型和对象，您必须使用enableSelectingObjects: true。只需添加这一点，鼠标上的工具提示就可以解决问题。

tb = new Threebox(
    map,
        mbxContext,
    {
        realSunlight: true,
        enableSelectingObjects: true, //enable 3D models over/selection
        enableTooltips: true // enable default tooltips on fill-extrusion and 3D models 
    }
);

但我发现了其他问题..。

2.您的模型scale初始化太小，所以您正在将它们隐藏在您创建的大形状下面。你的公交车站的规模是scale: 0.01，你定义了一个位于地面的地方，var place = [element.lng, element.lat, 0];，所以它隐藏在这个CylinderGeometry里面

如果你使用scale: 1，你会看到你的汽车站是如何从汽缸里升起的。

​

3.和总线一样，您用scale: 1,初始化它们，使它们隐藏在您创建的管道和圆柱体下面。如果你用scale: 10,初始化它们，然后把它们提升到离地板5米的地方，let truck = model.setCoords([lngB, latB, 4]);，那么你会看到它们上升。

​

4.你的模型有一个错误的初始化参数混合了anchor和adjustment。anchor: center将正确地对对象的关键中心进行居中，但随后将负值应用于x和y(这意味着删除对象)，并应用z值来提升关键中心adjustment: { x: -0.1, y: -0.1, z: 0.4 }。如果你想要你的模型在高度上使用第三个坐标在setCoords。

5.将汽缸和管道设置为公交车站和公交线路的是巨大的，而且是错误的，因为你把它们设置在地面-0.4单元adjustment: { x: 0, y: 0, z: -0.4 }以下( Mapbox支持的东西，但解决得很糟糕，产生了奇怪的效果)。我的建议是使它们几乎是平坦的，并且在没有adjustment参数的基础上。const geometry = new THREE.CylinderGeometry(0.6, 0.6, 0.01, 32);。

总之，检查所有这些变化，并让我知道它是否有效。