87,955
社区成员
发帖
与我相关
我的任务
分享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();
};
求教 为什么不同步，怎么解决。
...全文
请发表友善的回复…
发表回复
