Three.js 使用OrbitControls.js重置相机

我正在使用OrbitControls.js来允许鼠标交互。我在场景中添加了一个按钮，允许将相机“重置”到任何鼠标交互之前的状态

我已尝试在任何交互之前保存camera.position和camera.rotation：

camera_initial_position = camera.position; camera_initial_rotation = camera.rotation; camera_初始位置=camera.position； camera_初始旋转=camera.rotation； 按下“复位”按钮后，设置初始位置和旋转：

camera.position = camera_initial_position; camera.rotation = camera_initial_rotation; camera.position=摄像机的初始位置； camera.rotation=摄像机的初始旋转； 如果不使用pan，效果很好。如果用户使用鼠标右键平移，则上述代码无法“重置”相机

将相机“重置”到其先前状态的正确方法是什么

three.js的版本是r58，这是OrbitControls.js：

/** * @author qiao / https://github.com/qiao * @author mrdoob / http://mrdoob.com * @author alteredq / http://alteredqualia.com/ * @author WestLangley / http://github.com/WestLangley */ THREE.OrbitControls = function ( object, domElement ) { this.object = object; this.domElement = ( domElement !== undefined ) ? domElement : document; // API this.enabled = true; this.center = new THREE.Vector3(); this.userZoom = true; this.userZoomSpeed = 1.0; this.userRotate = true; this.userRotateSpeed = 1.0; this.userPan = true; this.userPanSpeed = 2.0; this.autoRotate = false; this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60 this.minPolarAngle = 0; // radians this.maxPolarAngle = Math.PI; // radians this.minDistance = 0; this.maxDistance = Infinity; this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; // internals var scope = this; var EPS = 0.000001; var PIXELS_PER_ROUND = 1800; var rotateStart = new THREE.Vector2(); var rotateEnd = new THREE.Vector2(); var rotateDelta = new THREE.Vector2(); var zoomStart = new THREE.Vector2(); var zoomEnd = new THREE.Vector2(); var zoomDelta = new THREE.Vector2(); var phiDelta = 0; var thetaDelta = 0; var scale = 1; var lastPosition = new THREE.Vector3(); var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2 }; var state = STATE.NONE; // events var changeEvent = { type: 'change' }; this.rotateLeft = function ( angle ) { if ( angle === undefined ) { angle = getAutoRotationAngle(); } thetaDelta -= angle; }; this.rotateRight = function ( angle ) { if ( angle === undefined ) { angle = getAutoRotationAngle(); } thetaDelta += angle; }; this.rotateUp = function ( angle ) { if ( angle === undefined ) { angle = getAutoRotationAngle(); } phiDelta -= angle; }; this.rotateDown = function ( angle ) { if ( angle === undefined ) { angle = getAutoRotationAngle(); } phiDelta += angle; }; this.zoomIn = function ( zoomScale ) { if ( zoomScale === undefined ) { zoomScale = getZoomScale(); } scale /= zoomScale; }; this.zoomOut = function ( zoomScale ) { if ( zoomScale === undefined ) { zoomScale = getZoomScale(); } scale *= zoomScale; }; this.pan = function ( distance ) { distance.transformDirection( this.object.matrix ); distance.multiplyScalar( scope.userPanSpeed ); this.object.position.add( distance ); this.center.add( distance ); }; this.update = function () { var position = this.object.position; var offset = position.clone().sub( this.center ); // angle from z-axis around y-axis var theta = Math.atan2( offset.x, offset.z ); // angle from y-axis var phi = Math.atan2( Math.sqrt( offset.x * offset.x + offset.z * offset.z ), offset.y ); if ( this.autoRotate ) { this.rotateLeft( getAutoRotationAngle() ); } theta += thetaDelta; phi += phiDelta; // 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; // restrict radius to be between desired limits radius = Math.max( this.minDistance, Math.min( this.maxDistance, radius ) ); offset.x = radius * Math.sin( phi ) * Math.sin( theta ); offset.y = radius * Math.cos( phi ); offset.z = radius * Math.sin( phi ) * Math.cos( theta ); position.copy( this.center ).add( offset ); this.object.lookAt( this.center ); thetaDelta = 0; phiDelta = 0; scale = 1; if ( lastPosition.distanceTo( this.object.position ) > 0 ) { this.dispatchEvent( changeEvent ); lastPosition.copy( this.object.position ); } }; function getAutoRotationAngle() { return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; } function getZoomScale() { return Math.pow( 0.95, scope.userZoomSpeed ); } function onMouseDown( event ) { if ( scope.enabled === false ) return; if ( scope.userRotate === false ) return; event.preventDefault(); if ( event.button === 0 ) { state = STATE.ROTATE; rotateStart.set( event.clientX, event.clientY ); } else if ( event.button === 1 ) { state = STATE.ZOOM; zoomStart.set( event.clientX, event.clientY ); } else if ( event.button === 2 ) { state = STATE.PAN; } document.addEventListener( 'mousemove', onMouseMove, false ); document.addEventListener( 'mouseup', onMouseUp, false ); } function onMouseMove( event ) { if ( scope.enabled === false ) return; event.preventDefault(); if ( state === STATE.ROTATE ) { rotateEnd.set( event.clientX, event.clientY ); rotateDelta.subVectors( rotateEnd, rotateStart ); scope.rotateLeft( 2 * Math.PI * rotateDelta.x / PIXELS_PER_ROUND * scope.userRotateSpeed ); scope.rotateUp( 2 * Math.PI * rotateDelta.y / PIXELS_PER_ROUND * scope.userRotateSpeed ); rotateStart.copy( rotateEnd ); } else if ( state === STATE.ZOOM ) { zoomEnd.set( event.clientX, event.clientY ); zoomDelta.subVectors( zoomEnd, zoomStart ); if ( zoomDelta.y > 0 ) { scope.zoomIn(); } else { scope.zoomOut(); } zoomStart.copy( zoomEnd ); } else if ( state === STATE.PAN ) { var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; scope.pan( new THREE.Vector3( - movementX, movementY, 0 ) ); } } function onMouseUp( event ) { if ( scope.enabled === false ) return; if ( scope.userRotate === false ) return; document.removeEventListener( 'mousemove', onMouseMove, false ); document.removeEventListener( 'mouseup', onMouseUp, false ); state = STATE.NONE; } function onMouseWheel( event ) { if ( scope.enabled === false ) return; if ( scope.userZoom === false ) return; var delta = 0; if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9 delta = event.wheelDelta; } else if ( event.detail ) { // Firefox delta = - event.detail; } if ( delta > 0 ) { scope.zoomOut(); } else { scope.zoomIn(); } } function onKeyDown( event ) { if ( scope.enabled === false ) return; if ( scope.userPan === false ) return; switch ( event.keyCode ) { case scope.keys.UP: scope.pan( new THREE.Vector3( 0, 1, 0 ) ); break; case scope.keys.BOTTOM: scope.pan( new THREE.Vector3( 0, - 1, 0 ) ); break; case scope.keys.LEFT: scope.pan( new THREE.Vector3( - 1, 0, 0 ) ); break; case scope.keys.RIGHT: scope.pan( new THREE.Vector3( 1, 0, 0 ) ); break; } } this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false ); this.domElement.addEventListener( 'mousedown', onMouseDown, false ); this.domElement.addEventListener( 'mousewheel', onMouseWheel, false ); this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox this.domElement.addEventListener( 'keydown', onKeyDown, false ); }; THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype ); /** *@作者乔/https://github.com/qiao *@author mrdoob/http://mrdoob.com *@author alteredq/http://alteredqualia.com/ *@作者韦斯特兰利/http://github.com/WestLangley */ 三.轨道控制=功能（对象、DOMELENT）{ this.object=对象； this.domElement=（domElement！==未定义）？domElement:文档； //原料药 this.enabled=true； this.center=new THREE.Vector3（）； this.userZoom=true； this.userZoomSpeed=1.0； this.userRotate=true； this.userRotateSpeed=1.0； this.userPan=true； this.userPanSpeed=2.0； this.autoRotate=false； this.autoRotateSpeed=2.0；//fps为60时每轮30秒 this.minPolarAngle=0；//弧度 this.maxPolarAngle=Math.PI；//弧度 此值为0.minDistance=0； 这个.maxDistance=无穷大； this.keys={左：37，上：38，右：39，下：40}； //内部构件 var范围=此； var EPS=0.000001； 每轮可变像素=1800； var rotateStart=new THREE.Vector2（）； var rotateEnd=new THREE.Vector2（）； var rotateDelta=new THREE.Vector2（）； var zoomStart=new THREE.Vector2（）； var zoomEnd=new THREE.Vector2（）； var zoomDelta=new THREE.Vector2（）； var-phiDelta=0； var thetaDelta=0； var量表=1； var lastPosition=new THREE.Vector3（）； 变量状态={NONE:-1，旋转：0，缩放：1，平移：2}； var state=state.NONE； //事件 var changevent={type:'change'}； this.rotateLeft=函数（角度）{ 如果（角度===未定义）{ 角度=getAutoRotationAngle（）； } thetaDelta-=角度； }; this.rotateRight=函数（角度）{ 如果（角度===未定义）{ 角度=getAutoRotationAngle（）； } thetaDelta+=角度； }; this.rotateUp=函数（角度）{ 如果（角度===未定义）{ 角度=getAutoRotationAngle（）； } φδ-=角度； }; this.rotateDown=函数（角度）{ 如果（角度===未定义）{ 角度=getAutoRotationAngle（）； } φδ+=角度； }; this.zoomIn=函数（zoomScale）{ 如果（缩放===未定义）{ zoomScale=getZoomScale（）； } 比例/=动物比例； }; this.zoomOut=函数（zoomScale）{ 如果（缩放===未定义）{ zoomScale=getZoomScale（）； } 比例*=动物比例； }; this.pan=函数（距离）{ 距离。变换方向（this.object.matrix）； 距离.multilyscalar（scope.userPanSpeed）； this.object.position.add（距离）； 此.center.add（距离）； }; this.update=函数（）{ 变量位置=this.object.position； var offset=position.clone（）.sub（this.center）； //从z轴到y轴的角度 varθ=数学atan2（偏移量x，偏移量z）； //与y轴的角度 var phi=数学atan2（数学sqrt（offset.x*offset.x+offset.z*offset.z），offset.y）； if（this.autoRotate）{ 这个.rotateLeft（getAutoRotationAngle（））； } θ+=θ德尔塔； φ+=φδ； //将phi限制在所需限值之间 phi=Math.max（this.minPolarAngle，Math.min（this.maxPolarAngle，phi））； //将phi限制在EPS和PI-EPS之间 phi=Math.max（EPS，Math.min（Math.PI-EPS，phi））； 变量半径=偏移量。长度（）*比例； //将半径限制在所需限制之间 radius=Math.max（this.minDistance，Math.min（this.maxDistance，radius））； 偏移量x=半径*数学正弦（φ）*数学正弦（θ）； 偏移量y=半径*数学cos（φ）； 偏移量z=半径*数学正弦（φ）*数学余弦（θ）； 位置。复制（此。中心）。添加（偏移）； this.object.lookAt（this.center）； θ=0； phiDelta=0； 比例=1； if（lastPosition.distanceTo（this.object.position）>0）{ 此。dispatchEvent（changeEvent）； lastPosition.copy（this.object.position）； } }; 函数getAutoRotationAngle（）{ 返回2*Math.PI/60/60*scope.autoRotateSpeed； } 函数getZoomScale（）{ 返回Math.pow（0.95，scope.userZoomSpeed）； } 函数onMouseDown（事件）{ if（scope.enabled==false）返回； if（scope.userRotate==false）返回； event.preventDefault（）； 如果（event.button==0）{ state=state.ROTATE； rotateStart.set（event.clientX，event.clientY）； }else if（event.button==1）{ state=state.ZOOM； zoomStart.set（event.clientX，event.clientY）； }else if（event.button==2）{ state=state.PAN； } document.addEventListener（'mousemove'，onMouseMove，false）； document.addEventListener（'mouseup'，onMouseUp，false）； } mouseMove函数（事件）{ 如果（scope.enabled==

this.center.add( distance );

this.resetCamera = function ( ) {
        this.object.position.x= camera_initial_position.xPosition;
        this.object.position.y = camera_initial_position.yPosition;
        this.object.position.z = camera_initial_position.zPosition;
        this.center.x= camera_initial_target.x;
        this.center.y= camera_initial_target.y;
        this.center.z= camera_initial_target.z;
    };

var camToSave = {};
camToSave.position = camera.position.clone();
camToSave.rotation = camera.rotation.clone();
camToSave.controlCenter = controls.center.clone();

function restoreCamera(position, rotation, controlCenter){
    camera.position.set(position.x, position.y, position.z);
    camera.rotation.set(rotation.x, rotation.y, rotation.z);

    controls.center.set(controlCenter.x, controlCenter.y, controlCenter.z);
    controls.update();

    render();
}

restoreCamera(camToSave.position, camToSave.rotation, camToSave.controlCenter);

controls.reset();