three.js 오브젝트 변경 및 애니메이션 실행

조회수 224회

캐릭터에 안경이 있는데, 이 안경을 다른 모양으로 변경하고 싶습니다. 바꾸는 것 자체는 가능했는데, 움직임을 주니까 이상하게 움직입니다.. 혹시 왜 그런건지 알 수 있을까요?

애니메이션은 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(); // 기존 지오메트리 삭제
        m.geometry = glasses.geometry.clone(); // 새 지오메트리로 변경
        m.geometry.scale(0.000263, 0.000263, 0.000263); // 축척, 위치 변경
        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();
      }
    })

정상 작동할 때
img

안경을 바꿨을 때
img

  • 잘은 모르지만 아마도 scale이 문제일 거에요. 안경알 크기를 바꾸기 위해서 안경 전체를 뻥튀기하고 계신 듯한데, 안경알의 크기만 바꿀 수는 없는가 보죠? 엽토군 2022.1.16 09:33
  • @엽토군 안경알과 안경 모두 같은 오브젝트라서 똑같이 되어있습니다. 댓글 감사합니다 hopoduck 2022.1.17 10:21

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    자문 자답입니다.

    처음에는 Mesh에서 형상을 보관하고 있는 Geometry만 변경해서 작업을 하려고 했었는데, 위와 같은 오류가 나서 방향을 바꿨습니다.

    모델에 스켈레톤이 있는데 해당하는 머리 뼈에 자식으로 mesh를 추가해서 작동하게 했습니다.

    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);
      }
    });
    

    이렇게 하니 잘 작동합니다.

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.