Three.js 오라 객체 Euler 및 4원수Quaternion
3335 단어 three.js
Three.js 오라 객체 Euler 및 4원수Quaternion
오라의 대상과 4원수는 주로 대상의 회전 정보를 표현하는 데 쓰인다.
키워드: 오라Euler, 사원수Quaternion, 행렬Matrix4개인WebGL/Three.js 기술 블로그
오라 객체 Euler
구조 함수: Euler(x,y,z,order) 매개 변수 xyz는 각각 xyz축을 감아 회전하는 각도값을 나타내고 각도 단위는 호도이다.매개 변수order는 회전 순서를 표시하고 기본값XYZ, YXZ, YZX 등 값으로 설정할 수 있습니다.// ， xyz 45 ，0 ，90
var Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);
오라 객체의 설정var Euler = new THREE.Euler();
Euler.x = Math.PI/4;
Euler.y = Math.PI/2;
Euler.z = Math.PI/4;
4원수Quaternion
4원수 대상Quaternion은 x, y,z와 w 네 개의 분량으로 표시한다.var quaternion = new THREE.Quaternion();
console.log(' ',quaternion);
console.log(' w ',quaternion.w);
사원수 방법.setFromAxisAngle()
4원수의 방법.setFromAxisAngle(axis, angle)은 회전축 axis와 회전 각도angle를 통해 4원수 데이터, 즉 x, y,z와 w 네 개의 분량을 설정한다.
단위 벡터 Vector3(x, y, z)로 표시된 축을 기준으로 회전θ도
k = sinθ/2
q=( xk , yk , z*k, cosθ/2) var quaternion = new THREE.Quaternion();
// new THREE.Vector3(0,1,0)
// Math.PI/2
quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0),Math.PI/2)
console.log(' ',quaternion);
4원수 곱셈.multiply()
대상의 한 회전은 하나의 4원수로 표시할 수 있고 두 번의 연속 회전은 두 번의 회전에 대응하는 4원수 대상을 곱셈 연산하는 것으로 이해할 수 있다.// q1、q2 ， ， q2
// q1 q2
q1.quaternion.multiply( q2 );
오라, 사원수와 행렬 전환
오라 대상, 4원수 대상과 회전 행렬은 관련 전환을 할 수 있고 모두 회전 변환을 나타낼 수 있다.
Matrix4.makeRotationFromQuaternion(q)
매트릭스 대상Matrix4의 .makeRotationFromQuaternion(q) 방법을 통해 4원수를 대응하는 매트릭스 대상으로 바꿀 수 있다.
quaternion.setFromEuler(Euler)
오라 대상을 통해 4원수 대상을 설정하다
Euler.setFromQuaternion(quaternion)
4원수가 오라의 대상으로 바뀌다
Object3D
Object3D 대상 각도 속성.rotation의 값은 오라 대상Euler이고, 4원수 속성.quaternion의 값은 4원수 대상Quaternion이다.Object3D 대상 회전 방법을 실행하면 대상의 각도 속성과 4원수 속성을 동시에 바꿉니다.4원수 속성은 위치.position, 축소 속성.scale과 마찬가지로 대상의 로컬 매트릭스 속성.matrix으로 전환되고 로컬 매트릭스 속성 값은 회전 매트릭스, 축소 매트릭스, 평이 매트릭스를 포함한다.Object3D 대상 각도 속성.rotation과 4원수 속성.quaternion은 상호 관련된 변화로 동시에 다른 것을 바꾼다.// ， Object3D
var mesh = new THREE.Mesh()
// z
mesh.rotateZ(Math.PI)
console.log(' rotation',mesh.rotation);
console.log(' quaternion',mesh.quaternion);
.rotateOnAxis(axis, angle)는 임의의 방향을 감고 있는 어떤 축의 axis를 일정한 각도angle로 회전하는 것을 나타낸다. X, Y와 Z축을 감아 대응하는 방법은 각각 rotateX(),rotateY()와rotateZ()이고 XYZ의 특정 축을 감아 회전하는 방법은 .rotateOnAxis() 방법에 기초하여 이루어진 것이다.// Object3D.js
rotateOnAxis: function () {
var q1 = new Quaternion();
// axis， angle
return function rotateOnAxis( axis, angle ) {
// xyzw
q1.setFromAxisAngle( axis, angle );
// Object3D q1
this.quaternion.multiply( q1 );
return this;
};
}(),
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
인쇄용 Shade3D 데이터를 three.js로 표시
Shade3D의 대응 출력 파일 형식 중에서 three.js에 대응하고 있는 FBX, Wavefront OBJ(OBJ)당을 출력해 보고 사이즈가 컸기 때문에, 출력된 FBX를 Blender로 열어 glTF로 변환
S...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
// ， xyz 45 ，0 ，90
var Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);var Euler = new THREE.Euler();
Euler.x = Math.PI/4;
Euler.y = Math.PI/2;
Euler.z = Math.PI/4;var quaternion = new THREE.Quaternion();
console.log(' ',quaternion);
console.log(' w ',quaternion.w);var quaternion = new THREE.Quaternion();
// new THREE.Vector3(0,1,0)
// Math.PI/2
quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0),Math.PI/2)
console.log(' ',quaternion);// q1、q2 ， ， q2
// q1 q2
q1.quaternion.multiply( q2 );// ， Object3D
var mesh = new THREE.Mesh()
// z
mesh.rotateZ(Math.PI)
console.log(' rotation',mesh.rotation);
console.log(' quaternion',mesh.quaternion);// Object3D.js
rotateOnAxis: function () {
var q1 = new Quaternion();
// axis， angle
return function rotateOnAxis( axis, angle ) {
// xyzw
q1.setFromAxisAngle( axis, angle );
// Object3D q1
this.quaternion.multiply( q1 );
return this;
};
}(),이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
인쇄용 Shade3D 데이터를 three.js로 표시Shade3D의 대응 출력 파일 형식 중에서 three.js에 대응하고 있는 FBX, Wavefront OBJ(OBJ)당을 출력해 보고 사이즈가 컸기 때문에, 출력된 FBX를 Blender로 열어 glTF로 변환 S...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
