-180 0 +180
0˚ frame 30

# 360˚ slider hotspot tracking (not IE11)

This is an experiment to test one feature: tracking hotspots in a 360˚ slider without constant 3d maths calculations or tracking the hotspots for every frame. In other words - how to make 360˚ hotspots maintainable in a sane and predictable way, while being able to adjust perspective (field of view) and eye height.

The box is only a temporary respresentation of a "flickbook" of 60 images, that swap in and out as the slider moves around (eg 360 slider ). The box just makes it easier to visualize and adjust the perspective variables. I'll post some code on github once I've married up the image loading, spinning, hotspot tracking and hotspot activation.

The hotspots are a JSON array of objects that have an X, Y and Z component, as well as the frame number where the hotspot should first appear and the last.

This version only works for browsers that support `CSS 3d transforms` , and `transform-style: preserve-3d` . In essence it's built as if the world was sane, but IE10/11 only partially support this standard - here's a solution for IE10/11 . IE9 does not supports 3d transforms and will only display the hotspots for the default frame at page load.

`transform-style: preserve-3d` is needed for two reasons, firstly to allow us to make the spin logical - you spin the model and everything inherits that angle (much easier than tracking the angle of every element). And secondly so that the hotspots can be rotated to face the user at every angle.