threejs全景视频，陀螺仪和手控问题，不兼容

<!DOCTYPE html>

<html lang="en">

	<head>

		<title>three.js webgl - controls - deviceorientation</title>

		<meta charset="utf-8">

		<meta name="viewport" content="user-scalable=no, initial-scale=1">

		<style>

			body {

				margin: 0px;

				background-color: #000000;

				overflow: hidden;

			}



			#info {

				position: absolute;

				top: 0px; width: 100%;

				color: #ffffff;

				padding: 5px;

				font-family:Monospace;

				font-size:13px;

				font-weight: bold;

				text-align:center;

			}



			a {

				color: #ff8800;

			}

		</style>

	</head>

	<body>



		<div id="container"></div>





		<script src="build/three.js"></script>

		<script src="build/DeviceOrientationControls.js"></script>



		<script>



			var container, camera, scene, renderer, controls;



			init();

			animate();



				var lon = 0, onMouseDownLon = 0,

				lat = 0, onMouseDownLat = 0,

				phi = 0,distance = 50;

				

			function init() {

				

				container = document.getElementById( 'container' );



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

				camera.target = new THREE.Vector3( 0, 0, 0 );



				controls = new THREE.DeviceOrientationControls( camera );



				scene = new THREE.Scene();



				 var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );

					// invert the geometry on the x-axis so that all of the faces point inward

					geometry.scale( - 1, 1, 1 );

					var video = document.createElement( 'video' );

					video.crossOrigin = 'anonymous';

					video.width = 640;

					video.height = 360;

					video.loop = true;

					video.muted = true;

					video.src = '[www.vrhd8.com]changchengzhimei.mp4';

					video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );

					video.play();



					var texture = new THREE.VideoTexture( video );

					texture.minFilter = THREE.LinearFilter;

					texture.format = THREE.RGBFormat;



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



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



				scene.add( mesh );



				/* var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );

				var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );

				var helper = new THREE.Mesh( helperGeometry, helperMaterial );

				scene.add( helper ); */



				//



				renderer = new THREE.WebGLRenderer();

				renderer.setPixelRatio( window.devicePixelRatio );

				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );



				//

				document.addEventListener( 'touchstart',onDocumentTouchStart, false );

    			document.addEventListener( 'touchmove',onDocumentTouchMove, false );

    			document.addEventListener("touchend", ontouchend, false);

				window.addEventListener( 'resize', onWindowResize, false );





			}

			

			function onDocumentTouchStart( event ) {

				event.preventDefault();

			    var touch = event.touches[0];

			    touchX = touch.screenX;

			    touchY = touch.screenY;

			   }

			

			function onDocumentTouchMove( event ) {

				//debugger

				 event.preventDefault();

				    var touch = event.touches[0];

				    lon -= (touch.screenX - touchX) * 0.1;

				    lat += (touch.screenY - touchY) * 0.1;

				    console.log(lon+"=="+lat);

				   	touchX = touch.screenX;

				    touchY = touch.screenY; 

			   }

			

			function ontouchend(){

				

			}

			

			function animate(math) {

				window.requestAnimationFrame( animate );

				update();

				camera.position.x				

				controls.update(camera.rotation.x,camera.rotation.y,camera.rotation.z);

				renderer.render( scene, camera );



			}

			

			

			function update() {

				lat = Math.max( - 85, Math.min( 85, lat ) );

				phi = THREE.Math.degToRad( 90 - lat );

				theta = THREE.Math.degToRad( lon );

				camera.position.x = distance * Math.sin( phi ) * Math.cos( theta );

				camera.position.y = distance * Math.cos( phi );

				camera.position.z = distance * Math.sin( phi ) * Math.sin( theta );

				camera.lookAt( camera.target );

				renderer.render( scene, camera );

			}

			

			

			function onWindowResize() {



				camera.aspect = window.innerWidth / window.innerHeight;

				camera.updateProjectionMatrix();



				renderer.setSize( window.innerWidth, window.innerHeight );



			}



		</script>

	</body>

</html>

/**

 * @author richt / http://richt.me

 * @author WestLangley / http://github.com/WestLangley

 *

 * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)

 */



THREE.DeviceOrientationControls = function ( object ) {



	var scope = this;



	this.object = object;

	this.object.rotation.reorder( 'YXZ' );



	this.enabled = true;



	this.deviceOrientation = {};

	this.screenOrientation = 0;



	this.alphaOffset = 0; // radians



	var onDeviceOrientationChangeEvent = function ( event ) {



		scope.deviceOrientation = event;



	};



	var onScreenOrientationChangeEvent = function () {



		scope.screenOrientation = window.orientation || 0;



	};



	// The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''



	var setObjectQuaternion = function () {



		

		var zee = new THREE.Vector3( 0, 0, 0 );



		var euler = new THREE.Euler();



		var q0 = new THREE.Quaternion();



		var q1 = new THREE.Quaternion( -Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis



		return function ( quaternion, alpha, beta, gamma, orient ) {



			euler.set( beta, alpha, - gamma, 'YXZ' ); // 'ZXY' for the device, but 'YXZ' for us



			quaternion.setFromEuler( euler ); // orient the device



			quaternion.multiply( q1 ); // camera looks out the back of the device, not the top



			quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) ); // adjust for screen orientation



		};



	}();



	this.connect = function () {



		onScreenOrientationChangeEvent(); // run once on load



		window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent, false );

		window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );



		scope.enabled = true;



	};



	this.disconnect = function () {



		window.removeEventListener( 'orientationchange', onScreenOrientationChangeEvent, false );

		window.removeEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );



		scope.enabled = false;



	};



	this.update = function (a,b,c,judge) {

		

		

		//console.log("a="+a+"b="+b+"c="+c);

		if ( scope.enabled === false ) return;



		var device = scope.deviceOrientation;



		if ( device ) {

				//可左右

				var alpha = device.alpha ? THREE.Math.degToRad( device.alpha ) + scope.alphaOffset +0: 0; // Z	Roll



				var beta = device.beta ? THREE.Math.degToRad( device.beta )+a : 0; // X'	Pitch



				var gamma = device.gamma ? THREE.Math.degToRad( device.gamma )+b : b; // Y	Yaw



				var orient = scope.screenOrientation ? THREE.Math.degToRad( scope.screenOrientation ) : 0; // O



				setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );

				//可上下

				/*var alpha = device.alpha ? THREE.Math.degToRad( device.alpha ) + scope.alphaOffset +c: c; // Z	Roll



				var beta = device.beta ? THREE.Math.degToRad( device.beta )+a : a; // X'	Pitch



				var gamma = device.gamma ? THREE.Math.degToRad( device.gamma )+0 : 0; // Y	Yaw



				var orient = scope.screenOrientation ? THREE.Math.degToRad( scope.screenOrientation ) : 0; // O



				setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );*/

			}

			

			

			



	};



	this.dispose = function () {



		scope.disconnect();



	};



	this.connect();



};