yanwsh / videojs-panorama

a plugin for videojs run a full 360 degree panorama video.
http://yanwsh.github.io/videojs-panorama/
Other
483 stars 160 forks source link

Top side image may be left side and down side may be right in 3603D top and bottom. #137

Open tkmn0 opened 6 years ago

tkmn0 commented 6 years ago

This is android chrome with videojs-panorama. screenshot_20171018-103448

This is ios with the official Insta 360 pro App. image uploaded from ios

And this is a frame of original video that is .m3u8 from Insta360 pro.

screenshot_m3u8

I think we can change the part of changing uv mapping of sphereL and sphereR.

I mean, we cann change this part in "/src/scripts/lib/ThreeCanvas.js",

        var uvsL = geometryL.attributes.uv.array;
        var normalsL = geometryL.attributes.normal.array;
        for ( var i = 0; i < normalsL.length / 3; i ++ ) {
            uvsL[ i * 2 + 1 ] = uvsL[ i * 2 + 1 ] / 2;
        }

        var uvsR = geometryR.attributes.uv.array;
        var normalsR = geometryR.attributes.normal.array;
        for ( var i = 0; i < normalsR.length / 3; i ++ ) {
            uvsR[ i * 2 + 1 ] = uvsR[ i * 2 + 1 ] / 2 + 0.5;
        }

to

        var uvsL = geometryL.attributes.uv.array;
        var normalsL = geometryL.attributes.normal.array;
        for ( var i = 0; i < normalsL.length / 3; i ++ ) {
           uvsL[ i * 2 + 1 ] = uvsL[ i * 2 + 1 ] / 2 + 0.5;
        }

        var uvsR = geometryR.attributes.uv.array;
        var normalsR = geometryR.attributes.normal.array;
        for ( var i = 0; i < normalsR.length / 3; i ++ ) {
            uvsR[ i * 2 + 1 ] = uvsR[ i * 2 + 1 ] / 2;
        }

This is the case of camera the names Insta 360 pro (https://www.insta360.com/product/insta360-pro/?inspm=77c1c2.1a128e.0.0)

Regards.