CodePen view

Change the view in realtime, going to Rectilinear to Little Planet, without stopping the playing video and without changing the orientation of the camera.

configuration.json

{
    "story":
    {
        "uid": "view-story",
        "name": "Change View Story",
        "slug": "view-story",
        "description": "This is a demonstration of the view changes",
        "default": "scene-0",

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

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

                    "source":
                    {
                        "format": "equi",
                        "levels": [
                            { "url": "720p_HD.mp4" },
                            { "url": "1080p_HD.mp4" }
                        ]
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 1
                    }
                },

                "view":
                {
                    "type": "GoPro"
                },

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

                    "fov":
                    {
                        "default": 220
                    }
                }
            }
        ]
    },

    "actions":
    [
        {
            "uid": "action-view-recti",
            "target": "viewer.view",

            "property":
            {
                "name": "type",
                "value": "rectilinear"
            }
        },

        {
            "uid": "action-camera-fov-recti",
            "target": "viewer.camera",

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

        {
            "uid": "action-view-gopro",
            "target": "viewer.view",

            "property":
            {
                "name": "type",
                "value": "gopro"
            }
        },

        {
            "uid": "action-camera-fov-gopro",
            "target": "viewer.camera",

            "method":
            {
                "name": "lookAt",
                "args": [null, -90, null]
            }
        },

        {
            "uid": "action-view-flat",
            "target": "viewer.view",

            "property":
            {
                "name": "type",
                "value": "flat"
            }
        },

        {
            "uid": "action-camera-fov-flat",
            "target": "viewer.camera",

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

        {
            "uid": "action-view-flat-repeatX",
            "target": "viewer.view.current",

            "property":
            {
                "name": "repeatX",
                "value": true
            }
        }
    ],

    "plugins":
    {
        "prefix": "../../plugins/",

        "engines":
        [
            {
                "uid": "org.forgejs.simplebutton",
                "url": "SimpleButton/"
            }
        ],

        "instances":
        [
            {
                "uid": "simplebutton-recti",
                "engine": "org.forgejs.simplebutton",
                "enabled": true,

                "options":
                {
                    "bottom": 10,
                    "right": 10,
                    "width": 100,
                    "height": 50,
                    "value": "Rectilinear"
                },

                "events":
                {
                    "onClick": ["action-view-recti", "action-camera-fov-recti"]
                }
            },

            {
                "uid": "simplebutton-planet",
                "engine": "org.forgejs.simplebutton",
                "enabled": true,

                "options":
                {
                    "bottom": 10,
                    "right": 110,
                    "width": 100,
                    "height": 50,
                    "value": "Little Planet"
                },

                "events":
                {
                    "onClick": ["action-view-gopro", "action-camera-fov-gopro"]
                }
            },

            {
                "uid": "simplebutton-flat",
                "engine": "org.forgejs.simplebutton",
                "enabled": true,

                "options":
                {
                    "bottom": 10,
                    "right": 220,
                    "width": 100,
                    "height": 50,
                    "value": "Flat"
                },

                "events":
                {
                    "onClick": ["action-view-flat", "action-camera-fov-flat", "action-view-flat-repeatX"]
                }
            }
        ]
    }
}

Back to samples

3rd Jan 2017