Item Arrows and Highlight

Examples https://app.learnbrite.com/dashboard/spaces/visit/spcdf841eca017988f8957661

Need to add this to the metadata field of the 3d item

{
"highlight": {
"enabled": true,
"traverse": true,
"color": "#ff0000"
}
}

{"highlight":{"enabled":true,"traverse":true,"color":"#ff0000"}}

highlight

Parameters

enabled – true/false

enabledOnHover – true/false – Highlight on pointer over when onclick action exists – default false

color – Hex color code of color shading to apply to the object

optional
default #ffffff

traverse: true/false – useful if the object has children (normally does)

optional

To highlight the object only on hover

{
"highlight": {
"enabledOnHover": true,
"traverse": true,
"color": "#ff0000"
}
}

{"highlight":{"enabledOnHover":true,"traverse":true,"color":"#ff0000"}}

enabledOnHover – mouse over or VR controller over the object will highlight it

IMPORTANT NOTE: enabledOnHover will ONLY work if there is also an OnClick action for the object.

In ChatMapper add this code to a node:

var item = LB.Utils.findItem("thisIsMyItemName");
var color = {r: 10, g: 0, b: 0};
LB.Effects.addEffect(item, "highlight", {color: color});
LB.Effects.setEffect(item, "highlight", true)

thisIsMyItemName is the name of your item

pointingArrow

To add an arrow pointing to an item (wip)

{
"highlight": {
"arrowUntilClicked": true
}
}

In ChatMapper add this code to a node:

var item = LB.Utils.findItem("thisIsMyItemName");

LB.Effects.setEffect(item,"pointingArrow",true,{"arrowUntilClicked":true})

thisIsMyItemName is the name of your item

Using this technique its possible to add an arrow to a hotspot or bot feet (Prior to version 3.1 hotspots don’t have a metadata field)

Eg.

var item = LB.Utils.findItem("thisIsMyHotspotName");

LB.Effects.setEffect(item,"pointingArrow",true,{"arrowUntilClicked":true})

thisIsMyHotspotName is the name of your hotspot

Highlighting an item script

var item = LB.Utils.findItem("thisIsMyItemName");
var color = {r: 10, g: 0, b: 0};
LB.Effects.addEffect(item, "highlight", {color: color});

Troubleshooting

The highlight effects work by overriding the materials in the item. If the materials are not supported then no highlight effect will appear.

Be sure when using hover highlight that the item has an onclick action or the highlight will not be activated. For testing purposes you can use the doNothing action in the onclick field.

{"action":"doNothing"}