Merge remote-tracking branch 'possan/oculuscontrol' into dev

fc618d0f · Mr.doob · 66c3e140 · d7349beb · fc618d0f · fc618d0f
隐藏空白更改
内联并排

Showing with 227 addition and 0 deletion

examples/js/controls/OculusControls.js examples/js/controls/OculusControls.js +65 -0

examples/misc_controls_oculusrift.html examples/misc_controls_oculusrift.html +162 -0

未找到文件。
--- a/examples/js/controls/OculusControls.js
+++ b/examples/js/controls/OculusControls.js
+/**
+ * @author possan / http://possan.se/
+ *
+ * Oculus headtracking control
+ * - use together with the oculus-rest project to get headtracking
+ *   coordinates from the rift: http://github.com/possan/oculus-rest
+ */
+
+THREE.OculusControls = function ( object ) {
+	this.object = object;
+	this.target = new THREE.Vector3( 0, 0, 0 );
+
+	this.headquat = new THREE.Quaternion();
+	this.freeze = false;
+
+	this.object.useQuaternion = true;
+
+	this.loadAjaxJSON = function ( url, callback ) {
+		var xhr = new XMLHttpRequest();
+		xhr.onreadystatechange = function () {
+			if ( xhr.readyState === xhr.DONE ) {
+				if ( xhr.status === 200 || xhr.status === 0 ) {
+					if ( xhr.responseText ) {
+						var json = JSON.parse( xhr.responseText );
+						callback( json );
+					}
+				}
+			}
+		};
+		xhr.open( "GET", url, true );
+		xhr.withCredentials = false;
+		xhr.send( null );
+	};
+
+	this.gotCoordinates = function( r ) {
+		this.headquat.set(r.quat.x, r.quat.y, r.quat.z, r.quat.w);
+		this.queuePoll();
+	}
+
+	this.pollOnce = function() {
+		this.loadAjaxJSON('http://localhost:50000', bind(this, this.gotCoordinates));
+	}
+
+	this.queuePoll = function() {
+		setTimeout(bind(this, this.pollOnce), 10);
+	}
+
+	this.update = function( delta ) {
+		if ( this.freeze ) {
+			return;
+		}
+
+		this.object.quaternion.multiply(this.headquat);
+	};
+
+	function bind( scope, fn ) {
+		return function () {
+			fn.apply( scope, arguments );
+		};
+	};
+
+	this.connect = function() {
+		this.queuePoll();
+	};
+};
--- a/examples/misc_controls_oculusrift.html
+++ b/examples/misc_controls_oculusrift.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - controls - oculus rift</title>
+		<meta charset="utf-8">
+		<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> - headtracking demo for oculus rift. requires <a href="https://github.com/possan/oculus-rest/" target="_blank">oculus-rest</a> to get headtracking coordinates working.<br />
+			(left click: forward, a/s/w/d/r/f: move, h: hide text)
+		</div>
+
+		<script src="../build/three.min.js"></script>
+		<script src="js/ImprovedNoise.js"></script>
+		<script src="js/effects/OculusRiftEffect.js"></script>
+		<script src="js/controls/FirstPersonControls.js"></script>
+		<script src="js/controls/OculusControls.js"></script>
+
+		<script>
+
+			var camera, scene, renderer;
+			var realcamera;
+			var guiVisible = true;
+
+			var mesh, effect, controls, oculuscontrol;
+
+			var meshes = [];
+			var meshparent = [];
+			var meshparent2 = [];
+
+			var cols = 50;
+			var rows = 30;
+			var tot = cols * rows;
+			var clock = new THREE.Clock();
+			var perlin;
+			init();
+			animate();
+
+
+			function init() {
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				perlin = new ImprovedNoise();
+
+				camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera.useQuaternion = true;
+				camera.position.x = 200;
+				camera.position.y = 250;
+				camera.position.z = -200;
+
+				scene = new THREE.Scene();
+
+				effect = new THREE.OculusRiftEffect( renderer, {worldScale: 1} );
+				effect.setSize( window.innerWidth, window.innerHeight );
+
+				controls = new THREE.FirstPersonControls( camera );
+				controls.movementSpeed = 4000;
+				controls.lookSpeed = 3.0;
+				controls.lookVertical = true;
+
+				oculuscontrol = new THREE.OculusControls( camera );
+
+				document.body.appendChild( renderer.domElement );
+
+				var	hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
+				hemiLight.color.setHSL( 0.6, 1, 0.6 );
+				hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
+				hemiLight.position.set( 0, 500, 0 );
+				scene.add( hemiLight );
+
+				var geometry = new THREE.CubeGeometry( 100, 100, 200 );
+
+				var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
+				texture.anisotropy = renderer.getMaxAnisotropy();
+
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, shading: THREE.FlatShading, map: texture } );
+					
+				for (var i=0; i<tot; i++) {
+
+					meshparent2[i] = new THREE.Object3D();
+					scene.add( meshparent2[i] );
+
+					meshparent[i] = new THREE.Object3D();
+					meshparent[i].position.y = 50;
+					meshparent[i].position.x = -50;
+					meshparent2[i].add( meshparent[i] );
+
+					mesh = new THREE.Mesh( geometry, material );
+					meshparent[i].add( mesh );
+					meshes.push(mesh);
+
+				}
+				window.addEventListener( 'resize', onWindowResize, false );
+				document.addEventListener('keydown', keyPressed, false);
+
+				oculuscontrol.connect();
+			}
+
+			function onWindowResize() {
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				realcamera.aspect = window.innerWidth / window.innerHeight;
+				realcamera.updateProjectionMatrix();
+				effect.setSize( window.innerWidth, window.innerHeight );
+				controls.handleResize();
+			}
+
+			function keyPressed(event) {
+				if (event.keyCode === 72) { // H
+					guiVisible = !guiVisible;
+					document.getElementById('info').style.display = guiVisible ? "block" : "none";
+				}
+			}
+
+			function animate() {
+				requestAnimationFrame( animate );
+
+				var t = clock.getElapsedTime();
+
+				for (var i=0; i<meshes.length; i++) {
+					var c = Math.floor(i % cols);
+					var r = Math.floor(i / cols);
+					meshparent2[i].rotation.y = (c * 3.142 * 2 / cols);
+					meshparent[i].rotation.x = ((r+10) * 3.142 * 2 / (rows+20));
+					meshes[i].position.z = 1400 - 1350 * perlin.noise(c*8/cols,r*8/rows,t/2);
+				}
+
+				controls.update( clock.getDelta() );
+				oculuscontrol.update( clock.getDelta() );
+				
+				effect.render( scene, camera );
+			}
+
+		</script>
+
+	</body>
+</html>