Your own string id.
The icon index in the icon texture atlas. Fist icon has iconId 0.
The styleId selects a icon style. First style has styleId 0.
Set the scale size of the icon 0-N. If the size is 0.0 the icon is invisible. If it is 1, iconMaxSize of IconHandler.setIconAtlas is unscaled.
Contains the 3D-coordinate where the icon is rendered.
Custom color RGB, the A channel is used for icon size. If size is 0, the icon is not visible. If RGB is 1.0 only the color from icon texture pixels will be used for coloring. Other values are mixed in.
Defaults to true
Whether Icon can be found in a pick operation or not. Defaults to true.
// A Icon needs to be attatched to a IconHandler to be renderd in the 3D-scene.
const iconHandler = new IconHandler(api);
// Add a icon atlas to use for all icons. Provide the babylonTextre, the total icon count (16), the amount of icons in a group (4) and if the texture use the alpha channel (true).
iconHandler.setIconAtlas(await getTexture('./icon.png'), 16, 4, true);
// Add a array of icons to be renderd.
iconHandler.attach([
new Icon(
"someId_1",
0, // Use the first icon form the 4X4 icon atlas (first row in icon atlas).
2, // Use the third style index, in this case there is 4 icons in a group in the texture atlas.
1, // size
new Vector3(0, 0, 0), // Add a position for the icon. (at origin in this case).
new Color4(Math.random(), Math.random(), Math.random(), 1), // Add a random color to the icon, and the max size to the icon. (1).
true // This makes the icon pickable.
),
new Icon(
"someId_2",
1, // Use the second icon row form the 4X4 icon atlas.
0, // Use the first style of the second icon.
1, // size
new Vector3(0, 0, 0), // Add a position for the icon. (at origin in this case).
new Color4(Math.random(), Math.random(), Math.random(), 1), // Add a random color to the icon, and the max size to the icon. (1).
true // This makes the icon pickable.
)
]);
// A common use for icons is to enable a user to click on them and then perform some functionality.
// Here is an example of how to implement this with the {@link onPointerObservable}.
// For this to work the icons property isPickable needs to be set to true.
api.onPointerObservable.add((eventData) => {
const pointerButtonInfo = eventData.twinfinity.button(PredefinedPointerButtonId.Main);
// Only continue on main click button release.
if (pointerButtonInfo.event !== 'up') {
return;
}
// Run a pick metod to check what the cursor is abowe.
const pick: PickResult = eventData.twinfinity.pick(true);
// If a Icon is picked.
if (pick.type === PickResultType.Icon) {
const pickedIcon = pick.object;
console.log(pickedIcon);
}
});
The icon index in the icon texture atlas. Fist icon has iconId 0.
ReadonlyidYour own string id.
Whether Icon can be found in a pick operation or not. Defaults to true.
Set the scale size of the icon 0-N. If the size is 0.0 the icon is invisible. If it is 1, iconMaxSize of IconHandler.setIconAtlas is unscaled.
The styleId selects a icon style. First style has styleId 0.
Defaults to true
Color of icon. If alpha is zero the icon will not be rendered.
true if occluded, otherwise false. Only valid if
IconHandler.occlusionCullingInterval >= 0.
Otherwise it will always be false.
IconHandler this Icon is attached to. See IconHandler.attach and IconHandler.detach.
Parent IconHandler. undefined Icon as not yet been attached to a IconHandler.
Position of icon in world space.
Detach icon from its IconHandler if it is attached.
true if icon was detached. Otherwise false. Happens when icon has no IconHandler.
Perform intersection test against icon using a ray.
Ray to pick with
Intersection or empty array if no intersection
Creates a icon to use in 3D. The icon need to be attached to a IconHandler to be renderd.