three.js - Restablecer la cámara con OrbitControls.js

Question

Estoy usando OrbitControls.js para permitir la interacción del mouse. Estoy agregando un botón a la escena que permite "restablecer" la cámara a su estado original antes de cualquier interacción con el mouse.

Intenté guardar camera.position y camera.rotation antes de cualquier interacción:

camera_initial_position = camera.position; camera_initial_rotation = camera.rotation;

Y después de presionar el botón "reiniciar", se establece la posición inicial y la rotación:

camera.position = camera_initial_position; camera.rotation = camera_initial_rotation;

Funciona bien si pan no se usa. Si el usuario hace un barrido con el botón derecho del mouse, entonces el código anterior no puede "reiniciar" la cámara.

¿Cuál es el método correcto para "restablecer" la cámara a su estado anterior?

La revisión de three.js es r58 y este es el 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 );

Answer 1

Puede restablecer la cámara cuando usa OrbitControls así:

controls.reset();

three.js r.71

Answer 2

ah.adel es correcto La operación de panorámica actualizará el centro del controlador de la cámara. Por lo tanto, si necesita reiniciar / restaurar la cámara a una cámara predefinida, también debe configurar el centro del controlador de la cámara.

El siguiente código es un código simple para almacenar la posición de la cámara, la rotación y el centro de control

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

Use esta función para restaurar la cámara más tarde.

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();
}

Llamar a la función restoreCamera para restaurar la cámara guardada.

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

Espero que esto ayude a cualquiera que tenga este problema

Answer 3

La operación Pan está actualizando el vector llamado this.center , necesita reiniciarlo para ver el método pan,

this.center.add( distance );

ver este método también

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;
    };

y luego el método de actualización mantendrá la cámara mirando el vector center