Spline 경로를 따르는 Three.JS 객체 - 회전/탄젠트 문제 및 일정 속도 문제

Question

내 문제는 Orient object's rotation to a spline point tangent in THREE.JS과 비슷하다고 생각하지만 jsfiddle에 제대로 액세스 할 수 없으며 설명의 두 번째 부분에서 어려움을 겪습니다.

기본적으로 SplineCurve3을 사용하여 스플라인으로 생성 된 경로 다음에 간단한 큐브를 나타내는이 jsfiddle : http://jsfiddle.net/jayfield1979/qGPTT/2/을 생성했습니다. 탐색을 위해 표준 TrackBall 마우스 상호 작용을 사용하십시오.

경로를 따라 큐브를 배치하는 것은 간단합니다. 그러나 두 가지 질문이 있습니다.

먼저 큐브 회전 (Y 축은 UP 만)을 갖기 위해 t이 경로상의 위치 인 spline.getTanget(t)을 사용하고 있습니다. 제공된 접선의 .y 속성을 추출해도 회전이 여전히 꺼져 있기 때문에 뭔가 놓치고 있다고 생각합니다. 거기에 필요한 몇 가지 nomallizing 있습니까?

두 번째로, 속도는 경로를 따라 매우 다양합니다. 분명히 훨씬 더 많은 점들이 촘촘한 곡선을 만드는 데 쌓여 있습니다. 그러나 점 사이의 공백을보다 균등하게 분배하기 위해 경로를 리팩토링하는 방법이 있습니까? 나는 reparametrizeByArcLength 함수를 발견했지만 그것을 사용하는 방법에 대한 설명을 찾는데 어려움을 겪었습니다.

약간의 수학 더미에 대한 도움이나 설명은 감사하게 받아 들여질 것입니다.

Answer 1

일정한 속도를 유지하려면 .getPoint(t) 대신 .getPointAt(t)을 사용하십시오.

상자를 곡선의 접선으로 유지하려면 Orient object's rotation to a spline point tangent in THREE.JS에 대한 대답에서 설명한 것과 같은 논리를 따르십시오.

box.position.copy(spline.getPointAt(counter)); 

    tangent = spline.getTangentAt(counter).normalize(); 

    axis.crossVectors(up, tangent).normalize(); 

    var radians = Math.acos(up.dot(tangent)); 

    box.quaternion.setFromAxisAngle(axis, radians); 

편집 : 업데이트 바이올린 : http://jsfiddle.net/qGPTT/509/

three.js를 r.88