Skip to content

Commit 1f512a9

Browse files
mrdoobmrdoob
committedSep 26, 2012
Added Pointer Lock API example.
·
r52r51
1 parent b3f2fdc commit 1f512a9

File tree

2 files changed

+464
-0
lines changed

2 files changed

+464
-0
lines changed
 

‎examples/js/controls/PointerLockControls.js

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
var PointerLockControls = function ( camera ) {
2+
3+
var scope = this;
4+
5+
var pitchObject = new THREE.Object3D();
6+
pitchObject.add( camera );
7+
8+
var yawObject = new THREE.Object3D();
9+
yawObject.position.y = 10;
10+
yawObject.add( pitchObject );
11+
12+
var moveForward = false;
13+
var moveBackward = false;
14+
var moveLeft = false;
15+
var moveRight = false;
16+
17+
var isOnObject = false;
18+
var canJump = false;
19+
20+
var velocity = new THREE.Vector3();
21+
22+
var PI_2 = Math.PI / 2;
23+
24+
var onMouseMove = function ( event ) {
25+
26+
if ( scope.enabled === false ) return;
27+
28+
var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
29+
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
30+
31+
yawObject.rotation.y -= movementX * 0.002;
32+
pitchObject.rotation.x -= movementY * 0.002;
33+
34+
pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );
35+
36+
};
37+
38+
var onKeyDown = function ( event ) {
39+
40+
switch ( event.keyCode ) {
41+
42+
case 38: // up
43+
case 87: // w
44+
moveForward = true;
45+
break;
46+
47+
case 37: // left
48+
case 65: // a
49+
moveLeft = true; break;
50+
51+
case 40: // down
52+
case 83: // s
53+
moveBackward = true;
54+
break;
55+
56+
case 39: // right
57+
case 68: // d
58+
moveRight = true;
59+
break;
60+
61+
case 32: // space
62+
if ( canJump === true ) velocity.y += 10;
63+
canJump = false;
64+
break;
65+
66+
}
67+
68+
};
69+
70+
var onKeyUp = function ( event ) {
71+
72+
switch( event.keyCode ) {
73+
74+
case 38: // up
75+
case 87: // w
76+
moveForward = false;
77+
break;
78+
79+
case 37: // left
80+
case 65: // a
81+
moveLeft = false;
82+
break;
83+
84+
case 40: // down
85+
case 83: // a
86+
moveBackward = false;
87+
break;
88+
89+
case 39: // right
90+
case 68: // d
91+
moveRight = false;
92+
break;
93+
94+
}
95+
96+
};
97+
98+
document.addEventListener( 'mousemove', onMouseMove, false );
99+
document.addEventListener( 'keydown', onKeyDown, false );
100+
document.addEventListener( 'keyup', onKeyUp, false );
101+
102+
this.enabled = false;
103+
104+
this.getObject = function () {
105+
106+
return yawObject;
107+
108+
};
109+
110+
this.isOnObject = function ( boolean ) {
111+
112+
isOnObject = boolean;
113+
canJump = boolean;
114+
115+
};
116+
117+
this.update = function ( delta ) {
118+
119+
if ( scope.enabled === false ) return;
120+
121+
delta *= 0.1;
122+
123+
velocity.x += ( - velocity.x ) * 0.08 * delta;
124+
velocity.z += ( - velocity.z ) * 0.08 * delta;
125+
126+
velocity.y -= 0.25 * delta;
127+
128+
if ( moveForward ) velocity.z -= 0.12 * delta;
129+
if ( moveBackward ) velocity.z += 0.12 * delta;
130+
131+
if ( moveLeft ) velocity.x -= 0.12 * delta;
132+
if ( moveRight ) velocity.x += 0.12 * delta;
133+
134+
if ( isOnObject === true ) {
135+
136+
velocity.y = Math.max( 0, velocity.y );
137+
138+
}
139+
140+
yawObject.translateX( velocity.x );
141+
yawObject.translateY( velocity.y );
142+
yawObject.translateZ( velocity.z );
143+
144+
if ( yawObject.position.y < 10 ) {
145+
146+
velocity.y = 0;
147+
yawObject.position.y = 10;
148+
149+
canJump = true;
150+
151+
}
152+
153+
};
154+
155+
};

‎examples/misc_controls_pointerlock.html

+309
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>three.js - pointer lock</title>
6+
<style>
7+
html, body {
8+
height: 100%;
9+
}
10+
11+
body {
12+
background-color: #ffffff;
13+
margin: 0;
14+
overflow: hidden;
15+
font-family: arial;
16+
}
17+
18+
#blocker {
19+
20+
position: absolute;
21+
width: 100%;
22+
height: 100%;
23+
24+
background-color: rgba(0,0,0,0.5);
25+
26+
display: -webkit-box;
27+
display: -moz-box;
28+
display: box;
29+
30+
-webkit-box-orient: horizontal;
31+
-moz-box-orient: horizontal;
32+
box-orient: horizontal;
33+
34+
-webkit-box-pack: center;
35+
-moz-box-pack: center;
36+
box-pack: center;
37+
38+
-webkit-box-align: center;
39+
-moz-box-align: center;
40+
box-align: center;
41+
42+
}
43+
44+
#instructions {
45+
46+
color: #ffffff;
47+
text-align: center;
48+
49+
cursor: pointer;
50+
51+
}
52+
53+
</style>
54+
</head>
55+
<body>
56+
<script src="../build/three.min.js"></script>
57+
<script src="js/controls/PointerLockControls.js"></script>
58+
59+
<div id="blocker">
60+
61+
<div id="instructions">
62+
<span style="font-size:40px">Click to play</span>
63+
<br />
64+
(W, A, S, D = Move, SPACE = Jump, MOUSE = Look around)
65+
</div>
66+
67+
</div>
68+
69+
<script>
70+
71+
var camera, scene, renderer;
72+
var geometry, material, mesh;
73+
var controls,time = Date.now();
74+
75+
var objects = [];
76+
77+
var ray;
78+
79+
var blocker = document.getElementById( 'blocker' );
80+
var instructions = document.getElementById( 'instructions' );
81+
82+
// http://www.html5rocks.com/en/tutorials/pointerlock/intro/
83+
84+
var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
85+
86+
if ( havePointerLock ) {
87+
88+
var element = document.body;
89+
90+
var pointerlockchange = function ( event ) {
91+
92+
if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
93+
94+
controls.enabled = true;
95+
96+
blocker.style.display = 'none';
97+
98+
} else {
99+
100+
controls.enabled = false;
101+
102+
blocker.style.display = '-webkit-box';
103+
blocker.style.display = '-moz-box';
104+
blocker.style.display = 'box';
105+
106+
instructions.style.display = '';
107+
108+
}
109+
110+
}
111+
112+
var pointerlockerror = function ( event ) {
113+
114+
instructions.style.display = '';
115+
116+
}
117+
118+
// Hook pointer lock state change events
119+
document.addEventListener( 'pointerlockchange', pointerlockchange, false );
120+
document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
121+
document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );
122+
123+
document.addEventListener( 'pointerlockerror', pointerlockerror, false );
124+
document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
125+
document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );
126+
127+
instructions.addEventListener( 'click', function ( event ) {
128+
129+
instructions.style.display = 'none';
130+
131+
// Ask the browser to lock the pointer
132+
element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
133+
134+
if ( /Firefox/i.test( navigator.userAgent ) ) {
135+
136+
var fullscreenchange = function ( event ) {
137+
138+
if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {
139+
140+
document.removeEventListener( 'fullscreenchange', fullscreenchange );
141+
document.removeEventListener( 'mozfullscreenchange', fullscreenchange );
142+
143+
element.requestPointerLock();
144+
}
145+
146+
}
147+
148+
document.addEventListener( 'fullscreenchange', fullscreenchange, false );
149+
document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );
150+
151+
element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;
152+
153+
element.requestFullscreen();
154+
155+
} else {
156+
157+
element.requestPointerLock();
158+
159+
}
160+
161+
}, false );
162+
163+
} else {
164+
165+
instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
166+
167+
}
168+
169+
init();
170+
animate();
171+
172+
function init() {
173+
174+
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
175+
176+
scene = new THREE.Scene();
177+
scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
178+
179+
var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
180+
light.position.set( 1, 1, 1 );
181+
scene.add( light );
182+
183+
var light = new THREE.DirectionalLight( 0xffffff );
184+
light.position.set( -1, - 0.5, -1 );
185+
scene.add( light );
186+
187+
controls = new PointerLockControls( camera );
188+
scene.add( controls.getObject() );
189+
190+
ray = new THREE.Ray();
191+
ray.direction.set( 0, -1, 0 );
192+
193+
// floor
194+
195+
geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
196+
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
197+
198+
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
199+
200+
var vertex = geometry.vertices[ i ];
201+
vertex.x += Math.random() * 20 - 10;
202+
vertex.y += Math.random() * 2;
203+
vertex.z += Math.random() * 20 - 10;
204+
205+
}
206+
207+
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
208+
209+
var face = geometry.faces[ i ];
210+
face.vertexColors[ 0 ] = new THREE.Color().setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
211+
face.vertexColors[ 1 ] = new THREE.Color().setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
212+
face.vertexColors[ 2 ] = new THREE.Color().setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
213+
face.vertexColors[ 3 ] = new THREE.Color().setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
214+
215+
}
216+
217+
material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
218+
219+
mesh = new THREE.Mesh( geometry, material );
220+
scene.add( mesh );
221+
222+
// objects
223+
224+
geometry = new THREE.CubeGeometry( 20, 20, 20 );
225+
226+
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
227+
228+
var face = geometry.faces[ i ];
229+
face.vertexColors[ 0 ] = new THREE.Color().setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
230+
face.vertexColors[ 1 ] = new THREE.Color().setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
231+
face.vertexColors[ 2 ] = new THREE.Color().setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
232+
face.vertexColors[ 3 ] = new THREE.Color().setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
233+
234+
}
235+
236+
for ( var i = 0; i < 500; i ++ ) {
237+
238+
material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
239+
240+
var mesh = new THREE.Mesh( geometry, material );
241+
mesh.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
242+
mesh.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
243+
mesh.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
244+
scene.add( mesh );
245+
246+
material.color.setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
247+
248+
objects.push( mesh );
249+
250+
}
251+
252+
//
253+
254+
renderer = new THREE.WebGLRenderer();
255+
renderer.setSize( window.innerWidth, window.innerHeight );
256+
257+
document.body.appendChild( renderer.domElement );
258+
259+
//
260+
261+
window.addEventListener( 'resize', onWindowResize, false );
262+
263+
}
264+
265+
function onWindowResize() {
266+
267+
camera.aspect = window.innerWidth / window.innerHeight;
268+
camera.updateProjectionMatrix();
269+
270+
renderer.setSize( window.innerWidth, window.innerHeight );
271+
272+
}
273+
274+
function animate() {
275+
276+
requestAnimationFrame( animate );
277+
278+
//
279+
280+
controls.isOnObject( false );
281+
282+
ray.origin.copy( controls.getObject().position );
283+
ray.origin.y -= 10;
284+
285+
var intersections = ray.intersectObjects( objects );
286+
287+
if ( intersections.length > 0 ) {
288+
289+
var distance = intersections[ 0 ].distance;
290+
291+
if ( distance > 0 && distance < 10 ) {
292+
293+
controls.isOnObject( true );
294+
295+
}
296+
297+
}
298+
299+
controls.update( Date.now() - time );
300+
301+
renderer.render( scene, camera );
302+
303+
time = Date.now();
304+
305+
}
306+
307+
</script>
308+
</body>
309+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.