News • Examples • Documentation • Download • Buy • Forum • Contact


Beacons
3D hotspots
Animated, floating and more

by Virtual Tuur | Arthur van den Enk

Description

A 'simple', basic plugin with some small functionality, but it can also be powerfull in many cases.
I started it to have 'floating 3d hotspots' that i can animate a bit, as you can see in the first three examples at the bottom. Later in the process i came to VR and 3D environments..and multiple materials.
Of course there could be much more possible, but i decided to stop the development of this here, for now.
Keep in mind that most animations are very basic, like blinking between the material color and another color in a certain time, possible for each material.
But you also can tween colors as seen in example 4. For more complex animations you can do that in Blender (or another 3d software) or custom code it yourself.

Simple, and possible floating, 3d hotspots that can have multiple, manipulable and animatable materials.
A default hotspot (obj/mtl), and its Blend file are included, but you can also make your own 3d models and assign multiple materials to be animated.
We use obj/mtl because it seems that renders better with the opacity. The package includes various examples. For example: different kinds of style, animations, material change, 3d transitions, 3D etc.
Besides the licensed 3D version there are also some opensource 2D/flat examples.
The 'floating' hotspots part of the plugin is designed to be used in 'normal' 360˚ pano tours. It also works in VR and 3D/Splats but in a different way; not floating but just a 3d position. See the included examples.

The examples on this page are not included in the package!
The plugin (3d version) uses the threejs_krpanoplugin.js. The minimal Krpano version for that is 1.22

Beacons version 1.0 / 2026-01-14 - Virual Tuur

Table of Contents

Add it to your project

The way to add it to your project: 
<plugin api="threejs" 
        keep="true"
        url="%VIEWER%/plugins/threejs_krpanoplugin.js"  />

<include url="code/beacons.xml"  />


In beacons.xml you'll find the plugin being added. The full plugin and it's settings:

Plugin Attributes

<plugin name="beacons" keep="true" 
        url="%VIEWER%/beacons/beacons.js"
        preload="true"
        key="***YOUR LICENSE KEY***"
        
        radius="0.2"
        y_offset="9"
        
        beacons_radius_offset="40"
        beacons_y_offset="0.15"
        beacons_scale="1.5"
        beacons_height="3"

        vlookat_hide="-10"
        vlookat_show="0"

        show_slow="true"
        show_delay="0.8"
        show_speed="0.6"

        bvrdepth="0"
        bvrty="40"
        bvrscalexmulfactor="3"
        bvrscaleymulfactor="3"
        bvrscalezmulfactor="3"

        //MATERIALS

/>


Besides the plugin, in the beacons.xml you could also find some code examples for multiple materials, a threejslight hotspot (Sun), important system settings, a VR alternative and some beacons styles.

  • key
    • The license key you'll recieve a.s.a.p. when you buy the plugin.
  • radius
    • Radius of the whole hotspot system. Please understand that a 'center piece' is in the make.
    • default=0.2
  • beacons_radius_offset
    • Offset of the radius of the 'system'.
    • default=40
  • beacons_y_offset
    • Y offset
    • default=9
  • beacons_scale
    • The scale of the hotspot
    • default=1.5
  • beacons_height
    • The height of the hotspot
    • default=3
  • vlookat_hide
    • At what vlookat should the hotspot be fully invisible when looking up.
    • default=-10
  • vlookat_show
    • At what vlookat should the hotspot be fully visible when looking up.
    • default=0
  • show_slow
    • Delay the appearance of the hotspot(s) when loading a scene.
    • default=true
  • show_delay
    • The delay of showing the hotspot(s)
    • default=0.8
  • show_speed
    • The speed of showing the hotspot(s)
    • default=0.6
  • bvrdepth
    • the hotspots depth when in vr mode
    • default=0
  • bvrty
    • the hotspots ty when in vr mode
    • default=40
  • bvrscalexmulfactor
    • the hotspot scalex multiply factor when in vr mode
    • default=3
  • bvrscaleymulfactor
    • the hotspot scaley multiply factor when in vr mode
    • default=3
  • bvrscalezmulfactor
    • the hotspot scalez multiply factor when in vr mode
    • default=3

Materials

You need to define materials for your 3d hotspots. This needs to be done in the plugin, like:
<plugin name="beacons" keep="true" 
        url="%VIEWER%/beacons/beacons.js"
        preload="true"
        key="***YOUR LICENSE KEY***"
        
        radius="0.2"
        y_offset="9"
        
        ..your settings

        
        Materials.. for example:
        
        material_count="2"

        material_1_name="chevron"
        material_1_color="0x000000"
        material_1_opacity="0.6"

        material_2_name="disk"
        material_2_color="0xffffff"
        material_2_opacity="0.5"
        

        
        />
  • material_count
    • The amount of materials your 3d models, together, have, or at least, that you want to use.
      Keep in mind that a 'material' in the model can have been assigned to multiple names.
  • material_1_name
    • The name of material 1.
  • material_1_color
    • The color of material 1.
  • material_1_opacity
    • The opacity of material 1.


You can overwrite these vallues in the hotspot it self.
For example: 
<hotspot name="hs1" style="beacons" ath="30" onclick="DoScene(bla,*ath)" m1c="0x00ff00"  m2c="0xffff00" />

m1c="0x00ff00" means the color of material 1 for this hotspot is set to green.
m2c="0xffff00" means the color of material 2 for this hotspot is set to yellow.

These are not 'dynamic', as in 'onchange' or onclick="m2c = 0xff0000;" !
You can change the material though, with a specific action call, like: onover="BeaconChange(*name,disk,0xffffff);"

  • m1c
    • The color of material 1
  • m7o
    • The opacity of material 7




Plugin Actions

The folowing plugin actions are available:

  • hidebeacons
    Hide the hotspots in the current scene.
    call: HideBeacons();
  • showbeacons
    Show the hotspots in the current scene.
    call: ShowBeacons();
  • beaconchange
    Change the looks of the hotspot on demand.
    call: BeaconChange(hotspot name, material name ,color);
    like: onover="BeaconChange(*name,disk,0xffffff);"
  • changematcolor
    Change the looks of the hotspot on demand.
    Same as BeaconChange, but with opacity as well. call: ChangeMatColor(hotspot name, material name ,color, opacity);
    like: onover="ChangeMatColor(*name,disk,0xffffff,0.3);"
  • beaconanimate
    Animate the hotspot on demand.
    call: BeaconAnimate(scene name, hotspot name, interval in miliseconds, material name, material color);
    like: nexttick( BeaconAnimate(*xml.scene, *name, 300, disk, 0x336699); );
  • beaconanimationstop
    Stop the animation of the hotspot on demand.
    call: BeaconAnimationStop(hotspot name);
    like: onover="BeaconAnimationStop(*name)"
  • beaconanimationstopmaterial
    Stop the animation of a material of the hotspot on demand.
    call: BeaconAnimationStopMaterial(hotspot name, material name);
    like: onover="BeaconAnimationStopMaterial(*name, disk)"
  • stopallbeaconanimations
    Stop the animation of all beacon hotspots.
    call: StopAllBeaconAnimations();
    like: onover="StopAllBeaconAnimations()"
  • dobeaconmaterial
    Change the hotspot.
    call: dobeaconmaterial(name, mat, opacity, color, emissive);
    like:
    onclick="tween(color1|color2, 0x336699|0xff9900, 2,,DoScene(scene_schip, *ath));"
    onloaded="onchange(color1, dobeaconmaterial('hs1','disk*',0.5,*color1));onchange(color2, dobeaconmaterial('hs1','chevron*',0.5,*color2))"
  • beaconhide
    hide the beacon slowly
    IMPORTANT: The dimmer of the hotspot must be set to false
    call: BeaconHide(hotspot name, time);
    like: onclick="BeaconHide(*name, 2)"
  • beaconshow
    show the beacon slowly
    IMPORTANT: The dimmer of the hotspot must be set to false
    call: BeaconShow(hotspot name, time);
    | like: onclick="BeaconShow(*name, 2)"
  • dimmer
    if you want the hotspot not to fade out when looking up, set the hotspot dimmer to false.
    Like: 
    <hotspot name="hs1" style="beacons|red" ... dimmer="false" .. />
  • floating
    If a beacon hotspot has floating="false" then you can make it act like a normal hotspot in a normal 360 environment.
  • showslow
    in the plugin you can set the global show_slow to true or false. In the hotspot itself you can overrride this setting with showslow = true/false.
    Like: 
    <hotspot name="hs1" style="beacons|red" ... showslow="false" .. />


    • There are also beacon3d and beaconvr settings.
    If your scene is a 3d scene, set in the onstart 'beacon3d' to true.
    When entering VR there is the 'beaconvr' setting being set to true to make an alternative possible.
    Find this in the examples in the beacons.xml.

Important Settings

In the beacons.xml there are the folowing, important, system settings:
<events name="beacon" keep="true" onnewscene="image.objectsize = 0;" />
and
< view oz="30" />


The VR alternative / switch can be found in the example package.

Buy

The plugin package will cost €39,-
You wil get:
- The 3D beacons plugin, licensed to your krpano license name, and 14 simple examples.
- A Blend file (for Blender) with a 3d hotspot as an example.
- The opensource, not licensed, 2D version and 5 simple examples.

You can order the Beacon Package HERE

Examples

CLICK TO VIEW EXAMPLE 1

In these old panos (2011) I show the most simple and basic use of the plugin.
This example can work also in VR but i left it out here.
View example 1 in your browser HERE



CLICK TO VIEW EXAMPLE 2

In this example we use it for 'trajects'. Select a traject, and perhaps close the map. The hotspot to the next point of the traject is blinking in the 'traject color'. The 2 other hotspots are the two scenes closest without being part of the traject and without being to close to eachother. These are only visible when in a scene that is part of a traject.
Also here most panos are really old.
View example 2 in your browser (also best when on mobile) HERE.



CLICK TO VIEW EXAMPLE 3

In this example the arrows on the hotspots, except on the first one, blink onover. Blinking red means you have not visited that 'target' pano before, blinking blue means you have seen that scene already.
There is also a splat scene involved with two hotspots. The splat is taken very quickly, windy and restless last summer with less than 90 pictures. The size, though, is 32 mb, and i didn't put a loader on it.. so maybe be patient a bit
This example can work also in VR but i left it out here.
View example 3 in your browser HERE



CLICK TO VIEW EXAMPLE 4

In this example i use another 3d model. The texts on the top 2 models are sloppy placed text type hotspots. Each model hotspot has it's own animation.
The top 2 models have 4 materials: outside, ouside1, outside2, inside.
The hotspot/model at the top blinks, inside and outside, between some red and green colors.
The middel one, outside, tweens from white to a yellow and back.. The inside between a yellow and black.
The bottom model has 10 materials...
View example 4 in your browser HERE

Forum discussion thread

If you have questions or suggestions or did find a bug, please let me know in the forum thread.

krpano Forum Discussion Thread

Disclaimer

This plugin is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will the author of the plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not the plugin author have been advised of the possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event the plugin author will have no liability arising out of this agreement.