javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!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>