Move camera with mouse + caharacter(also using keys)

[EvilMax]

I cant solve this problem:

What i want to do is to create an FSP camera attached to a character and move character + camera with mouse ad keys.

PS: I already read all similar posts but nothing really useful.

Details (my thoughts):

1) Lock mouse in browser (v)

 

2) move camera with mouse:

Works with free camera, if i parent mesh to camera, but in this way mesh moves not in regular way and i cant apply gravity, etc...

I assume i should use FollowCamera, but in this way i cant move it with mouse anymore

Maybe i will need create a new type of camera? (Becouse the idea is that the camera should be attached to mesh in some point and should be movable by mouse)

 

3) Mesh should move forward/backward/left/right accordingly to camera direction

 

4)If you need, here you are my stupid code:

function CharacterController(character, scene){

	//keys variables
	var forwardKey;
	var backwardKey;
	var leftwardKey;
	var rightwardKey;

	//settings
	var inAir = true;
	var speed = 5;
	var jumpHeight = 300;
	var runSpeed;
	var crouchSpeed;

	//gravity settings
	var mass;
	var friction;
	var restitution;

	//var controller;
	var camera;

	/*LOCAL FUNCTIONS*/

	//create new following camera
	/*var attachCamera = function(target){
		//create following camera
		var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(5, 50, 45), scene);
	  camera.target = target; // target any mesh or object with a "position" Vector3

		camera.radius = 15; // how far from the object to follow
		camera.heightOffset = 8; // how high above the object to place the camera
		camera.rotationOffset = 180; // the viewing angle
		camera.cameraAcceleration = 0.05 // how fast to move
		camera.maxCameraSpeed = 20 // speed limit

		scene.activeCamera = camera;



		return camera;

	};*/
	var attachCamera = function() {
    var cam = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
    cam.attachControl(scene.getEngine().getRenderingCanvas());


    // Remap keys to move with ZQSD
    cam.keysUp = [87]; // W
    cam.keysDown = [83]; // S
    cam.keysLeft = [65]; // A
    cam.keysRight = [68]; // D
    cam.speed = 1;
    cam.inertia = 0.5;
    cam.angularSensibility = 1000;

		scene.activeCamera = cam;

    return cam;
	}

	//create custom physic settings for character
	var setCustomPhysicsState = function(newMass, newFriction, newRestitution){
		character.setPhysicsState(BABYLON.PhysicsEngine.SphereImpostor, {
				mass: newMass,
				friction: newFriction,
				restitution: newRestitution
		});
	};

	//manage inputs
	var initPlayerActions = function(){

		var forward = false;
		var turnLeft = false;
		var turnRight = false;

		scene.actionManager = new BABYLON.ActionManager(scene);
	    scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) {

	        switch(evt.sourceEvent.keyCode){
	            //space button
	            case 32:
	                //character.jump();
	                break;
	            //w button
	            case 87:
	                forward = true;
	                break;
	            //a button
	            case 65:
	                turnLeft = true;
	                break;
	            //d button
	            case 68:
	                turnRight = true;
	                break;
	            //s button
	            case 83:
	                //character.moveBackward();
	                break;
	        }

	    }));
	    scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) {

	        switch(evt.sourceEvent.keyCode){
	            //space button
	            case 32:
	                //character.jump();
	                break;
	            //w button
	            case 87:
	                forward = false;
	                break;
	            //a button
	            case 65:
	                turnLeft = false;
	                break;
	            //d button
	            case 68:
	                turnRight = false;
	                break;
	            //s button
	            case 83:
	                //character.moveBackward();
	                break;
	        }

	    }));


	    scene.registerBeforeRender(function () {
	    	if(forward){
	    		//player.position.z += 0.1;
	    		/*var forwards = new BABYLON.Vector3(parseFloat(Math.sin(player.rotation.y)) / speed, 0, parseFloat(Math.cos(player.rotation.y)) / speed);
				forwards.negate();
				player.moveWithCollisions(forwards);*/


				var posX = Math.sin(character.rotation.y) / speed;
				var posZ = Math.cos(character.rotation.y) / speed;
				//console.log(posX, posZ);
				character.position.x += posX;
				character.position.z += posZ;




	    }
	    if (turnLeft){
				character.rotation.y += 0.1;

			}
			if (turnRight){
				character.rotation.y -= 0.1
			}


	    });

	};





	var LockMousePointer = function() {

    // Request pointer lock
    var canvas = scene.getEngine().getRenderingCanvas();
    // On click event, request pointer lock
    canvas.addEventListener("click", function(evt) {
        canvas.requestPointerLock = canvas.requestPointerLock || canvas.msRequestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
        if (canvas.requestPointerLock) {
            canvas.requestPointerLock();
        }
    }, false);

    // Event listener when the pointerlock is updated (or removed by pressing ESC for example).
    var pointerlockchange = function (event) {
        controlEnabled = (
                           document.mozPointerLockElement === canvas
                        || document.webkitPointerLockElement === canvas
                        || document.msPointerLockElement === canvas
                        || document.pointerLockElement === canvas);
        // If the user is alreday locked
        if (!controlEnabled) {
            camera.detachControl(canvas);
        } else {
            camera.attachControl(canvas);
        }
    };

    // Attach events to the document
    document.addEventListener("pointerlockchange", pointerlockchange, false);
    document.addEventListener("mspointerlockchange", pointerlockchange, false);
    document.addEventListener("mozpointerlockchange", pointerlockchange, false);
    document.addEventListener("webkitpointerlockchange", pointerlockchange, false);
}

	/*window.addEventListener("mousemove", function () {
		// We try to pick an object
		var pickResult = scene.pick(scene.pointerX, scene.pointerY);


			camera.rotationOffset += scene.pointerX/1000;

			console.log(scene.pointerX);
			//console.log(scene.pointerY);


	});*/

	/*END LOCAL FUNCTIONS*/

  var init = function(){

		mass = 10;
		friction = 50;
		restitution = 0;

		LockMousePointer();

		camera = attachCamera(character);

character.position.z = 10;
		character.parent = camera;

		setCustomPhysicsState(mass, friction, restitution);
		//initPlayerActions();

  };
  init();



}

 

[Boz]

I gave an aswer on this topic : 

It works pretty well for me, FPS-style controls with keyboard and mouse