three.js - Threebox Tooltip in 3D models

Question

I′ve been trying to enable tooltips on some imported 3D models, but it isnt working.

I already enabled tooltips in threbox, and I enabled tooltips in the options for the 3d element, as shown below.

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
}

When i load the object i did the following:

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

Although the object appears in the render, when I put the mouse above or i click it nothing shows the tooltip.

What am I missing ?

EDIT:

Following @jscastro response i changed the import in the top of my html page to <link href="./threebox-plugin/examples/css/threebox.css" rel="stylesheet" /> (the path is the correct to where the file is)

I also removed the enableTooltip: true in proptions.

Despite that it still does not work, Below i will leave the code as it is:

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

question from:https://stackoverflow.com/questions/65644945/threebox-tooltip-in-3d-models

Answer 1

EDIT I downloaded the page you shared in the chat, and I found many different issues and mistakes in your code.

1. You're using the wrong property to enable the selection of 3D objects, you use enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection, that is for Mapbox fill-extrusions features as said in the comment, but not for 3D models and objects, you have to use enableSelectingObjects: true. Only adding this, your problem with the tooltips on mouse over will be solved.

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

But I have found other issues...
2. Your models scale initialization is too small, so you are hiding them below the big shapes you have created. The scale of your bus stop is scale: 0.01 and you define a place which is on the ground var place = [element.lng, element.lat, 0];, so it's hidden inside this CylinderGeometry If you use scale: 1 you will see how your bus stops raises from the cylinder.

3. Same with the bus, you initialize them with scale: 1, which make them be hidden below the tubes and cylinders you have created. If you initialize them with scale: 10, and you elevate them 5 meters from the floor let truck = model.setCoords([lngB, latB, 4]); then you will see them raising.

4. Your models have a wrong initialization params mixing anchor and adjustment. anchor: center will center the pivotal center of your object properly, but then you apply negative values to x and y (which means decenter the object), and a z value that elevates the pivotal center adjustment: { x: -0.1, y: -0.1, z: 0.4 }. If you want your model on altitude use the 3rd coord in setCoords.

5. Your Cylinders and Tubes for the bus stops and bus lines are huge, and also they have the wrong init params, as you set them below the ground level -0.4 units adjustment: { x: 0, y: 0, z: -0.4 } (something supported by Mapbox but very bad resolved and producing weird effects. My recommendation would be to make them almost flat and at the ground level with no adjustment param. const geometry = new THREE.CylinderGeometry(0.6, 0.6, 0.01, 32);.

Summarizing, check all of these changes and let me know if it works.