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?