Skip to content

Commit 8673cc8

Browse files
mrdoobmrdoob
committed
Fixed OrbitControls domElement.body dependency. Also some code clean up.
1 parent 273241e commit 8673cc8

1 file changed

Lines changed: 35 additions & 23 deletions

File tree

‎examples/js/controls/OrbitControls.js‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,10 @@ THREE.OrbitControls = function ( object, domElement ) {
154154
// right and down are positive
155155
this.pan = function ( delta ) {
156156

157-
if ( scope.object.fov !== undefined )
158-
{
157+
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
158+
159+
if ( scope.object.fov !== undefined ) {
160+
159161
// perspective
160162
var position = scope.object.position;
161163
var offset = position.clone().sub( scope.target );
@@ -164,20 +166,22 @@ THREE.OrbitControls = function ( object, domElement ) {
164166
// half of the fov is center to top of screen
165167
targetDistance *= Math.tan( (scope.object.fov/2) * Math.PI / 180.0 );
166168
// we actually don't use screenWidth, since perspective camera is fixed to screen height
167-
scope.panLeft( 2 * delta.x * targetDistance / scope.domElement.body.clientHeight );
168-
scope.panUp( 2 * delta.y * targetDistance / scope.domElement.body.clientHeight );
169-
}
170-
else if ( scope.object.top !== undefined )
171-
{
169+
scope.panLeft( 2 * delta.x * targetDistance / element.clientHeight );
170+
scope.panUp( 2 * delta.y * targetDistance / element.clientHeight );
171+
172+
} else if ( scope.object.top !== undefined ) {
173+
172174
// orthographic
173-
scope.panLeft( delta.x * (scope.object.right - scope.object.left) / scope.domElement.body.clientWidth );
174-
scope.panUp( delta.y * (scope.object.top - scope.object.bottom) / scope.domElement.body.clientHeight );
175-
}
176-
else
177-
{
175+
scope.panLeft( delta.x * (scope.object.right - scope.object.left) / element.clientWidth );
176+
scope.panUp( delta.y * (scope.object.top - scope.object.bottom) / element.clientHeight );
177+
178+
} else {
179+
178180
// camera neither orthographic or perspective - warn user
179181
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
182+
180183
}
184+
181185
};
182186

183187
this.dollyIn = function ( dollyScale ) {
@@ -312,25 +316,29 @@ THREE.OrbitControls = function ( object, domElement ) {
312316

313317
function onMouseMove( event ) {
314318

315-
if ( scope.enabled === false ) { return; }
319+
if ( scope.enabled === false ) return;
316320

317321
event.preventDefault();
318322

323+
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
324+
319325
if ( state === STATE.ROTATE ) {
320-
if ( scope.noRotate === true ) { return; }
326+
327+
if ( scope.noRotate === true ) return;
321328

322329
rotateEnd.set( event.clientX, event.clientY );
323330
rotateDelta.subVectors( rotateEnd, rotateStart );
324331

325332
// rotating across whole screen goes 360 degrees around
326-
scope.rotateLeft( 2 * Math.PI * rotateDelta.x / scope.domElement.body.clientWidth * scope.rotateSpeed );
333+
scope.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
327334
// rotating up and down along whole screen attempts to go 360, but limited to 180
328-
scope.rotateUp( 2 * Math.PI * rotateDelta.y / scope.domElement.body.clientHeight * scope.rotateSpeed );
335+
scope.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
329336

330337
rotateStart.copy( rotateEnd );
331338

332339
} else if ( state === STATE.DOLLY ) {
333-
if ( scope.noZoom === true ) { return; }
340+
341+
if ( scope.noZoom === true ) return;
334342

335343
dollyEnd.set( event.clientX, event.clientY );
336344
dollyDelta.subVectors( dollyEnd, dollyStart );
@@ -348,7 +356,8 @@ THREE.OrbitControls = function ( object, domElement ) {
348356
dollyStart.copy( dollyEnd );
349357

350358
} else if ( state === STATE.PAN ) {
351-
if ( scope.noPan === true ) { return; }
359+
360+
if ( scope.noPan === true ) return;
352361

353362
panEnd.set( event.clientX, event.clientY );
354363
panDelta.subVectors( panEnd, panStart );
@@ -361,11 +370,12 @@ THREE.OrbitControls = function ( object, domElement ) {
361370

362371
// Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be
363372
scope.update();
373+
364374
}
365375

366376
function onMouseUp( /* event */ ) {
367377

368-
if ( scope.enabled === false ) { return; }
378+
if ( scope.enabled === false ) return;
369379

370380
// Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be
371381
scope.domElement.removeEventListener( 'mousemove', onMouseMove, false );
@@ -377,8 +387,7 @@ THREE.OrbitControls = function ( object, domElement ) {
377387

378388
function onMouseWheel( event ) {
379389

380-
if ( scope.enabled === false ) { return; }
381-
if ( scope.noZoom === true ) { return; }
390+
if ( scope.enabled === false || scope.noZoom === true ) return;
382391

383392
var delta = 0;
384393

@@ -413,6 +422,7 @@ THREE.OrbitControls = function ( object, domElement ) {
413422
// pan a pixel - I guess for precise positioning?
414423
// Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be
415424
var needUpdate = false;
425+
416426
switch ( event.keyCode ) {
417427

418428
case scope.keys.UP:
@@ -488,6 +498,8 @@ THREE.OrbitControls = function ( object, domElement ) {
488498
event.preventDefault();
489499
event.stopPropagation();
490500

501+
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
502+
491503
switch ( event.touches.length ) {
492504

493505
case 1: // one-fingered touch: rotate
@@ -498,9 +510,9 @@ THREE.OrbitControls = function ( object, domElement ) {
498510
rotateDelta.subVectors( rotateEnd, rotateStart );
499511

500512
// rotating across whole screen goes 360 degrees around
501-
scope.rotateLeft( 2 * Math.PI * rotateDelta.x / scope.domElement.body.clientWidth * scope.rotateSpeed );
513+
scope.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
502514
// rotating up and down along whole screen attempts to go 360, but limited to 180
503-
scope.rotateUp( 2 * Math.PI * rotateDelta.y / scope.domElement.body.clientHeight * scope.rotateSpeed );
515+
scope.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
504516

505517
rotateStart.copy( rotateEnd );
506518
break;

0 commit comments

Comments
 (0)