Add W3C DeviceOrientation Event controls and demo

656d0532 · richtr · 8413a860 · 656d0532 · 656d0532
Showing with 173 addition and 0 deletion

examples/js/controls/DeviceOrientationControls.js examples/js/controls/DeviceOrientationControls.js +49 -0

examples/misc_controls_deviceorientation.html examples/misc_controls_deviceorientation.html +124 -0

未找到文件。
--- a/examples/js/controls/DeviceOrientationControls.js
+++ b/examples/js/controls/DeviceOrientationControls.js
+/**
+ * @author richt / http://richt.me
+ *
+ * W3C Device Orientation control (http://www.w3.org/TR/orientation-event/)
+ */
+
+THREE.DeviceOrientationControls = function ( object ) {
+
+	this.object = object;
+
+	this.degtorad = Math.PI / 180;
+	this.freeze = true;
+
+	this.orientationData = {};
+	this.eulerRotationOrder = "ZXY";
+
+	this.registerOrientationData = function( data ) {
+		this.freeze = false;
+		this.orientationData = data;
+	};
+
+	this.update = function( delta ) {
+		if ( this.freeze ) {
+			return;
+		}
+
+		this.object.rotation.set(
+			(this.orientationData['beta'] || 0) * this.degtorad,
+			(this.orientationData['gamma'] || 0) * this.degtorad,
+			(this.orientationData['alpha'] || 0) * this.degtorad,
+			this.eulerRotationOrder
+		);
+	};
+
+	function bind( scope, fn ) {
+		return function () {
+			fn.apply( scope, arguments );
+		};
+	};
+
+	this.connect = function() {
+		window.addEventListener('deviceorientation', bind(this, this.registerOrientationData), false);
+	};
+
+	this.disconnect = function() {
+		window.removeEventListener('deviceorientation', bind(this, this.registerOrientationData), false);
+		this.freeze = true;
+	};
+};
--- a/examples/misc_controls_deviceorientation.html
+++ b/examples/misc_controls_deviceorientation.html
+<!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="info">
+			<a href="http://threejs.org" target="_blank">three.js</a> - equirectangular panorama demo with DeviceOrientation controls.
+			photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.
+		</div>
+
+		<div id="container"></div>
+
+		<script src="../build/three.min.js"></script>
+		<script src="js/controls/DeviceOrientationControls.js"></script>
+
+		<script>
+			(function() {
+				  "use strict"
+
+				  var hasWebGL = (function() {
+					    try {
+						      var canvas = document.createElement( 'canvas' );
+						      return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) );
+					    } catch( e ) {
+						      return false;
+					    }
+				  })();
+
+				  window.addEventListener('load', function() {
+
+					    var container, camera, scene, renderer, controls, geometry, mesh;
+
+					    var animate = function(){
+							controls.update();
+						        renderer.render(scene, camera);
+
+							window.requestAnimationFrame(animate);
+					    };
+
+					    container = document.getElementById( 'container' );
+
+					    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
+
+					    controls = new THREE.DeviceOrientationControls( camera );
+
+					    scene = new THREE.Scene();
+
+					    var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+					    geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );
+
+					    var material = new THREE.MeshBasicMaterial( {
+						        map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' )
+					    } );
+
+					    var mesh = new THREE.Mesh( geometry, material );
+					    mesh.rotation.x = 90;
+
+					    scene.add(mesh);
+
+					    renderer = hasWebGL ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
+					    renderer.setSize(window.innerWidth, window.innerHeight);
+					    renderer.domElement.style.position = 'absolute';
+					    renderer.domElement.style.top = 0;
+					    container.appendChild(renderer.domElement);
+
+					    var resizeWindow = function() {
+						        camera.aspect = window.innerWidth / window.innerHeight;
+						        camera.updateProjectionMatrix();
+						        renderer.setSize( window.innerWidth, window.innerHeight );
+					    };
+
+					    var setScreenOrientation = function() {
+						        window.setTimeout(function() {
+						          renderer.domElement.style['MozTransform'] =
+						            renderer.domElement.style['MsTransform'] =
+						              renderer.domElement.style['WebkitTransform'] =
+						                renderer.domElement.style['OTransform'] =
+						                  renderer.domElement.style['Transform'] =
+						                    "rotate(" + ( -window.orientation || 0 ) + "deg)";
+						        }, 200);
+					    };
+
+					    window.addEventListener('resize', resizeWindow, false);
+					    window.addEventListener('orientationchange', setScreenOrientation, false);
+
+					    setScreenOrientation();
+
+					    controls.connect();
+
+					    animate();
+
+				  }, false);
+
+			})();
+		</script>
+
+	</body>
+</html>