주요 내용
코스: 컴퓨터 프로그래밍 > 단원 4
단원 7: 3D 도형3D 도형 만들기
가장 먼저 시작할 단순한 모양은 정육면체입니다. 사면체의 면의 수가 보다 적지만 그 면들이 서로 직교하지 않아서 만들기가 더 까다롭습니다. 우선 원점 (0,0,0)을 중심으로 200×200×200 픽셀의 정육면체을 생성하도록 하겠습니다.
우리는 실제로 무엇을 그리는 것이 아닙니다. 그림을 3D 모양으로 기술하는 숫자들로 구성된 배열을 만들 것입니다. 특히, 노드(node)와 엣지(edge)들을 기술하는 배열을 만드는 것으로 시작합니다.
노드(Nodes)
먼저 노드의 배열을 정의합니다. 이 경우 각 노드는 세 개의 숫자인 x, y, z 좌표로 구성된 배열입니다.
var node0 = [-100, -100, -100];
var node1 = [-100, -100, 100];
var node2 = [-100, 100, -100];
var node3 = [-100, 100, 100];
var node4 = [ 100, -100, -100];
var node5 = [ 100, -100, 100];
var node6 = [ 100, 100, -100];
var node7 = [ 100, 100, 100];
var nodes = [node0, node1, node2, node3, node4, node5, node6, node7];알다시피 노드들은 모두 세 개의 양수 100 또는 음수 100으로 구성된 여덟 개의 배열로 표현됩니다.
아래의 그림에서 원점을 중심으로 2x2x2 정육면체의 노드를 볼 수 있습니다. 마우스를 이용하여 회전해 봅니다.
엣지(Edges)
그 다음은 엣지에 대한 배열를 정의합니다. 이 경우 각 엣지는 두 개의 숫자로 구성된 배열입니다. 예를들어,
edge0는 node0과 node1사이 엣지를 정의합니다. 배열의 인덱스는 0부터 시작하므로 0부터 지정합니다. (첫 번째 노드의 값을 얻기 위해 nodes[0]을 입력합니다.var edge0 = [0, 1];
var edge1 = [1, 3];
var edge2 = [3, 2];
var edge3 = [2, 0];
var edge4 = [4, 5];
var edge5 = [5, 7];
var edge6 = [7, 6];
var edge7 = [6, 4];
var edge8 = [0, 4];
var edge9 = [1, 5];
var edge10 = [2, 6];
var edge11 = [3, 7];
var edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11];엣지를 확실히 만드는 것이 까다로운 부분입니다. 다음의 정육면체는 연결된 엣지를 나타냅니다.