-
Notifications
You must be signed in to change notification settings - Fork 0
/
OrbitControls.html
317 lines (250 loc) · 8.78 KB
/
OrbitControls.html
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
Orbit controls allow the camera to orbit around a target.<br>
To use this, as with all files in the /examples directory, you will have to
include the file separately in your HTML.
</p>
<h2>Code Example</h2>
<code>
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
const controls = new OrbitControls( camera, renderer.domElement );
//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();
function animate() {
requestAnimationFrame( animate );
// required if controls.enableDamping or controls.autoRotate are set to true
controls.update();
renderer.render( scene, camera );
}
</code>
<h2>Examples</h2>
<p>[example:misc_controls_orbit misc / controls / orbit ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
<p>
[page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.<br><br>
[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
</p>
<h2>Events</h2>
<h3>change</h3>
<p>
Fires when the camera has been transformed by the controls.
</p>
<h3>start</h3>
<p>
Fires when an interaction was initiated.
</p>
<h3>end</h3>
<p>
Fires when an interaction has finished.
</p>
<h2>Properties</h2>
<h3>[property:Boolean autoRotate]</h3>
<p>
Set to true to automatically rotate around the target.<br> Note that if this is enabled, you must call [page:.update]
() in your animation loop.
</p>
<h3>[property:Float autoRotateSpeed]</h3>
<p>
How fast to rotate around the target if [page:.autoRotate] is true. Default is 2.0, which equates to 30 seconds
per orbit at 60fps.<br> Note that if [page:.autoRotate] is enabled, you must call [page:.update]
() in your animation loop.
</p>
<h3>
[property:Float dampingFactor]</h3>
<p>
The damping inertia used if [page:.enableDamping] is set to true.<br> Note that for this to work, you must
call [page:.update] () in your animation loop.
</p>
<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 enabled]</h3>
<p>
When set to `false`, the controls will not respond to user input. Default is `true`.
</p>
<h3>[property:Boolean enableDamping]</h3>
<p>
Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Default is false.<br>
Note that if this is enabled, you must call [page:.update] () in your animation loop.
</p>
<h3>[property:Boolean enablePan]</h3>
<p>
Enable or disable camera panning. Default is true.
</p>
<h3>[property:Boolean enableRotate]</h3>
<p>
Enable or disable horizontal and vertical rotation of the camera. Default is true.<br>
Note that it is possible to disable a single axis by setting the min and max of the
[page:.minPolarAngle polar angle] or [page:.minAzimuthAngle azimuth angle] to the same value,
which will cause the vertical or horizontal rotation to be fixed at that value.
</p>
<h3>[property:Boolean enableZoom]</h3>
<p>
Enable or disable zooming (dollying) of the camera.
</p>
<h3>[property:Float keyPanSpeed]</h3>
<p>
How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
</p>
<h3>[property:Object keys]</h3>
<p>
This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.
<code>
controls.keys = {
LEFT: 'ArrowLeft', //left arrow
UP: 'ArrowUp', // up arrow
RIGHT: 'ArrowRight', // right arrow
BOTTOM: 'ArrowDown' // down arrow
}
</code> See [link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code KeyboardEvent.code] for a full list of keycodes.
</p>
<h3>[property:Float maxAzimuthAngle]</h3>
<p>
How far you can orbit horizontally, upper limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.
</p>
<h3>[property:Float maxDistance]</h3>
<p>
How far you can dolly out ( [page:PerspectiveCamera] only ). Default is Infinity.
</p>
<h3>[property:Float maxPolarAngle]</h3>
<p>
How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.
</p>
<h3>[property:Float maxZoom]</h3>
<p>
How far you can zoom out ( [page:OrthographicCamera] only ). Default is Infinity.
</p>
<h3>[property:Float minAzimuthAngle]</h3>
<p>
How far you can orbit horizontally, lower limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.
</p>
<h3>[property:Float minDistance]</h3>
<p>
How far you can dolly in ( [page:PerspectiveCamera] only ). Default is 0.
</p>
<h3>[property:Float minPolarAngle]</h3>
<p>
How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.
</p>
<h3>[property:Float minZoom]</h3>
<p>
How far you can zoom in ( [page:OrthographicCamera] only ). Default is 0.
</p>
<h3>
[property:Object mouseButtons]</h3>
<p>
This object contains references to the mouse actions used by the controls.
<code>
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
}
</code>
</p>
<h3>[property:Camera object]</h3>
<p>
The camera being controlled.
</p>
<h3>[property:Float panSpeed]</h3>
<p>
Speed of panning. Default is 1.
</p>
<h3>[property:Vector3 position0]</h3>
<p>
Used internally by the [page:.saveState] and [page:.reset] methods.
</p>
<h3>[property:Float rotateSpeed]</h3>
<p>
Speed of rotation. Default is 1.
</p>
<h3>[property:Boolean screenSpacePanning]</h3>
<p>
Defines how the camera's position is translated when panning. If true, the camera pans in screen space.
Otherwise, the camera pans in the plane orthogonal to the camera's up direction.
Default is true for OrbitControls; false for MapControls.
</p>
<h3>[property:Vector3 target0]</h3>
<p>
Used internally by the [page:.saveState] and [page:.reset] methods.
</p>
<h3>[property:Vector3 target]</h3>
<p>
The focus point of the controls, the [page:.object] orbits around this. It can be updated manually at any point to change
the focus of the controls.
</p>
<h3>[property:Object touches]</h3>
<p>
This object contains references to the touch actions used by the controls.
<code>
controls.touches = {
ONE: THREE.TOUCH.ROTATE,
TWO: THREE.TOUCH.DOLLY_PAN
}
</code>
</p>
<h3>[property:Float zoom0]</h3>
<p>
Used internally by the [page:.saveState] and [page:.reset] methods.
</p>
<h3>[property:Float zoomSpeed]</h3>
<p>
Speed of zooming / dollying. Default is 1.
</p>
<h2>Methods</h2>
<h3>[method:undefined dispose] ()</h3>
<p>
Remove all the event listeners.
</p>
<h3>[method:radians getAzimuthalAngle] ()</h3>
<p>
Get the current horizontal rotation, in radians.
</p>
<h3>[method:radians getPolarAngle] ()</h3>
<p>
Get the current vertical rotation, in radians.
</p>
<h3>[method:Float getDistance] ()</h3>
<p>
Returns the distance from the camera to the target.
</p>
<h3>[method:undefined listenToKeyEvents] ( [param:HTMLDOMElement domElement] )</h3>
<p>
Adds key event listeners to the given DOM element. `window` is a recommended argument for using this method.
</p>
<h3>[method:undefined reset] ()</h3>
<p>
Reset the controls to their state from either the last time the [page:.saveState] was called, or the initial state.
</p>
<h3>[method:undefined saveState] ()</h3>
<p>
Save the current state of the controls. This can later be recovered with [page:.reset].
</p>
<h3>[method:Boolean update] ()</h3>
<p>
Update the controls. Must be called after any manual changes to the camera's transform,
or in the update loop if [page:.autoRotate] or [page:.enableDamping] are set.
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js examples/jsm/controls/OrbitControls.js]
</p>
</body>
</html>