Shake your head saying yes

Questions
, ,
1

Good afternoon
I’m looking for a forum in Spanish, if you can advise me I’d appreciate it.
While I’m giving you my query, create a character with cylinder and sphere shapes in the Three.js editor. The bodies are a group with cylinders and the head is another group with spheres and other objects. I saved it as GLB and loaded it into my project correctly.
The problem is when I want the head to move saying yes, that is, I want the head to turn looking up and then down. I already have the movement of no, and I can turn my body. But when I try to rotate the head it leaves the body following a center that I have not been able to change.

imagen
imagen912×416 54.1 KB

Do this

imagen
imagen912×416 54.9 KB

I use this code but it doesn’t work

//calculo punto rotacion cabeza
const box = new THREE.Box3().setFromObject(cabezaPersonaje);
const centro = box.getCenter(new THREE.Vector3());
console.log(centro);
let centroCabeza = new THREE.Object3D();
centroCabeza.position.set(centro.x, centro.y, centro.z);
escena.add(centroCabeza);

I would appreciate some help

2

Some funny stuff for “yes/no” animations: Edit fiddle - JSFiddle - Code Playground
Press “N” or “Y” for respective animation.

2 Likes
3

Are you exporting the glb from blender? If so before exporting use Set origin to geometry while all meshes are selected

4

Hi @prisoner849 …

I couldn’t resist…
I made some changes and learned a lot
about how to use class and tween… :wink:
Thank You once again!
the link:

https://jrlazz.eu5.org/anim/tween_01.html

2 Likes
5

Good afternoon…
I was studying the examples and applied the topic of loading the glb object and separating the elements into different groups and then adding everything to a common group.
The result is the same as the head leaving the body. Did I miss something or is the glb object poorly made?
I share the model and the code made.

hombre_formas02.glb (89.5 KB)

cargador.load('./modelos/hombre_formas02.glb', (glb)=>{
	glb.scene.scale.set(2,2,2);
	//cambio propiedades de cada elemento del objeto 
	glb.scene.traverse(function (child) {
        if (child.isMesh) {
            child.castShadow = true;
            child.frustumCulled = false;
            child.geometry.computeVertexNormals();
        }
    });
	cabeza=glb.scene.children[0].children[0];
	cabeza.position.set(0,0,0);
	cabeza.rotation.set(0,0,0);
	cuerpo=glb.scene.children[0].children[1];
	cuerpo.position.set(0,0,0);
	cuerpo.rotation.set(0,0,0);
	hombre.add(cabeza);
	hombre.add(cuerpo);
	escena.add(hombre);
1 Like
6

Hi @didare …

Please take a look at:

https://jrlazz.eu5.org/anim/tween_03.html

And write me if this helps anyway!

PS: I do not know how to translate cabeza directly in glb… then I used an axeshelper to position cabeza, and then rotate it with setIntervals.

didare_01

1 Like
7

Good night.
Thank you very much jrlazz, this works perfect
I didn’t know this strategy, I’m going to study it more to know it.
I share how I made everything work thanks to your contribution.

cargador.load('./modelos/hombre_formas02.glb', (gltf)=>{
	gltf.scene.scale.set(2, 2, 2);
	let glb = gltf.scene;
	glb.traverse(function (child) {
        if (child.isMesh) {
            child.castShadow = true;
            child.frustumCulled = false;
            child.geometry.computeVertexNormals();
        }
    });
	cabeza=glb.children[0].children[0];
	cabeza.position.set(0,0,0);
	cabeza.rotation.set(0,0,0);
	cabeza2=cabeza.clone();
	cabeza2.position.set(0,-3,0);
	axes=new THREE.AxesHelper(0.1);
	axes.add(cabeza2);
	axes.position.set(0,3,0);
	cuerpo=glb.children[0].children[1];
	cuerpo.position.set(0,0,0);
	cuerpo.rotation.set(0,0,0);
	hombre.add(axes);
	hombre.add(cuerpo);
	escena.add(hombre);
1 Like
8

I got happy with Your words :wink:

1 Like