aframe에서 복잡한 모델을 구현하는 방법

Question

저는 aframe과 ECS 모델링 기술에 익숙하지 않아 아키텍처를 어떻게 사용해야하는지 완전히 이해하지 못했을 것입니다.

로보트 팔과 같은 모델을 만들고 싶습니다. 단순화 된 버전은 기본이며, 로테이터와 팔 자체 위에 있습니다. 모델은 단일 json 파일에서로드되며 여러 부분에 대해 여러 개의 중첩 된 오브젝트로 구성됩니다.

서로 다른 자유도를 독립적으로 제어하려는 경우 (객체 자체의 다른 하위에 object.rotation 값을 설정하는 것을 의미 함) 어떻게 프레임 워크에서 구현 될 수 있습니까?

내가 생각한 한 가지는 모델 파일을 하나의 구성 요소로로드하고 각 자유도를 별도의 구성 요소로 구현하는 것이 었습니다. 그래서 기본적으로 이런 식으로 뭔가 :

<a-entity robot-model="..." base-rotation="123" arm-pitch="10" /> 

또는 그것을 이런 식으로 뭔가를 registerPrimitive를 사용하는 더 좋은 방법이 있을까요? 그것은 다음과 같습니다에

나의 첫번째 의견 : 당신이 이미 생성 블렌더, 마야, 또는 Cinema4D 같은 소프트웨어를 사용하여 3D 모델을 리깅 한 있으리라 믿고있어

registerComponent('robot', { 
    schema: {type: 'asset'}, 
    update() { 
    // - load and parse model using THREE.ObjectLoader 
    // - once ready, assign property this.parts with the various 
    // parts of the robot-arm 
    } 
}); 

registerComponent('dof-1', { 
    schema: {type: 'number'}, 
    dependencies: ['robot'], 
    init() { 
    this.robot = this.el.components.robot; 
    }, 
    tick(t, dt) { 
    if (!this.robot.parts) { return; } // not ready yet 
    // update values (left out here: acceleration etc) 
    this.robot.parts.dof1.rotation.x = this.data; 
    } 
}); 

// more parts/dof implemented likewise 

Answer 1

. 그렇지 않다면, 문서 Animation from Blender to three.js이 좋은 출발점입니다.

일단 작업을 완료하면 스키닝/리깅을 지원하는 모든 형식의 모델을 A- 프레임으로 가져올 수 있습니다. THREE.ObjectLoader (.json) 또는 THREE.GLTFLoader (.gltf)가 좋은 옵션이며이 로더를 래핑하는 이미 A-Frame 구성 요소가 있습니다. 이 시점에서

<a-entity object-model="src: url(my-model.json)"></a-entity> 

당신은 어떤 자바 스크립트를 작성하지 않고, 현장에서 모델을 볼 수 있지만, 아직 애니메이션되지 않습니다 : 당신은 JSON과 object-model component from A-Frame Extras를 사용하는 가정하면, 당신은 할 수 있습니다. 어떤 애니메이션을 원하는지 알고 있다면 동일한 모델링 소프트웨어 인 Blender, Maya 또는 Cinema4D를 사용하여 키 프레임 또는 모프 타겟에서 애니메이션을 만들 수 있습니다. 다음과 같이 모델을 내보낼 때 애니메이션을 포함 가정하면, (또한 A-프레임 부가 서비스)를 animation-mixer 구성 요소를 사용할 수 있습니다

<a-entity object-model="src: url(my-model.json)" 
      animation-mixer="clip: *;"></a-entity> 

이 한 번에 모든 애니메이션을 재생합니다. * 대신 클립 이름을 사용하여 특정 애니메이션을 재생할 수 있습니다.

런타임에 애니메이션을 계산해야하고 모델로 구울 수없는 경우 사용자 지정 구성 요소를 작성해야합니다. 이 빠르게 복잡해진다하지만 기본도 나쁘지 않다 :

<a-entity object-model="src: url(my-model.json)" 
      custom-animation></a-entity> 

그리고 JS :이 three.js를 층에 더 할 것

AFRAME.registerComponent('custom-animation', { 
    tick: function (t, dt) { 
    var mesh = this.el.getObject3D('mesh'); 

    // With complex models, you may need to loop over `mesh.children` 
    // in case the mesh you want to animate is a child of another 
    // object in your model file. 
    if (!mesh || !mesh.isSkinnedMesh) { return; } 

    mesh.traverse(function (node) { 
     if (node.isBone && node.name === 'arm') { 
     node.rotation.x += dt * Math.PI/1000; 
     } 
    }); 
    } 
});