3D 模型中的三框工具提示

Question

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

我已经在 threbox 中启用了工具提示，并且我在 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。

尽管它仍然不起作用，下面我将保持原样：

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, 初始化它们并将它们从地板let truck = model.setCoords([lngB, latB, 4]); 提升5 米，那么您将看到它们升高。

4. 您的模型有一个错误的初始化参数，混合了anchor 和adjustment。 anchor: center 将正确居中对象的枢轴中心，但随后将负值应用于 x 和 y（这意味着使对象偏心），以及提升枢轴中心 adjustment: { x: -0.1, y: -0.1, z: 0.4 } 的 z 值。如果您希望您的模型处于海拔高度，请使用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);。

总结一下，检查所有这些变化，让我知道它是否有效。