three.js 오로라 뿔 과 4 원 수의 사용 방법

11218 단어 three.js오 라 각4 원수
머리말
이 곽 선생 은 오로라 뿔 과 4 원 수 를 이야기 하 러 왔 다.오로라 뿔 과 4 원 수의 장단 점 은 흔히 말 하 는 화제 이다.사용 조건 은 더 이상 말 하지 않 겠 다.나 는 사용 방법 만 말 하 겠 다.
1.오 라 뿔(오 일 러)
오로라 각 은 회전 변 화 를 설명 하고 지정 한 축 순서 와 각 축의 지정 한 회전 각 도 를 통 해 물 체 를 회전 시킨다.다음은 우리 가 그것 의 방법 을 좀 봅 시다.
1. set( x: number, y: number, z: number, order?: string ): Euler
x-라디안 으로 x 축 회 전량 을 표시 합 니 다.y-라디안 으로 y 축 회 전량 을 표시 합 니 다.z-라디안 으로 z 축 회 전량 을 표시 합 니 다.order-(optional)회전 순 서 를 나타 내 는 문자열 입 니 다.이 오로라 변환 각도 와 회전 순서 order 를 설정 합 니 다.
2. clone(): this
현재 인자 와 같은 새 오로라 각 을 되 돌려 줍 니 다.
3. copy( euler: Euler ): this
euler 의 속성 을 현재 대상 으로 복사 합 니 다.
4. setFromRotationMatrix( m: Matrix4, order?: string ): Euler
m-Matrix 4 매트릭스 위의 3x3 부분 은 순 회전 매트릭스 rotation matrix(즉,크기 조정 이 일어나 지 않 음)order-(선택 가능 한 매개 변수)가 회전 순 서 를 나타 내 는 문자열 입 니 다.order 순 서 를 기반 으로 한 순 회전 행렬 을 사용 하여 현재 오로라 각 을 설정 합 니 다.

var vector = new THREE.Vector3(0,0,1);
var matrix = new THREE.Matrix4().makeRotationAxis(vector, Math.PI/6)
var euler = new THREE.Euler().setFromRotationMatrix(matrix); //   Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}
5. setFromQuaternion( q: Quaternion, order?: string ): Euler
order 가 지정 한 방향 에 따라 귀 일 화 된 4 원 수 를 사용 하여 이 오로라 변환 각 도 를 설정 합 니 다.

var vector = new THREE.Vector3(0,0,1);
var quaternion = new THREE.Quaternion().setFromAxisAngle(vector, Math.PI/6)
var euler = new THREE.Euler().setFromQuaternion(quaternion);//   Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}
6. setFromVector3( v: Vector3, order?: string ): Euler
x,y and z 를 설정 하고 Order 를 선택 적 으로 업데이트 합 니 다.

var vector = new THREE.Vector3(0,0,Math.PI/6);
var euler = new THREE.Euler().setFromVector3(vector);/   Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}
7. reorder( newOrder: string ): Euler
이 오 라 각 을 통 해 4 원 수 를 만 들 고 이 4 원 수 와 새로운 순서 로 이 오 라 각 을 설정 합 니 다.
8. equals( euler: Euler ): boolean
euler 가 현재 대상 과 같 는 지 확인 합 니 다.
9. fromArray( xyzo: any[] ): Euler
길이 가 3 이나 4 인 array.array[3]는 선택 할 수 있 는 order 인자 입 니 다.오로라 뿔 의 x 분량 을 array[0]로 설정 합 니 다.오로라 뿔 의 x 분량 을 array[1]로 설정 합 니 다.오로라 뿔 의 x 분량 을 array[2]로 설정 합 니 다.array[3]를 오 라 각 의 order 에 설정 합 니 다.선택 할 수 있다.
10. toArray( array?: number[], offset?: number ): number[]
배열 을 되 돌려 줍 니 다:[x,y,z,order].
11. toVector3( optionalResult?: Vector3 ): Vector3
벡터 3 의 형식 으로 오 라 각 의 x,y,z 를 되 돌려 줍 니 다.

var vector = new THREE.Vector3(0,0,Math.PI/6);
var euler = new THREE.Euler().setFromVector3(vector);
euler.toVector3(); //  Vector3 {x: 0, y: 0, z: 0.5235987755982988}
2.4 원수
4 원 수 대상 Quaternion 은 x,y,z 와 w 네 가지 분량 으로 표시 합 니 다.3 차원 공간 에서 하나의 회전 은 하나의 회전축,하나의 회전 각도 와 회전 방향 으로 유일 하 게 확정 된다.
우리 가 기본적으로 오른손 법칙의 회전 이 라 고 가정 하면 회전 방향 은 시계 반대 방향 이 고 회전축 의 벡터 는 v=(vx,vy,vz)이 며 각 도 는 회전 각도 이다.그러면 이 회전 은 다음 그림 과 유사 해 야 한다.

그 에 대응 하 는 4 원 수 는 바로:

1. set( x: number, y: number, z: number, w: number ): Quaternion
이 4 원 수의 값 을 설정 합 니 다.
2. clone(): this
이 4 원 수 를 복제 합 니 다.
3. copy( q: Quaternion ): this
q 의 값 을 이 4 원 으로 복사 합 니 다.
4. setFromEuler( euler: Euler ): Quaternion
오 라 각 이 지정 한 회전 으로 이 4 원 수 를 설정 합 니 다.

var euler = new THREE.Euler(0,0,Math.PI/6);
var quaternion = new THREE.Quaternion().setFromEuler(euler) //  Quaternion {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
5. setFromAxisAngle( axis: Vector3, angle: number ): Quaternion
축 과 각도 에서 지정 한 회전 을 사용 하여 이 4 원 수 를 설정 합 니 다.axis 는 귀 일화 되 어야 하 며,angle 의 단 위 는 호도 이다.

var vector1 = new THREE.Vector3(0,0,1);
var vector2 = new THREE.Vector3(0,0,2);
var quaternion1 = new THREE.Quaternion().setFromAxisAngle(vector1, Math.PI/6); //  Quaternion {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
var quaternion2 = new THREE.Quaternion().setFromAxisAngle(vector2, Math.PI/6); //  Quaternion {_x: 0, _y: 0, _z: 0.5176380902050415, _w: 0.9659258262890683}
이 를 통 해 알 수 있 듯 이 axis 가 4 원 수의 x,y 와 z 값 에 미 치 는 영향 은 선형 이다.
6. setFromRotationMatrix( m: Matrix4 ): Quaternion
m 의 회전 분량 으로 이 4 원 수 를 설정 합 니 다.사용 은 간단 하 니 더 이상 말 하지 않 겠 습 니 다.
7. setFromUnitVectors( vFrom: Vector3, vTo: Vector3 ): Quaternion
벡터 vFrom 에서 vTo 까지 필요 한 회전 을 통 해 이 4 원 수 를 설정 합 니 다.vFrom 와 vto 는 귀 일화 되 어야 한다.한번 볼 게 요.

var vector1 = new THREE.Vector3(1,1,0);
var vector2 = new THREE.Vector3(0,1,0);
var quaternion = new THREE.Quaternion().setFromUnitVectors(vector1, vector2); //    z    Math.PI/4
8. angleTo( q: Quaternion ): number
이 4 원 에서 q 까지 의 각 도 를 되 돌려 줍 니 다.

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/3));
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));
quaternion1.angleTo(quaternion2); //   0.5235987755982987
9. rotateTowards( q: Quaternion, step: number ): Quaternion
이 4 원 수 를 주어진 step 에 따라 정 의 된 4 원 수 q 로 회전 합 니 다.이 방법 은 최종 4 원 수가 q 를 초과 하지 않도록 확보한다.그럼 무슨 뜻 이 죠?

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/3)); //{_x: 0, _y: 0, _z: 0.49999999999999994, _w: 0.8660254037844387}
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6)); //{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
quaternion1.rotateTowards( quaternion2, 0); //{_x: 0, _y: 0, _z: 0.49999999999999994, _w: 0.8660254037844387}
quaternion1.rotateTowards( quaternion2, 0.5); //{_x: 0, _y: 0, _z: 0.2701980971440553, _w: 0.9628047508709812}
quaternion1.rotateTowards( quaternion2, 1); //{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
그 내부 에 quaternion.slerp()방법 을 사용 한 것 을 알 수 있다.step 가 0 일 때 rotate Towards 방법 을 되 돌려 주 는 것 이 현재 4 원 입 니 다.step 가 1 일 때 rotate Towards 방법 은 매개 변수 q 의 4 원 수 를 되 돌려 줍 니 다.step 가 0~1 사이 일 때 rotate Towards 방법 은 현재 4 원 수 와 매개 변수 q 의 4 원 수 사이 의 가 치 를 되 돌려 줍 니 다.
10. inverse(): Quaternion
이 4 원 수 를 옮 겨 라.-공 액 을 계산 하 라.4 원 수가 단위 길이 가 있다 고 가정 하 다.

var quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI/6,Math.PI/6,Math.PI/6)); //     Quaternion {_x: 0.30618621784789724, _y: 0.17677669529663687, _z: 0.30618621784789724, _w: 0.8838834764831845}
quaternion.inverse(); //  Quaternion {_x: -0.30618621784789724, _y: -0.17677669529663687, _z: -0.30618621784789724, _w: 0.8838834764831845}
이 를 통 해 알 수 있 듯 이 공 액 을 계산 한 후에 x,y 와 z 는 각각 복 제 를 취하 고 w 값 은 변 하지 않 는 다.
11. conjugate(): Quaternion
이 4 원 수의 회전 공 액 을 되 돌려 줍 니 다.4 원수 의 멍에.회전축 이 반대 방향 에서 같은 회전 을 나타 낸다.나의 테스트 를 통 해 이 방법 은 inverse()방법 과 같 습 니 다.inverse 의 소스 코드 를 보 세 요.

inverse: function () {
  // quaternion is assumed to have unit length
  return this.conjugate();
},
12. dot( v: Quaternion ): number
4 원 수 v 와 현재 4 원 수의 점 적 을 계산 하 다.모두 가 알 고 있 는 바 와 같이 점 이 쌓 인 것 은 하나의 숫자 다.간단 하 다
13. lengthSq(): number
4 원 수의 제곱 길 이 를 계산 하 다.각 값 의 제곱 구 합 이다.
14 length(): number
이 4 원 수의 길 이 를 계산 하 다.즉,각 값 을 제곱 하여 합 친 다음 에 뿌리 번 호 를 따 는 것 이다.
15. normalize(): Quaternion
이 4 원 수 를 귀 일화 하 다.원본 코드 보기

normalize: function () {
  var l = this.length();
  if ( l === 0 ) { //      length 0，  this._x、this._y this._z    0，this._w   1
   this._x = 0;
   this._y = 0;
   this._z = 0;
   this._w = 1;
  } else { //      length l,            l   。
   l = 1 / l;
   this._x = this._x * l;
   this._y = this._y * l;
   this._z = this._z * l;
   this._w = this._w * l;
  }
  return this;
 },
16. multiply( q: Quaternion ): Quaternion
이 4 원 수 를 q 와 곱 하 다.구체 적 으로 어떻게 곱 하 는 지.나중에 얘 기 하 자.
17. premultiply( q: Quaternion ): Quaternion;
이 4 원 수 는 q 왼쪽 곱 하기(pre-multiply)를 사용 합 니 다.마찬가지 로 잠시 후에 다시 이야기 하 자.
18. multiplyQuaternions( a: Quaternion, b: Quaternion ): Quaternion
4 원 수 a 곱 하기 4 원 수 b,4 원 수의 곱셈 을 말 해 봅 시다.

multiplyQuaternions: function ( a, b ) {
  var qax = a._x, qay = a._y, qaz = a._z, qaw = a._w;
  var qbx = b._x, qby = b._y, qbz = b._z, qbw = b._w;
  this._x = qax * qbw + qaw * qbx + qay * qbz - qaz * qby;
  this._y = qay * qbw + qaw * qby + qaz * qbx - qax * qbz;
  this._z = qaz * qbw + qaw * qbz + qax * qby - qay * qbx;
  this._w = qaw * qbw - qax * qbx - qay * qby - qaz * qbz;
  return this;
},
19. equals( v: Quaternion ): boolean;
v 와 이 4 원수 의 각 분량 을 비교 하여 양자 가 같은 회전 을 대표 하 는 지 확인한다.긴 말 하지 않다.
20. slerp( qb: Quaternion, t: number ): Quaternion
4 원수 간 의 구면 선형 삽입 값 을 처리 하 다.t 는 quaterniona A(여기 t 는 0)와 quaternionB(여기 t 는 1)두 4 원수 사이 의 회 전량 을 대표 한다.quaternion 이 결과 로 설정 되 었 습 니 다.rotate Towards 의 밑바닥 역시 slerp 방법 을 사용 했다.

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/2));
quaternion1; //quaternion1   {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
quaternion2; //quaternion2   {_x: 0, _y: 0, _z: 0.7071067811865475, _w: 0.7071067811865476}
quaternion1.slerp(quaternion2, 0) //      quaternion1  
quaternion1.slerp(quaternion2, 1) //      quaternion2  
quaternion1.slerp(quaternion2,    ) //  quaternion1 quaternion2   ，    t      1 
//   rotateTowards     
rotateTowards: function ( q, step ) {
  var angle = this.angleTo( q );
  if ( angle === 0 ) return this;
  var t = Math.min( 1, step / angle );
  this.slerp( q, t );
  return this;
}
21. static slerp: functistatic slerp(qa: Quaternion, qb: Quaternion, qm: Quaternion, t: number): Quaternionon
이것 은 slerp 의 정적 방법 으로 동적 설정 이 필요 없습니다.slerp 방법 도 사 용 했 습 니 다.

slerp: function ( qa, qb, qm, t ) {
  return qm.copy( qa ).slerp( qb, t );
}
오 라 각 4 원 수 에 대해 서 는 차이 가 많 지 않 습 니 다.이것 뿐 입 니 다.평소에 많이 사용 해 야 기억 할 수 있 습 니 다.
총결산
three.js 오로라 뿔 과 4 원 수의 사용법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 three.js 오로라 뿔 과 4 원 수의 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
JAVA 다 중 루틴 중 join()방법의 사용 방법
Ajax 입문 편 준비 시작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage