Forum

Switching style camera problems.

28 September 2016 15:18 #12222
We have a project in which we have to change the way the camera target to first person mode.
I managed to change the camera to first person target but the moment in which we must return back to target gives me an error:


print.js:73 B4W ERROR: eye_rotate(): Wrong camera object or camera move styleerror
print.js:73exports.eye_rotate
camera.js:448default_rotation_cb
mouse.js:315smooth_cb
mouse.js:308exports.update
controls.js:136frame
main.js:465loop
main.js:421


My 2 functions:
function change_camera_style(tipo, objCamera, objLocation, objTarget) {
	var cameraVec3 = m_trans.get_translation(objCamera);
	var locationVec3 = m_trans.get_translation(objLocation);
	var targetVect3 = m_trans.get_translation(objTarget);
	switch(tipo) {
		case "estatica":
			m_app.enable_camera_controls();
			m_cam.static_setup(objCamera, { pos: locationVec3, look_at: targetVect3 });
			// m_cam.correct_up(objCamera, m_util.AXIS_Y, true);
			console.log('estatica (disabled camera controsl)');
			// console.log(m_cam.get_move_style(objCamera));
			var canvas_elem = m_cont.get_canvas();
			if (m_mouse.check_pointerlock(canvas_elem)){
				m_mouse.exit_pointerlock(canvas_elem);
				canvas_elem.addEventListener("mouseup", main_canvas_click, false);
			};
			canvas_elem.addEventListener("mouseup", main_canvas_click, false);
			FIRSTPERSON = false;
			break;
		case "dinamica":
		    m_app.enable_camera_controls();
			m_cam.target_setup(objCamera, { pos: locationVec3, pivot: targetVect3});
			m_cam.rotate_camera(objCamera, Math.PI/8, 0, true, true);
			m_cam.target_switch_panning(objCamera, true); // activar el panning
			var canvas_elem = m_cont.get_canvas();
			// if (m_mouse.check_pointerlock(canvas_elem)){
			// 	m_mouse.exit_pointerlock(canvas_elem);
			// 	canvas_elem.addEventListener("mouseup", main_canvas_click, false);
			// };
			FIRSTPERSON = false;
			console.log('dinamica (enabled camera controsl)');
			console.log(m_cam.get_move_style(objCamera));
			break;
		case "eye":
		    if (FIRSTPERSON == false){
				m_app.disable_camera_controls();
				m_cam.eye_setup(objCamera, { pos: locationVec3, look_at: targetVect3, horiz_rot_lim: EYE_HORIZ_LIMITS, vert_rot_lim: EYE_VERT_LIMITS });
				m_cam.rotate_camera(objCamera, 0, -Math.PI/16, true, true);
				var character = m_scs.get_first_character();
				m_cons.append_stiff_trans(objCamera, character, [0, 4.5, 0]); // el vector este le indicamos el offset del cuello del personaje
				// para poder capturar el raton del usuario:
				var canvas_elem = m_cont.get_canvas();
				canvas_elem.addEventListener("mouseup", function(e){ m_mouse.request_pointerlock(canvas_elem) }, false);
				FIRSTPERSON = true;

				console.log('eye (disabled camera controsl)');
				console.log(m_cam.get_move_style(objCamera));
				// m_app.enable_camera_controls();
				// console.log(locationVec3);
				// console.log(targetVect3);
			}
			break;
	}
};

function cameraAnimations(camobj, camloc, camtarget){
	// Límites de la cámara:
	function get_cam_limits(){
		m_cam.set_move_style(camobj, m_cam.MS_TARGET_CONTROLS); // devuelve cámara a dinámica
		var dist = m_cam.target_get_distance_limits(camobj);
		var hor = m_cam.target_get_horizontal_limits(camobj);
		var ver = m_cam.target_get_vertical_limits(camobj);
		var limits = {d:dist, h:hor, v:ver};
		return limits;
	};
	function reset_camera_limits(limits) {
		m_cam.target_set_distance_limits(camobj, limits['d']);
		m_cam.target_set_horizontal_limits(camobj, limits['h']);
		m_cam.target_set_vertical_limits(camobj, limits['v']);
	};
	// calcular la velocidad optima:
	function velocidadoptima(camobj, camloc){ // velocidadoptima(camobj, camloc);
		var puntoA = m_trans.get_translation(camobj);
		var puntoB = m_trans.get_translation(camloc);
		var deltaX = puntoB[0] - puntoA[0]
		var deltaY = puntoB[1] - puntoA[1];
		var deltaZ = puntoB[2] - puntoA[2];
		var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ);
		var opspeed = distance/2; // ajustar a gusto
		if (opspeed < 0.5) opspeed = 0.5;
		return opspeed;
	}
	// change_camera_style('dinamica', camobj, camloc, camtarget);
	var cam_limits = get_cam_limits();
	var velocidad = velocidadoptima(camobj, camloc);
	// pos si pierde la velocidad:
	if (velocidad == 0.5){
		velocidad = 2.9800495608016644;
	};

	// console.log(velocidad);
	// // change_camera_style(tipo, objCamera, objLocation, objTarget)
	// change_camera_style('estatica', camobj, camloc, camtarget);
	// m_camanim.move_camera_to_point(camobj, camloc, velocidad, velocidad);


	// var canvas_elem = m_cont.get_canvas();
	// if (m_mouse.check_pointerlock(canvas_elem)){
	// 	m_mouse.exit_pointerlock(canvas_elem);
	// 	canvas_elem.addEventListener("mouseup", main_canvas_click, false);
	// 	console.log('tiene lock');
	// };
	// change_camera_style('dinamica', camobj, camloc, camtarget);

	m_cam.set_move_style(camobj, m_cam.MS_STATIC); // convierte cámara en estática (si no, no se anima por API)
	// change_camera_style('estatica', camobj, camloc, camtarget);
	m_camanim.move_camera_to_point(camobj, camloc, velocidad, velocidad, camanim_fin);

	var camtarget_loc = m_trans.get_translation(camtarget);
	m_cam.set_move_style(camobj, m_cam.MS_TARGET_CONTROLS); // devuelve cámara a dinámica
	// change_camera_style('dinamica', camobj, camloc, camtarget);
	m_cam.target_set_trans_pivot(camobj, null, camtarget_loc); // devuelve pivote al target
	reset_camera_limits(cam_limits); // al cambiar el tipo de cámara pierde los límites, hay que resetearlos

	function camanim_fin(){
		var camtarget_loc = m_trans.get_translation(camtarget);
		m_cam.set_move_style(camobj, m_cam.MS_TARGET_CONTROLS); // devuelve cámara a dinámica
		// change_camera_style('dinamica', camobj, camloc, camtarget);
		m_cam.target_set_trans_pivot(camobj, null, camtarget_loc); // devuelve pivote al target
		reset_camera_limits(cam_limits); // al cambiar el tipo de cámara pierde los límites, hay que resetearlos
	FIRSTPERSON = false;
	};
};


Here use these functions on click my html tags:
$("#chageviewToFirstPerson").click(function() {
		var camobj = m_scs.get_active_camera();
		var camloc = m_scs.get_object_by_name("fpLocation");
		var camtarget = m_scs.get_object_by_name("fpTarget");
		// cameraAnimations(camobj, camloc, camtarget);
		change_camera_style('eye', camobj, camloc, camtarget);
	});

$("#returnToCameraTarget").on('click', function(e) {
	    e.preventDefault();
		var camobj = m_scs.get_active_camera();
		var camloc = m_scs.get_object_by_name("home_cam_location");
		var camtarget = m_scs.get_object_by_name("camera_target");
		// cameraAnimations(camobj, camloc, camtarget);
		cameraAnimations(camobj, camloc, camtarget);
		change_camera_style('dinamica', camobj, camloc, camtarget);
	});
28 September 2016 16:33 #12229
Hi! This error is related to the pointerlock functionality, which is intended to use with EYE cameras only.

You should call the m_mouse.exit_pointerlock() method every time right before switching the camera type to anything else than EYE. I think this should be done in the cameraAnimations function before switching the camera to STATIC.
Blend4Web Team
28 September 2016 16:56 #12234
Oh, this line also can lead to the error:

canvas_elem.addEventListener("mouseup", function(e){ m_mouse.request_pointerlock(canvas_elem) }, false);

This listener should be removed before switching the camera type, because the pointerlock will be requested on every click regardless the type.

Ideally the algorithm should be like the following:
—- switch to TARGET/STATIC —–
exit_pointerlock
removeEventListener("mouseup")
perform switching

—- switch to EYE —–
addEventListener("mouseup")
perform switching
Blend4Web Team
29 September 2016 16:24 #12254
Reply to post of user Ivan Lyubovnikov
Oh, this line also can lead to the error:

canvas_elem.addEventListener("mouseup", function(e){ m_mouse.request_pointerlock(canvas_elem) }, false);

This listener should be removed before switching the camera type, because the pointerlock will be requested on every click regardless the type.

Ideally the algorithm should be like the following:
—- switch to TARGET/STATIC —–
exit_pointerlock
removeEventListener("mouseup")
perform switching

—- switch to EYE —–
addEventListener("mouseup")
perform switching

This does not work for me :(
When I get to make the lockpointer work, then it is impossible to eliminate it.
I tired it with:
m_mouse.exit_pointerlock(canvas_elem);
canvas_elem.removeEventListener("mouseup", function(e){ m_mouse.request_pointerlock(canvas_elem) }, false);


But nothing.

function pointerBlockFunct(camera, canvas_elem){
	console.log(canvas_elem);
	console.log(m_mouse.check_pointerlock(canvas_elem));
	// if (m_cam.get_move_style(camera) == m_cam.MS_EYE_CONTROLS){
	// 	console.log('camara is type eye!');
	// } else {
	// 	console.log('camara is not type eye"');
	// }
	if (m_mouse.check_pointerlock(canvas_elem)){ // if it is lock then:
		console.log('try unlock');
		m_mouse.exit_pointerlock(canvas_elem);
	} else {
		console.log('try lock');
		var canvas_elem = m_cont.get_canvas();
		// NOW DONT LOCK MOUSE!!
		var canvas_elem = document.getElementById("main_canvas_container");
		m_mouse.request_pointerlock(canvas_elem);
		canvas_elem.addEventListener("mouseup", function(e){ m_mouse.request_pointerlock(canvas_elem) }, false);
	};
};


$("#returnToCameraTarget").unbind().click(function(){
	// console.log('clicked');
	var camera = m_scs.get_active_camera();
	var canvas_elem = m_cont.get_canvas();
	
	// canvas_elem.addEventListener("mouseup", main_canvas_click, false);
	m_app.enable_camera_controls();
	
	var camloc = m_scs.get_object_by_name("home_cam_location");
	var camtarget = m_scs.get_object_by_name("camera_target");
	cameraAnimations(camera, camloc, camtarget);
	// console.log(camloc, camtarget);
	// change_camera_style('dinamica', camobj, camloc, camtarget);
	m_changeCamStyle.set_target_camera(
		camera,
		POS,
		PIVOT,
		TARGET_HORIZ_LIMITS,
		TARGET_VERT_LIMITS,
		DIST_LIMITS,
		PIVOT_LIMITS,
		USE_PANNING
	);
	canvas_elem.removeEventListener("mouseup", pointerBlockFunct(camera, canvas_elem), false);
});

// var canvas_elem = m_cont.get_canvas();
// document.getElementById("vista").addEventListener("click", function(){
// 	canvas_elem.addEventListener("mouseup", pointerBlockFunct(canvas_elem), false);
// });
$("#chageviewToFirstPerson").unbind().click(function(){
	m_app.disable_camera_controls();
	var camera = m_scs.get_active_camera();
	// var canvas_elem = document.getElementById("main_canvas_container");
	var canvas_elem = m_cont.get_canvas();
	canvas_elem.addEventListener("mouseup", pointerBlockFunct(camera, canvas_elem), false);
	// pointerBlockFunct(canvas_elem);
	var camloc = m_scs.get_object_by_name("fpLocation");
	var camtarget = m_scs.get_object_by_name("fpTarget");
	cameraAnimations(camera, camloc, camtarget);
	// para poder restaurar las coordenadas en las que se queda la camara una vez usado eye:
	POS = m_changeCamStyle.set_eye_camera(camera);
});


Help? :(
29 September 2016 16:45 #12255
This does not work for me :(
When I get to make the lockpointer work, then it is impossible to eliminate it.
I tired it with:

This is because you create completely another callback (anonymous function) right before passing it in the removeEventListener method. You should do it with non-anonymous function, because the second parameter should be the same object. For example, like that:

var request_cb = function(e) {
    var canvas_elem = m_cont.get_canvas();
    m_mouse.request_pointerlock(canvas_elem);
};
...
canvas_elem.addEventListener("mouseup", request_cb);
...
canvas_elem.removeEventListener("mouseup", request_cb);
...


You can also debug existed callbacks in Chrome in the Elements panel:
Blend4Web Team
 
Please register or log in to leave a reply.