Changing Point of Rotation of a Bone

Questions
#1

Basically I have the head bone and i apply a rotation to it using where the player is looking at.
Screen Shot 2020-08-02 at 9.44.08 AM

Now the issue is that I can’t seem to figure out how to move the pivot of rotation of the bone from its center to below its starting position (where it touches the body). Below I have attached the loader code + code I use to rotate head of player. Hope you guys can help!

playerDraw[i].mesh.children[0].children[3].lookAt(
					playerRot[i].position.x * 100, 
					playerRot[i].position.y * 100, 
					playerRot[i].position.z * 100);

loader.load(
	"/Models/Character/originalplayer.glb",
	function (gltf, mat) {
		mesh0 = gltf.scene;
		mesh0.scale.set (scale,scale,scale);
		mesh0.position.set ( 0, -10, 0 );
		var newMaterial = new THREE.MeshStandardMaterial({color: 0x005555});
		mesh0.traverse((o) => {
		  	if (o.isMesh) o.material = newMaterial;
		});
		//This is head bone
		console.log(mesh0.children[0].children[3])
		playerDraw.push({mesh: mesh0, r: 0});
	},
	(xhr) => {
		console.log((xhr.loaded / xhr.total * 100) + '% loaded')
	},
	(error) => {
		console.log(error);
	}
);
#2

I don’t understand the * 100 bits in your lookAt code
I rotate a head bone in this example without much problem. The head always looks at the camera in my case.

1 Like
#3

Thank you for the reply! Rotation of bone is fine, however, it rotates at the center of the cube rather than the location underneath the cube. Below I have attached a video of 2 different players connected to a server

The lookAt code simply rotates the cube to the desired location and seems to work properly, except that the pivot is not at the intended location.

#4

I’m sure there is a more mathematical way to to do this,
But when I need a pivot point I usually add an object3d specifically for it.

Eg,
Create a neck,
add it to the torso,
and then change the heads parent from the torso to the neck.

Eg pseudo code, (I haven’t debugged or tested it works)

var torso = mesh0.children[0]  // I am guessing here
var neck = new THREE.Object3D();
var head = mesh0.children[0].children[3] //according to your demo code
torso.add(neck)
neck.position.set(0,1,0)  //another guess where it might be relative the torso
neck.add(head)
head.position.set(0,.25,0)  //another guess where it might be relative the neck
scene.add(torso)

Now instead or changing the heads lookAt, change the necks lookAt.

Or maybe you can add a neck to your original 3d model, find that when your are traversing, and rotate that.

Sorry, I haven’t tested this, but you get the idea.

In my codesandbox example, I actually find the neck and change its lookat despite the naming of my variable as headRef.

Another way, is to change the origin point of your head object in your original model to be the bottom of the cube. You can do this in blender.

1 Like
#5

Sounds like a great idea! I will try this out later today and hopefully it will work!