1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:EventDispatcher] →
<h1>[name]</h1>
<p class="desc">
The implementation of this class is based on the [link:https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API Pointer Lock API].
[name] is a perfect choice for first person 3D games.
</p>
<h2>Example</h2>
<p>[example:misc_controls_pointerlock misc / controls / pointerlock ]</p>
<code>
var controls = new PointerLockControls( camera, document.body );
// add event listener to show/hide a UI (e.g. the game's menu)
controls.addEventListener( 'lock', function () {
menu.style.display = 'none';
} );
controls.addEventListener( 'unlock', function () {
menu.style.display = 'block';
} );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:Camera camera]: The camera of the rendered scene.
</p>
<p>
[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Events</h2>
<h3>change</h3>
<p>
Fires when the user moves the mouse.
</p>
<h3>lock</h3>
<p>
Fires when the pointer lock status is "locked" (in other words: the mouse is captured).
</p>
<h3>unlock</h3>
<p>
Fires when the pointer lock status is "unlocked" (in other words: the mouse is not captured anymore).
</p>
<h2>Properties</h2>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
not set up new event listeners.
</p>
<h3>[property:Boolean isLocked]</h3>
<p>
Whether or not the controls are locked.
</p>
<h2>Methods</h2>
<p>See the base [page:EventDispatcher] class for common methods.</p>
<h3>[method:null connect] ()</h3>
<p>
Adds the event listeners of the controls.
</p>
<h3>[method:null disconnect] ()</h3>
<p>
Removes the event listeners of the controls.
</p>
<h3>[method:Vector3 getDirection] ( [param:Vector3 target] )</h3>
<p>
<p>
[page:Vector3 target]: The target vector.
</p>
<p>
Returns the look direction of the camera.
</p>
</p>
<h3>[method:null lock] ()</h3>
<p>
Activates the pointer lock.
</p>
<h3>[method:null moveForward] ( [param:Number distance] )</h3>
<p>
<p>
[page:Number distance]: The signed distance.
</p>
<p>
Moves the camera forward parallel to the xz-plane. Assumes camera.up is y-up.
</p>
</p>
<h3>[method:null moveRight] ( [param:Number distance] )</h3>
<p>
<p>
[page:Number distance]: The signed distance.
</p>
<p>
Moves the camera sidewards parallel to the xz-plane.
</p>
</p>
<h3>[method:null unlock] ()</h3>
<p>
Exits the pointer lock.
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/PointerLockControls.js examples/js/controls/PointerLockControls.js]
</p>
</body>
</html>
|
