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

qq_34103496 2018-05-07 03:29:50
全景视频,陀螺仪和手控问题,不兼容,下面是我根据官网 加载的代码。
需求是 不仅要带有陀螺仪效果 并且要可以手动拖拽来改变视角。手控后和陀螺仪视角是同步的。

以下是我的代码:
<!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();

};

求教 为什么不同步,怎么解决。
...全文
732 回复 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2018-05-07 03:29
社区公告
暂无公告