Skip to content

Commit

Permalink
remove distanceToPivot
Browse files Browse the repository at this point in the history
  • Loading branch information
@PaulHax
Paul Elliott authored and PaulHax committed Apr 10, 2021
1 parent b7d4336 commit 3d72851
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 74 deletions.
112 changes: 54 additions & 58 deletions CameraSpinControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ CameraSpinControls = function ( camera, domElement ) {
// Set to false to disable this control
this.enabled = true;

this.distanceFromPivot = 500;

this.object = camera;
// "target" sets the location of focus, where the object orbits around
this.targetObj = new THREE.Object3D();
Expand All @@ -41,7 +39,7 @@ CameraSpinControls = function ( camera, domElement ) {

this.targetObj.lookAt(camera.position);

this.isTargetOffCenter = true;
this.startTrackballScreenCenter = true;
this.trackballToObject = new THREE.Matrix4();

this.targetObj.updateWorldMatrix(true, false);
Expand Down Expand Up @@ -121,22 +119,26 @@ CameraSpinControls = function ( camera, domElement ) {
};

this.movedTarget = function () {
scope.targetObj.updateWorldMatrix(true, false);
scope.object.updateWorldMatrix(true, false);
transformTo(scope.trackballToObject, scope.targetObj.matrixWorld, scope.object.matrixWorld);

// restrict radius to be between desired limits

var v = new THREE.Vector3();
v.setFromMatrixPosition(scope.trackballToObject);
v.multiplyScalar(scale);
v.clampLength(scope.minDistance, scope.maxDistance);
scope.distanceFromPivot = v.length();
scope.trackballToObject.setPosition(v);
scope.object.matrix.copy( scope.targetObj.matrixWorld );
scope.object.matrix.multiply(scope.trackballToObject);

this.ajustTrackballRadius();
};

return function movedTarget() {

scope.targetObj.updateWorldMatrix(true, false);
scope.object.updateWorldMatrix(true, false);
transformTo(scope.trackballToObject, scope.targetObj.matrixWorld, scope.object.matrixWorld);

// restrict radius to be between desired limits
v.setFromMatrixPosition(scope.trackballToObject);
v.multiplyScalar(scale);
v.clampLength(scope.minDistance, scope.maxDistance);
scope.trackballToObject.setPosition(v);
scope.object.matrix.copy( scope.targetObj.matrixWorld );
scope.object.matrix.multiply(scope.trackballToObject);

this.ajustTrackballRadius();
}
}();

this.setTargetPosition = function (positionVector) {

Expand All @@ -159,28 +161,14 @@ CameraSpinControls = function ( camera, domElement ) {
// move target to panned location
scope.target.add( panOffset );
scope.targetObj.updateWorldMatrix(true, false);

if (scope.isTargetOffCenter) {

v.setFromMatrixPosition(scope.trackballToObject);
v.multiplyScalar(scale);
// restrict radius to be between desired limits
v.clampLength(scope.minDistance, scope.maxDistance);
scope.distanceFromPivot = v.length();
scope.trackballToObject.setPosition(v);
scope.object.matrix.copy( scope.targetObj.matrixWorld );
scope.object.matrix.multiply(scope.trackballToObject);

} else {

scope.distanceFromPivot *= scale;
// restrict radius to be between desired limits
scope.distanceFromPivot = Math.max( scope.minDistance, Math.min( scope.maxDistance, scope.distanceFromPivot ) );
scope.trackballToObject.makeTranslation( 0, 0, scope.distanceFromPivot );
scope.object.matrix.copy( scope.targetObj.matrixWorld );
scope.object.matrix.multiply( scope.trackballToObject );

}
v.setFromMatrixPosition(scope.trackballToObject);
v.multiplyScalar(scale);
// restrict radius to be between desired limits
v.clampLength(scope.minDistance, scope.maxDistance);
scope.trackballToObject.setPosition(v);
scope.object.matrix.copy( scope.targetObj.matrixWorld );
scope.object.matrix.multiply(scope.trackballToObject);

this.ajustTrackballRadius();

Expand Down Expand Up @@ -242,18 +230,10 @@ CameraSpinControls = function ( camera, domElement ) {

var limitingFov = Math.min(scope.object.fov, scope.object.fov * scope.object.aspect);
var distanceToScreenSize = Math.sin( ( limitingFov / 2 ) * Math.PI / 180.0 );

if (scope.isTargetOffCenter) {

transformTo(cameraToTrackball, scope.object.matrix, scope.targetObj.matrixWorld);
v.setFromMatrixPosition(cameraToTrackball);
scope.distanceFromPivot = v.length();
scope.spinControl.trackballRadius = .9 * scope.distanceFromPivot * distanceToScreenSize;

} else {

scope.spinControl.trackballRadius = .9 * scope.distanceFromPivot * distanceToScreenSize;
}

transformTo(cameraToTrackball, scope.object.matrix, scope.targetObj.matrixWorld);
v.setFromMatrixPosition(cameraToTrackball);
scope.spinControl.trackballRadius = .9 * v.length() * distanceToScreenSize;

} else {

Expand All @@ -273,8 +253,8 @@ CameraSpinControls = function ( camera, domElement ) {
scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );

document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
document.removeEventListener( 'mousemove', onMouseMove );
document.removeEventListener( 'mouseup', onMouseUp );

window.removeEventListener( 'keydown', onKeyDown, false );

Expand Down Expand Up @@ -554,6 +534,9 @@ CameraSpinControls = function ( camera, domElement ) {
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );

var fingerCenter = scope.spinControl.getPointerInNdc(x, y);

scope.target.setFromMatrixPosition(scope.trackballToObject);
var startDistance = scope.target.length();

scope.target.set( fingerCenter.x, fingerCenter.y, .5 );

Expand All @@ -562,7 +545,7 @@ CameraSpinControls = function ( camera, domElement ) {

scope.target.unproject( scope.object ); // target in world space now
scope.target.sub( scope.object.position ).normalize(); // Subtract to put around origin
scope.target.setLength( scope.distanceFromPivot );
scope.target.setLength( startDistance );
scope.target.add( scope.object.position );
scope.movedTarget();

Expand Down Expand Up @@ -726,6 +709,9 @@ CameraSpinControls = function ( camera, domElement ) {

if ( state !== STATE.NONE ) {

document.addEventListener( 'mousemove', onMouseMove );
document.addEventListener( 'mouseup', onMouseUp );

startEvent.state = state;
scope.dispatchEvent( startEvent );

Expand Down Expand Up @@ -769,10 +755,11 @@ CameraSpinControls = function ( camera, domElement ) {

function onMouseUp( event ) {

document.removeEventListener( 'mousemove', onMouseMove );
document.removeEventListener( 'mouseup', onMouseUp );

if ( scope.enabled === false ) return;

document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );

state = STATE.NONE;

Expand Down Expand Up @@ -822,6 +809,17 @@ CameraSpinControls = function ( camera, domElement ) {
if ( scope.enableRotate === false ) return;

state = STATE.ROTATE;

if ( scope.startTrackballScreenCenter ) {

scope.target.setFromMatrixPosition(scope.trackballToObject);
var startDistance = scope.target.length();
scope.target.set(0, 0, -startDistance);
scope.target.applyQuaternion(scope.object.quaternion);
scope.target.add(scope.object.position);
scope.setTargetPosition(scope.target);

}

break;

Expand Down Expand Up @@ -920,8 +918,6 @@ CameraSpinControls = function ( camera, domElement ) {
scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );

scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
scope.domElement.addEventListener( 'mousemove', onMouseMove, false );
scope.domElement.addEventListener( 'mouseup', onMouseUp, false );
scope.domElement.addEventListener( 'wheel', onMouseWheel, false );

scope.domElement.addEventListener( 'touchstart', onTouchStart, true );
Expand Down
31 changes: 15 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,9 @@ <h1 class="menuTitle">SpinControls</h1>
trackballWidget.renderOrder = 1; // Don't draw to early, thus obscuring other transparent objects

controls = new CameraSpinControls( camera, renderer.domElement );
controls.isTargetOffCenter = true;
// Moving trackball position to mesh intersection points
// so disable controls moving trackball on rotation start
controls.startTrackballScreenCenter = false;

var raycaster = new THREE.Raycaster();
var pointerPos = new THREE.Vector2();
Expand All @@ -271,25 +273,22 @@ <h1 class="menuTitle">SpinControls</h1>

function onPointerDown() {

if (controls.isTargetOffCenter) {
raycaster.setFromCamera( pointerPos, camera );
var intersects = raycaster.intersectObjects( cameraPivotSurfaces );

raycaster.setFromCamera( pointerPos, camera );
var intersects = raycaster.intersectObjects( cameraPivotSurfaces );
if(intersects.length) {

if(intersects.length) {
controls.setTargetPosition(intersects[0].point);

controls.setTargetPosition(intersects[0].point);

} else {

// Move trackball to center of screen if not clicking on anything.
// Comment out to rotate with trackball centered on mouse.
controls.target.set(0, 0, -controls.distanceFromPivot);
controls.target.applyQuaternion(camera.quaternion);
controls.target.add(camera.position);
controls.setTargetPosition(controls.target);
} else {

}
// Move trackball to center of screen if not clicking on anything.
controls.target.setFromMatrixPosition(controls.trackballToObject);
var startDistance = controls.target.length();
controls.target.set(0, 0, -startDistance);
controls.target.applyQuaternion(camera.quaternion);
controls.target.add(camera.position);
controls.setTargetPosition(controls.target);

}

Expand Down

0 comments on commit 3d72851

Please sign in to comment.