Skip to content

Commit 6d08b49

Browse files
egraetheregraether
committed
added dynamic moving to TrackballCamera
1 parent 3fcc393 commit 6d08b49

File tree

1 file changed

+104
-46
lines changed

1 file changed

+104
-46
lines changed

‎src/extras/cameras/TrackballCamera.js

Lines changed: 104 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
* noZoom: <bool>,
1818
* noPan: <bool>,
1919
20+
* staticMoving: <bool>,
21+
* dynamicDampingFactor: <float>,
22+
2023
* keys: <Array>, // [ rotateKey, zoomKey, panKey ],
2124
2225
* domElement: <HTMLElement>,
@@ -36,12 +39,15 @@ THREE.TrackballCamera = function ( parameters ) {
3639
this.screen = parameters.screen || { width : window.innerWidth, height : window.innerHeight, offsetLeft : 0, offsetTop : 0 };
3740
this.radius = parameters.radius || ( this.screen.width + this.screen.height ) / 4;
3841

39-
this.zoomSpeed = parameters.zoomSpeed || 1.5;
42+
this.zoomSpeed = parameters.zoomSpeed || 1.2;
4043
this.panSpeed = parameters.panSpeed || 0.3;
4144

4245
this.noZoom = parameters.noZoom || false;
4346
this.noPan = parameters.noPan || false;
4447

48+
this.staticMoving = parameters.staticMoving || false;
49+
this.dynamicDampingFactor = parameters.dynamicDampingFactor || 0.2;
50+
4551
this.keys = parameters.keys || [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
4652

4753
this.useTarget = true;
@@ -50,13 +56,16 @@ THREE.TrackballCamera = function ( parameters ) {
5056
//internals
5157

5258
var _keyPressed = false,
53-
5459
_state = this.STATE.NONE,
55-
56-
_mouse = new THREE.Vector2(),
57-
58-
_start = new THREE.Vector3(),
59-
_end = new THREE.Vector3();
60+
61+
_rotateStart = new THREE.Vector3(),
62+
_rotateEnd = new THREE.Vector3(),
63+
64+
_zoomStart = new THREE.Vector2(),
65+
_zoomEnd = new THREE.Vector2(),
66+
67+
_panStart = new THREE.Vector2(),
68+
_panEnd = new THREE.Vector2();
6069

6170

6271
// methods
@@ -108,69 +117,109 @@ THREE.TrackballCamera = function ( parameters ) {
108117

109118
};
110119

111-
this.rotateCamera = function( clientX, clientY ) {
112-
113-
_end = this.getMouseProjectionOnBall( clientX, clientY );
120+
this.rotateCamera = function() {
114121

115-
var angle = Math.acos( _start.dot( _end ) / _start.length() / _end.length() );
122+
var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
116123

117124
if ( angle ) {
118125

119-
var axis = (new THREE.Vector3()).cross( _end, _start ).normalize(),
126+
var axis = (new THREE.Vector3()).cross( _rotateStart, _rotateEnd ).normalize(),
120127
quaternion = new THREE.Quaternion();
121128

122-
quaternion.setFromAxisAngle( axis, angle );
129+
quaternion.setFromAxisAngle( axis, -angle );
123130

124131
quaternion.multiplyVector3( this.position );
125132
quaternion.multiplyVector3( this.up );
126133

127-
// quaternion.setFromAxisAngle( axis, angle * -0.1 );
128-
// quaternion.multiplyVector3( _start );
134+
if ( !this.staticMoving ) {
135+
136+
quaternion.multiplyVector3( _rotateEnd );
137+
138+
quaternion.setFromAxisAngle( axis, angle * ( this.dynamicDampingFactor - 1.0 ) );
139+
quaternion.multiplyVector3( _rotateStart );
140+
141+
}
129142

130143
}
131144

132145
};
133146

134-
this.zoomCamera = function( clientX, clientY ) {
147+
this.zoomCamera = function() {
135148

136-
var newMouse = this.getMouseOnScreen( clientX, clientY ),
137-
eye = this.position.clone().subSelf( this.target.position ),
138-
factor = 1.0 + ( newMouse.y - _mouse.y ) * this.zoomSpeed;
149+
var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * this.zoomSpeed;
139150

140-
if ( factor > 0.0 ) {
151+
if ( factor !== 1.0 && factor > 0.0 ) {
141152

153+
var eye = this.position.clone().subSelf( this.target.position );
142154
this.position.add( this.target.position, eye.multiplyScalar( factor ) );
143-
_mouse = newMouse;
155+
156+
if ( this.staticMoving ) {
157+
158+
_zoomStart = _zoomEnd;
159+
160+
} else {
161+
162+
_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
163+
164+
}
144165

145166
}
146167

147168
};
148169

149-
this.panCamera = function( clientX, clientY ) {
170+
this.panCamera = function() {
171+
172+
var mouseChange = _panEnd.clone().subSelf( _panStart );
173+
174+
if ( mouseChange.lengthSq() ) {
175+
176+
var factor = this.position.distanceTo( this.target.position ) * this.panSpeed;
177+
178+
mouseChange.multiplyScalar( factor );
179+
180+
var pan = this.position.clone().crossSelf( this.up ).setLength( mouseChange.x );
181+
pan.addSelf( this.up.clone().setLength( mouseChange.y ) );
150182

151-
var newMouse = this.getMouseOnScreen( clientX, clientY ),
152-
mouseChange = newMouse.clone().subSelf( _mouse ),
153-
factor = this.position.distanceTo( this.target.position ) * this.panSpeed;
183+
this.position.addSelf( pan );
184+
this.target.position.addSelf( pan );
154185

155-
mouseChange.multiplyScalar( factor );
186+
if ( this.staticMoving ) {
156187

157-
var pan = this.position.clone().crossSelf( this.up ).setLength( mouseChange.x );
158-
pan.addSelf( this.up.clone().setLength( mouseChange.y ) );
188+
_panStart = _panEnd;
159189

160-
this.position.addSelf( pan );
161-
this.target.position.addSelf( pan );
190+
} else {
191+
192+
_panStart.addSelf( mouseChange.sub( _panEnd, _panStart ).multiplyScalar( this.dynamicDampingFactor ) );
162193

163-
_mouse = newMouse;
194+
}
195+
196+
}
164197

165198
};
166199

167-
// this.update = function( parentMatrixWorld, forceUpdate, camera ) {
168-
//
169-
// this.rotateCamera();
170-
//
171-
// this.supr.update.call( this, parentMatrixWorld, forceUpdate, camera );
172-
//
173-
// };
200+
this.update = function( parentMatrixWorld, forceUpdate, camera ) {
201+
202+
if ( !this.staticMoving ) {
203+
204+
this.rotateCamera();
205+
206+
}
207+
208+
if ( !this.noZoom ) {
209+
210+
this.zoomCamera();
211+
212+
}
213+
214+
if ( !this.noPan ) {
215+
216+
this.panCamera();
217+
218+
}
219+
220+
this.supr.update.call( this, parentMatrixWorld, forceUpdate, camera );
221+
222+
};
174223

175224
// listeners
176225

@@ -220,11 +269,15 @@ THREE.TrackballCamera = function ( parameters ) {
220269

221270
if ( _state === this.STATE.ROTATE ) {
222271

223-
_start = this.getMouseProjectionOnBall( event.clientX, event.clientY );
272+
_rotateStart = _rotateEnd = this.getMouseProjectionOnBall( event.clientX, event.clientY );
273+
274+
} else if ( _state === this.STATE.ZOOM ) {
275+
276+
_zoomStart = _zoomEnd = this.getMouseOnScreen( event.clientX, event.clientY );
224277

225278
} else {
226279

227-
_mouse = this.getMouseOnScreen( event.clientX, event.clientY );
280+
_panStart = _panEnd = this.getMouseOnScreen( event.clientX, event.clientY );
228281

229282
}
230283

@@ -236,8 +289,9 @@ THREE.TrackballCamera = function ( parameters ) {
236289

237290
if ( _keyPressed ) {
238291

239-
_start = this.getMouseProjectionOnBall( event.clientX, event.clientY );
240-
_mouse = this.getMouseOnScreen( event.clientX, event.clientY );
292+
_rotateStart = _rotateEnd = this.getMouseProjectionOnBall( event.clientX, event.clientY );
293+
_zoomStart = _zoomEnd = this.getMouseOnScreen( event.clientX, event.clientY );
294+
_panStart = _panEnd = this.getMouseOnScreen( event.clientX, event.clientY );
241295

242296
_keyPressed = false;
243297

@@ -249,17 +303,21 @@ THREE.TrackballCamera = function ( parameters ) {
249303

250304
} else if ( _state === this.STATE.ROTATE ) {
251305

252-
// _end = this.getMouseProjectionOnBall( event.clientX, event.clientY );
306+
_rotateEnd = this.getMouseProjectionOnBall( event.clientX, event.clientY );
253307

254-
this.rotateCamera( event.clientX, event.clientY );
308+
if ( this.staticMoving ) {
309+
310+
this.rotateCamera();
311+
312+
}
255313

256314
} else if ( _state === this.STATE.ZOOM && !this.noZoom ) {
257315

258-
this.zoomCamera( event.clientX, event.clientY );
316+
_zoomEnd = this.getMouseOnScreen( event.clientX, event.clientY );
259317

260318
} else if ( _state === this.STATE.PAN && !this.noPan ) {
261319

262-
this.panCamera( event.clientX, event.clientY );
320+
_panEnd = this.getMouseOnScreen( event.clientX, event.clientY );
263321

264322
}
265323

0 commit comments

Comments
 (0)