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
|
<!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>
<h1>轨道控制器（[name]）</h1>
<p class="desc">
Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。<br>
要使用这一功能，就像在/examples（示例）目录中的所有文件一样，
您必须在HTML中包含这个文件。
</p>
<h2>示例</h2>
<p>[example:misc_controls_orbit misc / controls / orbit ]</p>
<code>
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
var controls = new THREE.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>Constructor</h2>
<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
<p>
[page:Camera object]: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。<br><br>
[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
</p>
<h2>Properties</h2>
<h3>[property:Boolean autoRotate]</h3>
<p>
将其设为true，以自动围绕目标旋转。<br>
请注意，如果它被启用，你必须在你的动画循环里调用[page:.update]()。
</p>
<h3>[property:Float autoRotateSpeed]</h3>
<p>
当[property:Boolean autoRotate]为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一次需要30秒。<br>
请注意，如果[property:Boolean autoRotate]被启用，你必须在你的动画循环里调用[page:.update]()。
</p>
<h3>
[property:Float dampingFactor]</h3>
<p>
当[property:Boolean enableDamping]设置为true的时候，阻尼惯性有多大。<br>
请注意，要使得这一值生效，你必须在你的动画循环里调用[page:.update]()。
</p>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
用于监听鼠标事件或触摸事件的HTMLDOMElement（DOM元素）。该值必须在构造函数中进行传入；
在此更改它将不会设置新的事件监听器
</p>
<h3>[property:Boolean enabled]</h3>
<p>
控制器是否被启用。
</p>
<h3>[property:Boolean enableDamping]</h3>
<p>
将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。<br>
请注意，如果该值被启用，你将必须在你的动画循环里调用[page:.update]()。
</p>
<h3>[property:Boolean enableKeys]</h3>
<p>
启用或禁用键盘控制。
</p>
<h3>[property:Boolean enablePan]</h3>
<p>
启用或禁用摄像机平移，默认为true。
</p>
<h3>[property:Boolean enableRotate]</h3>
<p>
启用或禁用摄像机水平或垂直旋转。默认值为true。<br>
请注意，可以通过将[page:.minPolarAngle polar angle]或者[page:.minAzimuthAngle azimuth angle]
的min和max设置为相同的值来禁用单个轴，
这将使得水平旋转或垂直旋转固定为所设置的值。
</p>
<h3>[property:Boolean enableZoom]</h3>
<p>
启用或禁用摄像机的缩放。
</p>
<h3>[property:Float keyPanSpeed]</h3>
<p>
当使用键盘按键的时候，相机平移的速度有多快。默认值为每次按下按键时平移7像素。
</p>
<h3>[property:Object keys]</h3>
<p>
这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。
<code>
controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
}
</code>请参阅[link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page]来查看所有按键的代码列表。
</p>
<h3>[property:Float maxAzimuthAngle]</h3>
<p>
你能够水平旋转的角度的上限，范围是-Math.PI到Math.PI（或Infinity无限制），
其默认值为Infinity。
</p>
<h3>[property:Float maxDistance]</h3>
<p>
你能够将相机向外移动多少（仅适用于[page:PerspectiveCamera]），其默认值为Infinity。
</p>
<h3>[property:Float maxPolarAngle]</h3>
<p>
你能够垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI。
</p>
<h3>[property:Float maxZoom]</h3>
<p>
你能够将相机缩小多少( 仅适用于[page:OrthographicCamera] only )，其默认值为Infinity。
</p>
<h3>[property:Float minAzimuthAngle]</h3>
<p>
你能够水平旋转的角度的下限，范围是-Math.PI到Math.PI（或-Infinity无限制），
其默认值为-Infinity。
</p>
<h3>[property:Float minDistance]</h3>
<p>
你能够将相机向内移动多少（仅适用于[page:PerspectiveCamera]），其默认值为0。
</p>
<h3>[property:Float minPolarAngle]</h3>
<p>
你能够垂直旋转的角度的下限，范围是0到Math.PI，其默认值为0。
</p>
<h3>[property:Float minZoom]</h3>
<p>
你能够将相机放大多少( 仅适用于[page:OrthographicCamera] )，其默认值为0。
</p>
<h3>
[property:Object mouseButtons]</h3>
<p>
这一对象包含了对用于控制的鼠标按钮的引用。
<code>
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
}
</code>
</p>
<h3>[property:Camera object]</h3>
<p>
正被控制的摄像机。
</p>
<h3>[property:Float panSpeed]</h3>
<p>
位移的速度，其默认值为1。
</p>
<h3>[property:Vector3 position0]</h3>
<p>
由[method:saveState]和[method:reset]方法在内部使用。
</p>
<h3>[property:Float rotateSpeed]</h3>
<p>
旋转的速度，其默认值为1.
</p>
<h3>[property:Boolean screenSpacePanning]</h3>
<p>
定义当平移的时候摄像机的位置将如何移动。如果为true，摄像机将在屏幕空间内平移。
否则，摄像机将在与摄像机向上方向垂直的平面中平移。其默认值为false。
</p>
<h3>[property:Vector3 target0]</h3>
<p>
由[method:saveState]和[method:reset]方法在内部使用。
</p>
<h3>[property:Vector3 target]</h3>
<p>
控制器的焦点，[page:.object]的轨道围绕它运行。
它可以在任何时候被手动更新，以更改控制器的焦点。
</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>
由[method:saveState]和[method:reset]方法在内部使用。
</p>
<h3>[property:Float zoomSpeed]</h3>
<p>
摄像机缩放的速度，其默认值为1。
Speed of zooming / dollying. Default is 1.
</p>
<h2>Methods</h2>
<h3>[method:null dispose] ()</h3>
<p>
移除所有的事件监听。
</p>
<h3>[method:radians getAzimuthalAngle] ()</h3>
<p>
获得当前的水平旋转，单位为弧度。
</p>
<h3>[method:radians getPolarAngle] ()</h3>
<p>
获得当前的垂直旋转，单位为弧度。
</p>
<h3>[method:null reset] ()</h3>
<p>
将控制器重置为上次调用[page:.saveState]时的状态，或者初始状态。
</p>
<h3>[method:null saveState] ()</h3>
<p>
保存当前控制器的状态。这一状态可在之后由[page:.reset]所恢复。
</p>
<h3>[method:Boolean update] ()</h3>
<p>
更新控制器。必须在摄像机的变换发生任何手动改变后调用，
或如果[page:.autoRotate]或[page:.enableDamping]被设置时，在update循环里调用。
</p>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js examples/js/controls/OrbitControls.js]
</p>
</body>
</html>
|
