You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
3.6 KiB
72 lines
3.6 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="ko">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>행렬 변환([name])</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Three.js는 *matrices*를 사용해 3D 변형---변환(위치), 회전, 확대 인코딩합니다.
|
||
|
|
[page:Object3D]의 모든 인스턴스는 [page:Object3D.matrix matrix]를 가지고 있어 오브젝트의 위치, 회전, 확대 정보를 담고 있습니다.
|
||
|
|
이 페이지에서는 오브젝트의 변형과 관련해 설명합니다.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>편리한 속성 및 *matrixAutoUpdate*</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
오브젝트의 변형 방법에는 두 가지가 있습니다.
|
||
|
|
</p>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
오브젝트의 *position*, *quaternion*, 그리고 *scale* 속성을 조절합니다, 그 후에 three.js가 오브젝트의 행렬을 이에 맞추어 재 계산합니다:
|
||
|
|
<code>
|
||
|
|
object.position.copy( start_position );
|
||
|
|
object.quaternion.copy( quaternion );
|
||
|
|
</code>
|
||
|
|
기본적으로 *matrixAutoUpdate* 속성은 true로 되어 있으며, 행렬정보는 자동으로 재 계산 될 것입니다.
|
||
|
|
오브젝트를 고정하고 싶거나 직접 재계산을 하고 싶다면, false로 해서 성능을 향상시킬 수 있습니다:
|
||
|
|
<code>
|
||
|
|
object.matrixAutoUpdate = false;
|
||
|
|
</code>
|
||
|
|
속성을 변경한 다음에 수동으로 행렬을 업데이트해줍니다.:
|
||
|
|
<code>
|
||
|
|
object.updateMatrix();
|
||
|
|
</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
오브젝트의 행렬을 직접 수정합니다. [page:Matrix4] 클래스에는 행렬 수정을 위한 여러 메서드가 있습니다.
|
||
|
|
<code>
|
||
|
|
object.matrix.setRotationFromQuaternion( quaternion );
|
||
|
|
object.matrix.setPosition( start_position );
|
||
|
|
object.matrixAutoUpdate = false;
|
||
|
|
</code>
|
||
|
|
이 경우에 *matrixAutoUpdate*는 <em>무조건</em> *false*가 되어야 하는 점을 명심하세요. 그리고 *updateMatrix* 를 사용하지 <em>마세요</em>. *updateMatrix*를 호출하면 수동으로 변경한 행렬을 덮어버리고*position*, *scale* 등의 행렬을 재계산 할 것입니다.
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>오브젝트와 world 행렬</h2>
|
||
|
|
<p>
|
||
|
|
오브젝트의 [page:Object3D.matrix matrix]는 오브젝트의 변형을 <em>관련된</em> 오브젝트의 [page:Object3D.parent parent]에 저장합니다; 오브젝트의 변형 정보를
|
||
|
|
<em>world</em> 좌표에서 가져오려면, 오브젝트의 [page:Object3D.matrixWorld]에 접근해야 합니다.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
부모 혹은 자식 오브젝트의 변형이 생기면, 자식 오브젝트의 [page:Object3D.matrixWorld matrixWorld]를 [page:Object3D.updateMatrixWorld updateMatrixWorld]()를 호출해 업데이트 합니다.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>회전 및 사원수(Rotation and Quaternion)</h2>
|
||
|
|
<p>
|
||
|
|
Three.js는 3D 회전을 두 가지 방법으로 나타냅니다: [page:Euler Euler angles] 와 [page:Quaternion Quaternions]이며 둘 사이의 변한 메서드도 포함입니다.
|
||
|
|
Euler angles는 "gimbal lock" 이라는 문제와 관련이 있어서, 특정 설정은 자유도가 제한됩니다(한 축에서만 오브젝트가 회전하는 것을 방지).
|
||
|
|
이 때문에, 오브젝트 회전은 <em>언제나</em> 오브젝트의 [page:Object3D.quaternion quaternion]에 저장됩니다.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
이전 버전의 라이브러리는 *useQuaternion* 속성을 불러와서 false로 설정하면 [page:Object3D.matrix matrix]를 Euler angle로 계산하게 합니다.
|
||
|
|
이 예제는 삭제되었습니다. 대신 [page:Object3D.setRotationFromEuler setRotationFromEuler] 메서드를 사용해 사원수를 업데이트 합니다.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|