您的位置:首页 > Web前端 > JavaScript

OrbitControls缩放阻尼作用

2017-12-25 11:32 716 查看

OrbitControls缩放阻尼作用

OrbitControls.js旋转时可以添加阻尼作用,这样鼠标或手机操作时会比较灵动,OrbitControls.js自带旋转的阻尼参数,enableDamping设置是否有阻尼作用,dampingFactor为阻尼系数,这个阻尼只对旋转操作有作用,缩放没有作用。

我们自己可以添加缩放操作的阻尼作用,需要更改的代码如下(红色为添加代码):

(1)添加变量var rDelta = 0;

(2)this.dollyIn = function ( dollyScale ) {

 

if ( scope.object instanceof THREE.PerspectiveCamera ) {

 

scale /= dollyScale;

rDelta += dollyScale;

 

} else if ( scope.object instanceof THREE.OrthographicCamera ) {

 

scope.object.zoom = Math.max( this.minZoom, Math.min( this.maxZoom, this.object.zoom * dollyScale ) );

scope.object.updateProjectionMatrix();

zoomChanged = true;

 

} else {

 

console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );

 

}

 

};

 

this.dollyOut = function ( dollyScale ) {

 

if ( scope.object instanceof THREE.PerspectiveCamera ) {

 

scale *= dollyScale;

rDelta -= dollyScale;

 

} else if ( scope.object instanceof THREE.OrthographicCamera ) {

 

scope.object.zoom = Math.max( this.minZoom, Math.min( this.maxZoom, this.object.zoom / dollyScale ) );

scope.object.updateProjectionMatrix();

zoomChanged = true;

 

} else {

 

console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );

 

}

 

};

(3) this.update = function() {

 

var offset = new THREE.Vector3();

 

// so camera.up is the orbit axis

var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );

var quatInverse = quat.clone().inverse();

 

var lastPosition = new THREE.Vector3();

var lastQuaternion = new THREE.Quaternion();

 

return function () {

 

var position = this.object.position;

 

offset.copy( position ).sub( this.target );

 

// rotate offset to "y-axis-is-up" space

offset.applyQuaternion( quat );

 

// angle from z-axis around y-axis

 

theta = Math.atan2( offset.x, offset.z );

 

// angle from y-axis

 

phi = Math.atan2( Math.sqrt( offset.x * offset.x + offset.z * offset.z ), offset.y );

 

theta += thetaDelta;

phi += phiDelta;

 

// restrict theta to be between desired limits

theta = Math.max( this.minAzimuthAngle, Math.min( this.maxAzimuthAngle, theta ) );

 

// restrict phi to be between desired limits

phi = Math.max( this.minPolarAngle, Math.min( this.maxPolarAngle, phi ) );

 

// restrict phi to be betwee EPS and PI-EPS

phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) );

 

var radius = offset.length() * scale;

radius+=rDelta;

 

// restrict radius to be between desired limits

radius = Math.max( this.minDistance, Math.min( this.maxDistance, radius ) );

 

if ( this.enableDamping === true ) {

 

rDelta *= ( 1 - this.dampingFactor );

 

}else{

rDelta = 0;

}

 

 

// move target to panned location

this.target.add( panOffset );

 

offset.x = radius * Math.sin( phi ) * Math.sin( theta );

offset.y = radius * Math.cos( phi );

offset.z = radius * Math.sin( phi ) * Math.cos( theta );

 

// rotate offset back to "camera-up-vector-is-up" space

offset.applyQuaternion( quatInverse );

 

position.copy( this.target ).add( offset );

 

this.object.lookAt( this.target );

 

if ( this.enableDamping === true ) {

 

thetaDelta *= ( 1 - this.dampingFactor );

phiDelta *= ( 1 - this.dampingFactor );

 

} else {

 

thetaDelta = 0;

phiDelta = 0;

 

}

 

scale = 1;

panOffset.set( 0, 0, 0 );

 

// update condition is:

// min(camera displacement, camera rotation in radians)^2 > EPS

// using small-angle approximation cos(x/2) = 1 - x^2 / 8

 

if ( zoomChanged ||

 lastPosition.distanceToSquared( this.object.position ) > EPS ||

    8 * ( 1 - lastQuaternion.dot( this.object.quaternion ) ) > EPS ) {

 

lastPosition.copy( this.object.position );

lastQuaternion.copy( this.object.quaternion );

zoomChanged = false;

 

return true;

 

}

 

return false;

 

};

 

}();

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息