如何使用鱼眼投影创建360视频

时间:2016-02-29 08:56:50

标签: javascript video three.js 360-panorama

我正在尝试使用Three.js渲染来自360鱼眼投影的360视频(仅举例说明这是什么类型的投影:http://www.huwpenson.com/wp-content/uploads/2014/03/FISHEYE-15.jpg

现在,我已成功使用等角投影渲染360个视频。但我无法弄清楚如何在Three.js上设置投影类型

以下是360视频播放器的基本代码:

var container, mesh;

            container = document.getElementById( 'container' );

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
            camera.target = new THREE.Vector3( 0, 0, 0 );

            scene = new THREE.Scene();

            var geometry = new THREE.SphereGeometry( 500, 60, 40 );
            geometry.scale( - 1, 1, 1 );

            var video = document.createElement( 'video' );
            video.width = 640;
            video.height = 360;
            video.autoplay = true;
            video.loop = true;
            video.src = "textures/pano.webm";

            var texture = new THREE.VideoTexture( video );
            texture.minFilter = THREE.LinearFilter;

            var material   = new THREE.MeshBasicMaterial( { map : texture } );

            mesh = new THREE.Mesh( geometry, material );

            scene.add( mesh );

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

0 个答案:

没有答案