Change the three.js object and run animation

There are glasses in the character, and I want to change these glasses to a different shape. It was possible to change it itself, but it moves strangely because it moves. Do you happen to know why?

Animation used a site called mixamo.com.

    const glasses = this.resources.items.glasses2.children.filter((m) => m instanceof Mesh)[0]//.scene.children[0].children[1];
    this.char3.instance.traverse((m) => {
      if (m.name === 'glasses') {
        m.geometry.dispose(); // Delete existing geometry
        m.geometry = glasses.geometry.clone(); // change to new geometry
        m.geometry.scale (0.000263, 0.000263, 0.000263); // scale, repositioning
        m.geometry.translate(-0.03, -0.05, 0.02);
        m.geometry.needsUpdate = true;
        m.material = [glasses.material[0].clone(), glasses.material[1].clone()]
        m.material.needsUpdate = true;
        m.updateMatrix();
      }
    })

During normal operation

When I changed my glasses

webgl

2022-09-20 11:30

1 Answers

It's a self-answer.

At first, I was going to change only Geometry, which holds the shape in Mesh, but I changed the direction because of the above error.

There is a skeleton in the model, and we added mesh as a child to the corresponding head bone to make it work.

this.char3.instance.traverse((bone) => {
  if (bone.name === 'mixamorigHeadTop_End') {
    if (bone.children[0]) {
      bone.children[0].removeFromParent();
    }
    const glasses = this.resources.items.glasses1.scene;
    glasses.scale.set(100, 100, 100);
    glasses.rotation.x = Math.PI * 2;
    glasses.position.set(0, -12.2, 5);
    bone.add(glasses);
  }
});

This works fine.

2022-09-20 11:30

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656