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
|
<!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">
<p>
[name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector.
That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up".
</p>
</p>
<h2>Example</h2>
<p>[example:misc_controls_trackball misc / controls / trackball ]</p>
<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 camera has been transformed by the controls.
</p>
<h3>start</h3>
<p>
Fires when an interaction (e.g. touch) was initiated.
</p>
<h3>end</h3>
<p>
Fires when an interaction has finished.
</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:Number dynamicDampingFactor]</h3>
<p>
Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to *false*. Default is *0.2*.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
</p>
<h3>[property:Array keys]</h3>
<p>
This array holds keycodes for controlling interactions.
<ul>
<li>When the first defined key is pressed, all mouse interactions (left, middle, right) performs orbiting.</li>
<li>When the second defined key is pressed, all mouse interactions (left, middle, right) performs zooming.</li>
<li>When the third defined key is pressed, all mouse interactions (left, middle, right) performs panning.</li>
</ul>
Default is *65, 83, 68* which represents A, S, D.
</p>
<h3>[property:Number maxDistance]</h3>
<p>
How far you can zoom in. Default is *Infinity*.
</p>
<h3>[property:Number minDistance]</h3>
<p>
How far you can zoom in. Default is *0*.
</p>
<h3>
[property:Object mouseButtons]</h3>
<p>
This object contains references to the mouse actions used by the controls.
<ul>
<li>.LEFT is assinged with *THREE.MOUSE.ROTATE*</li>
<li>.MIDDLE is assinged with *THREE.MOUSE.ZOOM*</li>
<li>.RIGHT is assinged with *THREE.MOUSE.PAN*</li>
</ul>
</p>
<h3>[property:Boolean noPan]</h3>
<p>
Whether or not panning is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRotate]</h3>
<p>
Whether or not rotation is disabled. Default is *false*.
</p>
<h3>[property:Boolean noZoom]</h3>
<p>
Whether or not zooming is disabled. Default is *false*.
</p>
<h3>[property:Camera object]</h3>
<p>
The camera being controlled.
</p>
<h3>[property:Number panSpeed]</h3>
<p>
The zoom speed. Default is *0.3*.
</p>
<h3>[property:Number rotateSpeed]</h3>
<p>
The rotation speed. Default is *1.0*.
</p>
<h3>[property:Object screen]</h3>
<p>
Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called.
<ul>
<li>left: Represents the offset in pixels to the screen's left boundary.</li>
<li>top: Represents the offset in pixels to the screen's top boundary.</li>
<li>width: Represents the screen width in pixels.</li>
<li>height: Represents the screen height in pixels.</li>
</ul>
</p>
<h3>[property:Boolean staticMoving]</h3>
<p>
Whether or not damping is disabled. Default is *false*.
</p>
<h3>[property:Number zoomSpeed]</h3>
<p>
The zoom speed. Default is *1.2*.
</p>
<h2>Methods</h2>
<h3>[method:null checkDistances] ()</h3>
<p>
Ensures the controls stay in the range [minDistance, maxDistance]. Called by [page:.update update]().
</p>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:null handleResize] ()</h3>
<p>
Should be called if the application window is resized.
</p>
<h3>[method:null panCamera] ()</h3>
<p>
Performs panning if necessary. Called by [page:.update update]().
</p>
<h3>[method:null reset] ()</h3>
<p>
Resets the controls to its initial state.
</p>
<h3>[method:null rotateCamera] ()</h3>
<p>
Rotates the camera if necessary. Called by [page:.update update]().
</p>
<h3>[method:null update] ()</h3>
<p>
Updates the controls. Usually called in the animation loop.
</p>
<h3>[method:null zoomCamera] ()</h3>
<p>
Performs zooming if necessary. Called by [page:.update update]().
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js examples/js/controls/TrackballControls.js]
</p>
</body>
</html>
|
