CodePen view

This sample demonstrates the usage of hotspots DOM. Theses are HTML elements styled with CSS but dynamically positioned on the screen depending on the camera orientation.

configuration.json

{
    "story":
    {
        "uid": "hotspots-DOM-story",
        "name": "Hotspots DOM Story",
        "slug": "hotspots-dom-story",
        "description": "This is sample of DOM hotspots",
        "default": "scene-0",

        "scenes":
        [
            {
                "uid": "scene-0",
                "name": "First scene",
                "slug": "first-scene",
                "description": "This is the first and only scene",
                "background": "#202040",

                "media":
                {
                    "uid": "media-0",
                    "type": "grid",

                    "options":
                    {
                        "color": "#7F7FFF"
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-dom-one",
                        "interactive": true,
                        "type": "dom",

                        "dom":
                        {
                            "id": "hotspot-one",
                            "width": "5em",
                            "height": "5em",
                            "color": "transparent",
                            "index": 1,
                            "class": [ "media-style__primary", "content-style__primary" ]
                        },

                        "transform":
                        {
                            "position": {
                                "x": -100,
                                "y": 100
                            }
                        }
                    },

                    {
                        "uid": "hotspot-dom-two",
                        "interactive": true,
                        "type": "dom",

                        "dom":
                        {
                            "id": "hotspot-two",
                            "width": "5em",
                            "height": "5em",
                            "color": "transparent",
                            "index": 2,
                            "class": [ "media-style__pin", "content-style__above"]
                        },

                        "transform":
                        {
                            "position": {
                                "x": 100,
                                "y": 100
                            }
                        }
                    },

                    {
                        "uid": "hotspot-dom-three",
                        "interactive": true,
                        "type": "dom",

                        "dom":
                        {
                            "id": "hotspot-three",
                            "width": "5em",
                            "height": "5em",
                            "color": "transparent",
                            "index": 3,
                            "class": [ "content-style__primary" ]
                        },

                        "transform":
                        {
                            "position": {
                                "x": 0,
                                "y": -100
                            }
                        }
                    },

                    {
                        "uid": "hotspot-dom-four",
                        "interactive": true,
                        "type": "dom",

                        "dom":
                        {
                            "id": "hotspot-four",
                            "width": "5em",
                            "height": "5em",
                            "color": "transparent",
                            "index": 4,
                            "class": [ "content-style__primary", "media-style__see-through" ]
                        },

                        "transform":
                        {
                            "position": {
                                "theta": 90,
                                "phi": 0
                            }
                        }
                    },

                    {
                        "uid": "hotspot-dom-five",
                        "interactive": true,
                        "type": "dom",

                        "dom":
                        {
                            "id": "hotspot-five",
                            "width": "5em",
                            "height": "5em",
                            "color": "transparent",
                            "index": 5,
                            "class": [ "content-style__above", "media-style__see-through", "hover-trig" ]
                        },

                        "transform":
                        {
                            "position": {
                                "theta": -90,
                                "phi": 0
                            }
                        }
                    },

                    {
                        "uid": "hotspot-dom-six",
                        "interactive": true,
                        "type": "dom",

                        "dom":
                        {
                            "id": "hotspot-six",
                            "width": "5em",
                            "height": "5em",
                            "color": "transparent",
                            "index": 6,
                            "class": [ "media-style__pin", "content-style__above", "hover-trig" ]
                        },

                        "transform":
                        {
                            "position": {
                                "theta": 160,
                                "phi": 5
                            }
                        }
                    },

                    {
                        "uid": "hotspot-dom-seven",
                        "interactive": false,
                        "cursor": "crosshair",
                        "type": "dom",

                        "dom":
                        {
                            "id": "hotspot-seven",
                            "width": "5em",
                            "height": "5em",
                            "color": "#f49a1a",
                            "index": 7
                        },

                        "transform":
                        {
                            "position": {
                                "theta": -160,
                                "phi": -25
                            }
                        }
                    }
                ]
            }
        ]
    }
}

Back to samples

3rd Oct 2017