Rigged Character Head Follow Mouse Position

I tried finding the answer to this but didn’t find anything specific to controlling bone movements with a mouse. I’m trying to replicate this effect in Babylon: Interactive 3D Character with Three.js | Codrops

I was able to locate the head bone in the model I imported and can rotate it but it’s very glitchy. This is the code I have so far:

model = SceneLoader.ImportMesh(
"",
"../amazonaws.com/AnimatedCharacters/",
"TigerRigged.glb",
scene,
(meshes, particles, skeleton) => {
  console.log(skeleton[0].bones[7]);
  head = skeleton[0].bones[7];
  console.log(head.name);
  let config = {
    // pitch = x yaw = y  roll= z
    pitch: 0,
    yaw: 0,
    roll: 0,
  };

  scene.registerBeforeRender(() => {
    document.addEventListener("mousemove", function (e) {
       config.pitch += e.clientY;
      config.yaw += e.clientX;

      // head.getTransformNode().rotate(Axis.X, -0.1);
    });

     head.setYawPitchRoll(
       config.yaw,
      config.pitch,
       config.roll,
       Space.World,
       meshes[0]
     );
  });
}
);

In the docs it mentions using the setYawPitchRoll which seemed to work, but the movement is glitchy. I don’t know if it’s because I’m not clamping down the mouse inputs it receives or if that’s just not a great way to approach it. As you can see I also have a section commented out where I tried to rotate the transform node. That also kind of works, but it’s also glitchy and I’m not entirely sure that is a good approach.

Not sure if this can be replicated in Babylon, but this is something I built in Unity that has the movement mechanics for a tank turret:

public float speed = 50;
public Transform turretBase;
private float moveX;

// Use this for initialization
void Start () {
	
	Cursor.lockState = CursorLockMode.Locked;
	Cursor.visible = false;
}

// Update is called once per frame
void Update () {
	
	BaseRotation();

}


void BaseRotation ()
{
	moveX = Input.GetAxis("Mouse X") * (speed * Time.deltaTime);
	turretBase.Rotate(0,moveX, 0);
}

Has anyone created this or can point me to something that would help me solve this?

Hello we will need a repro in the playground:

Here is a simple example:
https://www.babylonjs-playground.com/#WRREQU#9

I think the mouse movement needs to be clamped down. Should I use be using ‘setYawPitchRoll’ to rotate the head?

Well I guess you have to consider that you cannot use the mouse coordinates (which is a 2d vector in screen space) as a rotation vector (which is expected to be in radians)

The best option here is to project the mouse coordinates in 3d and use the head.lookAt feature

2 Likes

Thanks, I’ll give that a shot. That’s actually very similar to how I did things in Unity, except there I attached a gameobject to a mouse-controlled camera then had the character look at the object (it was not visible).

1 Like