naver / egjs-view360

360 integrated viewing solution
https://naver.github.io/egjs-view360/
MIT License
498 stars 91 forks source link

Automatic Fullscreen #277

Closed canado closed 5 years ago

canado commented 5 years ago

Description

This is more like a feature-request, but I would like to know if there is a way while initiating the eg.view360.panoViewer, like fullscreen:true

Thanks

panoViewer = new eg.view360.PanoViewer(gyroViewer,
            {
                image: image,
                gyroMode: eg.view360.PanoViewer.GYRO_MODE.VR,
                projectionType: "equirectangular",
                **fullscreen:true**             
            });

Steps to check or reproduce

jongmoon commented 5 years ago

It's not provided as internal functionality. But we made demo related it. Refer https://github.com/naver/egjs-view360/blob/master/demo/common/js/PanoControls.js

We made two div for normal mode and fullscreen mode. and changes panoviewer parents whenever the mode is changed.

I want following part is helpful to you.

        function changeMode(mode) {
                var rootNode = target.parentNode.removeChild(target);
                var requestFullscreen;

                if (screenfull.enabled) {
                        requestFullscreen = screenfull.isFullscreen;
                } else {
                        requestFullscreen = mode === "full";
                }

                if (requestFullscreen) {
                    fullscreenContainer.appendChild(rootNode);
                    fullscreenContainer.style.display = "block";
                } else {
                    originalContainer.insertBefore(rootNode, nextElementSibling);
                    fullscreenContainer.style.display = "none";
                }

                // resize event is not triggered.
                panoViewer.updateViewportDimensions();
        }
canado commented 5 years ago

Thank you will try to implement this

canado commented 5 years ago

I found out I only needed to use panoViewer.updateViewportDimensions({width:myWidthScreen,height:myHeightScreen});

And voila