CodePen view

Add actions to hotspots.

configuration.json

{
    "camera":
    {
        "fov":
        {
            "default": 90,
            "min": 50,
            "max": 120
        }
    },

    "story":
    {
        "uid": "hotspots-actions-story",
        "name": "Hotspots with actions Story",
        "slug": "hotspots-actions-story",
        "description": "This is sample of hotspots actions",

        "scenes":
        [
            {
                "uid": "scene-0",
                "name": "First Scene",
                "slug": "first-scene",
                "description": "This is the first scene",

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

                    "source":
                    {
                        "format": "equi",
                        "url": "pano-0.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": 4
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-s0-0",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 0,
                                "phi": -10.5,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 80
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-1", "action-camera-0"]
                        }
                    },

                    {
                        "uid": "hotspot-s0-1",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 82,
                                "phi": -8,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": -82,
                                "z": -15
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-3", "action-camera-1"]
                        }
                    },

                    {
                        "uid": "hotspot-s0-2",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 141,
                                "phi": -8,
                                "radius": 300
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": -141
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-4", "action-camera-2"]
                        }
                    }
                ]
            },

            {
                "uid": "scene-1",
                "name": "Second scene",
                "slug": "second-scene",
                "description": "This is the second scene",

                "media":
                {
                    "uid": "media-1",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "pano-1.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": 5.5
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-s1-0",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 118,
                                "phi": -6,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": -118
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-2", "action-camera-3"]
                        }
                    },

                    {
                        "uid": "hotspot-s1-1",

                        "transform":
                        {
                            "position":
                            {
                                "theta": -179,
                                "phi": -11,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": 179
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-0", "action-camera-4"]
                        }
                    }
                ]
            },

            {
                "uid": "scene-2",
                "name": "Third Scene",
                "slug": "third-scene",
                "description": "This is the third scene",

                "media":
                {
                    "uid": "media-2",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "pano-2.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": -90
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-s2-0",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 110,
                                "phi": -8,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": -110
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-1", "action-camera-5"]
                        }
                    },

                    {
                        "uid": "hotspot-s2-1",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 2,
                                "phi": -11,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": -2
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-3", "action-camera-6"]
                        }
                    }
                ]
            },

            {
                "uid": "scene-3",
                "name": "Fourth Scene",
                "slug": "fourth-scene",
                "description": "This is the fourth scene",

                "media":
                {
                    "uid": "media-3",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "pano-3.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": 0
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-s3-0",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 5,
                                "phi": -9,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": -5
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-4", "action-camera-7"]
                        }
                    },

                    {
                        "uid": "hotspot-s3-1",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 84,
                                "phi": -25,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": -84
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-0", "action-camera-8"]
                        }
                    },

                    {
                        "uid": "hotspot-s3-2",

                        "transform":
                        {
                            "position":
                            {
                                "theta": -175,
                                "phi": -5,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 82,
                                "y": 175
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-2", "action-camera-9"]
                        }
                    }
                ]
            },

            {
                "uid": "scene-4",
                "name": "Fifth Scene",
                "slug": "fifth-scene",
                "description": "This is the fifth scene",

                "media":
                {
                    "uid": "media-4",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "pano-4.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": 0
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-s4-0",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 0,
                                "phi": -11,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": 0
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-5", "action-camera-10"]
                        }
                    },

                    {
                        "uid": "hotspot-s4-1",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 130,
                                "phi": -33,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 85,
                                "y": -130
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-0", "action-camera-11"]
                        }
                    },

                    {
                        "uid": "hotspot-s4-2",

                        "transform":
                        {
                            "position":
                            {
                                "theta": 178,
                                "phi": -8,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 82,
                                "y": -178
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-3", "action-camera-12"]
                        }
                    }
                ]
            },

            {
                "uid": "scene-5",
                "name": "Sixth Scene",
                "slug": "sixth-scene",
                "description": "This is the sixth scene",

                "media":
                {
                    "uid": "media-5",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "pano-5.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": 0
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-s5-0",

                        "transform":
                        {
                            "position":
                            {
                                "theta": -178,
                                "phi": -11,
                                "radius": 400
                            },

                            "rotation":
                            {
                                "x": 82,
                                "y": 178
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "ChevronUpCircle_white_64.png",
                            "opacity": 1
                        },

                        "events":
                        {
                            "onClick": ["action-loadscene-4", "action-camera-13"]
                        }
                    }
                ]
            }
        ]
    },

    "actions":
    [
        {
            "uid": "action-loadscene-0",
            "target": "viewer.story",

            "method":
            {
                "name": "loadScene",
                "args": ["scene-0"]
            }
        },

        {
            "uid": "action-loadscene-1",
            "target": "viewer.story",

            "method":
            {
                "name": "loadScene",
                "args": ["scene-1"]
            }
        },

        {
            "uid": "action-loadscene-2",
            "target": "viewer.story",

            "method":
            {
                "name": "loadScene",
                "args": ["scene-2"]
            }
        },

        {
            "uid": "action-loadscene-3",
            "target": "viewer.story",

            "method":
            {
                "name": "loadScene",
                "args": ["scene-3"]
            }
        },

        {
            "uid": "action-loadscene-4",
            "target": "viewer.story",

            "method":
            {
                "name": "loadScene",
                "args": ["scene-4"]
            }
        },

        {
            "uid": "action-loadscene-5",
            "target": "viewer.story",

            "method":
            {
                "name": "loadScene",
                "args": ["scene-5"]
            }
        },

        {
            "uid": "action-camera-0",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [5, 0, 0]
            }
        },

        {
            "uid": "action-camera-1",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [-96, 0, 0]
            }
        },

        {
            "uid": "action-camera-2",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [-39, 0, 0]
            }
        },

        {
            "uid": "action-camera-3",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [-70, 0, 0]
            }
        },

        {
            "uid": "action-camera-4",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [180, 0, 0]
            }
        },

        {
            "uid": "action-camera-5",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [-57.5, 0, 0]
            }
        },

        {
            "uid": "action-camera-6",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [2, 0, 0]
            }
        },

        {
            "uid": "action-camera-7",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [5, 0, 0]
            }
        },

        {
            "uid": "action-camera-8",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [-96, 0, 0]
            }
        },

        {
            "uid": "action-camera-9",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [-175, 0, 0]
            }
        },

        {
            "uid": "action-camera-10",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [0, 0, 0]
            }
        },

        {
            "uid": "action-camera-11",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [-50, 0, 0]
            }
        },

        {
            "uid": "action-camera-12",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [178, 0, 0]
            }
        },

        {
            "uid": "action-camera-13",
            "target": "viewer.renderer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [-178, 0, 0]
            }
        }
    ]
}

Back to samples

3rd Jan 2017