Not working with ThreeJS 80 and above

kassemEzz commented 6 years ago

Hi. I got a basic code working for any version of THREE that is 79 or below, but I when try any version that is 80 and above I get the error "Uncaught TypeError: Cannot read property 'WebGLRenderer' of undefined". I'm using VideoJS 6.4 and videojs-panorama 1.0 beta. Here is my code

    <html lang="en">
    <head>       
        <link rel="stylesheet" type="text/css" href="video-js-6.4.0/video-js.min.css">
        <link rel="stylesheet" type="text/css" href="videojs-panorama-v1.0.0-beta/dist/videojs-panorama.min.css">
    </head>
    <body>
        <video id="vid_1" class="video-js vjs-default-skin" crossorigin="anonymous" controls>
            <source src="shark.mp4" type='video/mp4'>
        </video>

        <script src="video-js-6.4.0/video.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
        <script src="videojs-panorama-v1.0.0-beta/dist/videojs-panorama.js"></script>

        <script type="text/javascript">
            function isMobile()
            {
                .......
                return check;
            }

            (function (window, videojs)
            {
                var vidID = "vid_1";

                var player = window.player = videojs(vidID, {}, function ()
                {
                    this.play();
                    window.addEventListener('resize', function ()
                    {
                        var canvas = player.getChild('Canvas');
                        if (canvas)
                        {
                            canvas.handleResize();
                        }

                    });
                });

                var videoElement = document.getElementById(vidID);
                var width = videoElement.offsetWidth;
                var height = videoElement.offsetHeight;
                player.width(width), player.height(height);
                player.panorama({
                    clickAndDrag: false,
                    VREnable: true,
                    clickToToggle: true,
                    Notice: (isMobile()) ? 'please move your phone' : 'please use your mouse drag and drop the video',
                    ready: function ()
                    {
                        player.play();
                    }
                });
                player.on('VRModeOn', function ()
                {
                    if (!player.isFullscreen())
                        player.controlBar.fullscreenToggle.trigger('tap');
                });
            }(window, window.videojs));
        </script>
    </body>
</html>

I just wanted to check if that is a known issue with newer versions of ThreeJS or am I doing something wrong. Thanks

kassemEzz commented 6 years ago

I ended up following Zhujo's advice from this post

dkirilenko commented 4 years ago

Any workaround?

yanwsh / videojs-panorama

Not working with ThreeJS 80 and above #146