3D 模型中的 Threebox 工具提示
Threebox Tooltip in 3D models
我一直在尝试在一些导入的 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 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);
});
编辑
我下载了你在聊天中分享的页面，我在你的代码中发现了许多不同的问题和错误。
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);.
总结一下，检查所有这些更改，让我知道它是否有效。
我一直在尝试在一些导入的 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 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);
});
编辑 我下载了你在聊天中分享的页面，我在你的代码中发现了许多不同的问题和错误。
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);.
总结一下，检查所有这些更改，让我知道它是否有效。