A-프레임에서 삼각형의 꼭지점에 애니메이션을 어떻게으로 애니메이션을하려고하면 나는, 애니메이션 태그를 사용하여 <code>a-frame</code>에 삼각형 프리미티브의 개별 정점 애니메이션을하려고 한 경우 이상한 결과</p> <p>을 데

Question

나는 https://jsfiddle.net/k7fbmo9k/

... 나는 다음과 같은 오류를 얻을

<a-triangle 
     vertex-a="-1 1 -5" 
     vertex-b="-1 1 -10" 
     vertex-c="4 1 -10" 
     color="blue" 
     material="side: double"> 
      <a-animation 
       attribute="vertex-b" 
       from="-1 1 -10" 
       to="-1 5 -10" 
       dur="4000" 
       > 
      </a-animation> 
    </a-triangle> 

바이올린 ... 그래서 같은 x,y,z 값을 변경, 기대

'THREE.BufferGeometry.computeBoundingSphere() : 계산 된 반지름은 입니다. "position"속성은 NaN 값을 가질 가능성이 있습니다. ' 난 단지 오류없이 같이 '작업' 것 같다 가깝지만과 같이 단일 값 ..

<a-triangle 
     vertex-a="-1 1 -5" 
     vertex-b="-1 1 -10" 
     vertex-c="4 1 -10" 
     color="blue" 
     material="side: double"> 
      <a-animation 
       attribute="vertex-b" 
       from="1" 
       to="5" 
       dur="4000" 
       > 
      </a-animation> 
    </a-triangle> 

바이올린 https://jsfiddle.net/k7fbmo9k/1/

을 제공하며, 경우

그러나, 애니메이션이있다 그러나 나는 그것을 통제 할 수 없다.

내가 잘못 했나요? 어떤 조언을

덕분에 어느 때보 다

Answer 1

. 애니메이션 구성 요소를 사용하면 https://www.npmjs.com/package/aframe-animation-component 정점이 예상대로 움직입니다. 아래 예 참조

<a-triangle 
     vertex-a="-1 1 -5" 
     vertex-b="-1 1 -10" 
     vertex-c="4 1 -10" 
     color="blue" 
     material="side: double" 
     animation="property: vertex-b; to: -1 5 -10; dur: 1000"> 
    </a-triangle> 

Answer 2

는 attribute="geometry.vertexB"을보십시오. 프리미티브 속성을 애니메이션화하는 데는 작동하지 않을 수 있으므로 지오메트리 구성 요소를 직접 애니메이션화합니다.

충분히 편안하면 성능을 위해 고급 수준의 정점에 애니메이션을 적용하는 것이 좋습니다. 버텍스 쉐이더를 사용할 수 있습니다.

또는 수동으로 정점을 조작 할 수 있습니다 :

var geometry = triangleEl.getObject3D('mesh').geometry; 
geometry.attributes.position[0] += 0.1; 
geometry.attributes.position[1] += 0.1; 
geometry.attributes.position[2] += 0.1; 
geometry.attributes.position.needsUpdate = true; 

그리고 애니메이션 효과는, 틱 처리기에서 할 : 나는 해결책을 가지고

AFRAME.registerComponent('animate-vertex', { 
    tick: function (t) { 
    // Animate vertex position until desired position using `t` to interpolate time. 
    } 
});