three.js 와이어 프레임 - WireFrame, WireframeGeometry, LineSegments

three.js 사이트의 doc에서 Geometry(지오메트리, 기하 도형)들의 설명을 보면 생선 된 객체에 선이 포함되어 있는 것을 볼 수 있습니다. (https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry)

 

 

위에 코드 예제를 보면 선에 대한 코드가 따로 없는데 말입니다.

 

우리가 이전에 코딩한 코드와 비교해 봐도 다를 게 없습니다.

 

그럼 뭐가 다를까요?

 

그것은 바로 WireFrame(와이어프레임)이 객체와 같이 표현된 겁니다.

 

WireFrame(와이어프레임)이란 객체의 모양(구조)을 철사(Wire, 와이어)를 사용하여 동일한 모양(Frame, 프레임 - 틀, 구조)으로 만든 것입니다.

 

여기서 WireFrame(와이어프레임)은 Geometry(지오메트리, 기하 도형)를 구성하는 분할된 면들을 선(Wire)으로 구성한 겁니다.

 

대부분의 Geometry(지오메트리, 기하 도형)는 생성할 때 파라미터 값으로 Segments(세그먼트, 분절 수)를 사용하고 있습니다.

 

BoxGeometry(박스 지오메트리, 육면체)는 widthSegments(수평 세그먼트, 가로 분절 수), heightSegments(수직 세그먼트, 세로 분절 수), depthSegments(깊이 세그먼트, 깊이 분절 수)를 파라미터 값으로 받아 면을 분할합니다.

 

SphereGeometry(스피어 지오메트리, 구) widthSegments(수평 세그먼트, 가로 분절 수), heightSegments(수직 세그먼트, 세로 분절 수)를 파라미터 값으로 받아 구를 분할합니다.

 

분할되는 부분은 삼각형으로 구성됩니다. 그 이유는 WebGLRenderer(렌더러)가 객체를 렌더링 할 때 삼각형을 사용하여 만들기 때문입니다.

 

분할되는 수가 많을수록 부드럽게 구현할 수 있지만 CPU나 GPU의 연산이 많아지기 때문에 성능에 문제가 발생합니다.

 

 

그럼 이전 육면체 객체와 구 객체를 WireFrame(와이어프레임)으로 보이게 객체가 사용하는 Material(머티리얼)의 wireframe 속성을 true로 설정합니다. (기본적으로 wireframe 속성은 false입니다.)

const box1Material = new THREE.MeshStandardMaterial({color: 0x00ff00});
box1Material.wireframe = true;

 

const sphere1Material = new THREE.MeshStandardMaterial({color: 0x0000ff});
sphere1Material.wireframe = true;

 

WireFrame(와이어프레임)을 확인하기 위해서 Camera(카메라)의 위치를 육면체 객체에 가깝게 변경합니다.

// 카메라 위치 변경
//camera.position.set(4, 8, 20);
camera.position.set(1, 2, 3);

 

그리고 육면체 객체의 회전을 중지시킵니다.

// 애니메이팅
function animate() {
    //box1.rotation.x += 0.01;
    //box1.rotation.y += 0.01;
    //box1.rotation.z += 0.01;
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};

 

그러면 육면체 객체와 구 객체가 WireFrame(와이어프레임)으로 보입니다.

 

육면체 객체와 구 객체는 Segments(세그먼트, 분절 수)를 기본값으로 하여 생성하였습니다. 그래서 육면체는 1번이라 분절되지 않았고 구는 가로로 32번, 세로로 16번 분절되었습니다.

 

그럼 육면체의 전체 Segments(세그먼트, 분절 수)를 2번으로 증가시켜 보겠습니다.

const box1Geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);

 

육면체의 가로 Segments(세그먼트, 분절 수)를 증가시키면 다음처럼 분절됩니다.

 

육면체의 가로와 세로 Segments(세그먼트, 분절 수)를 증가시키면 다음처럼 분절됩니다.

 

삼각형은 분절된 게 아닙니다. 분절된 가로는 붉은색 선으로 세로는 파란색 선으로 표시했습니다.

 

그런데 Material(머티리얼)의 wireframe 속성을 true로 설정하면 색상과 질감이 없어집니다.

 

 

그럼 three.js 사이트의 doc에 있는 예제처럼 색상과 질감이 유지되면서 WireFrame(와이어프레임)이 보이게 하려면 어떻게 해야 할까요?

 

바로 Geometry(지오메트리, 기하 도형)를 WireFrame(와이어프레임)으로 만들어 주는 WireframeGeometry(와이어프레임 지오메트리)를 사용하면 됩니다.

 

WireframeGeometry(와이어프레임 지오메트리)는 Geometry(지오메트리, 기하 도형)를 WireFrame(와이어프레임)으로 만들어 줍니다. 즉 Geometry(지오메트리, 기하 도형)로 부터 프레임을 만들 정보들을 가져옵니다.

WireframeGeometry(geometry : BufferGeometry)

• geometry(지오메트리) : WireFrame(와이어프레임)으로 만들 Geometry(지오메트리, 기하 도형)의 BufferGeometry(버퍼 지오메트리)입니다.

BufferGeometry(버퍼 지오메트리)는 모든 Geometry(지오메트리, 기하 도형) 부모로서 메쉬(Mesh), 선(Line), 점(Point)에 대한 정보를 가지고 있습니다. (다음에 좀 더 알아보겠습니다.) 

 

1. 육면체 객체의 Geometry(지오메트리, 기하 도형)를 사용하여 WireframeGeometry(와이어프레임 지오메트리)를 생성합니다.

// 육면체 지오메트리로 와이어프레임 지오메트리 생성
const box1WireframeGeometry = new THREE.WireframeGeometry(box1Geometry);

 

WireframeGeometry(와이어프레임 지오메트리)를 선으로 그리기 위해서는 LineSegments(라인 세그먼트즈)를 사용해야 합니다.

 

LineSegments(라인 세그먼트즈)는 Vertex(버텍스, 꼭짓점, 정점) 정보들로 선을 그려줍니다.

LineSegments(geometry : BufferGeometry, material : Material)

• geometry(지오메트리) : 선을 그릴 Vertex(버텍스, 꼭짓점, 정점) 정보들이 있는 Geometry(지오메트리, 기하 도형)의 BufferGeometry(버퍼 지오메트리)입니다.
• materia(머티리얼) : 선을 그리기 위한 머티리얼입니다. 기본값 LineBasicMaterial(라인 베이식 머티리얼) (입력하지 않으면 기본값으로 설정됩니다.)

 

2. WireframeGeometry(와이어프레임 지오메트리)를 선으로 그리기 위해 LineSegments(라인 세그먼트즈)를 생성합니다.

// 와이어프레임을 선으로 그리기 위해 라인 세그먼트즈 객체 생성
const box1WireframeLine = new THREE.LineSegments(box1WireframeGeometry);

 

3. LineSegments(라인 세그먼트즈)의 위치를 육면체 객체 오른쪽에 위치시키기 위해서 육면체 객체 위치를 복사한 후  X축에 1을 더해 줍니다. 그리고 Scence(씬, 장면)에 추가합니다.

// 육면체 객체 오른쪽에 위치 시키기 위해 육면체 위치를 복사하고 X축에 1를 더해 라인 세그먼트즈 객체의 위치 설정
box1WireframeLine.position.copy(box1.position).x += 1;
// 장면에 라인 세그먼트즈 객체 추가
scene.add(box1WireframeLine);

 

그러면 육면체 객체 옆에 WireFrame(와이어프레임)으로 보입니다.

 

육면체 객체와 구 객체의 색상과 질감을 위해 객체가 사용하는 Material(머티리얼)의 wireframe 속성을 false로 설정하거나 삭제합니다. 저는 삭제하였습니다.

그리고 라인의 색상이 흰색(기본값)이라 잘 보이지 않습니다. 그래서 라인의 색상을 붉은색으로 변경하겠습니다.

// 선 색상을 붉은색으로 변경
box1WireframeLine.material.color = new THREE.Color(0xff0000);

 

4. 구 객체도 WireframeGeometry(와이어프레임 지오메트리)으로 LineSegments(라인 세그먼트즈)를 생성하여 구 객체 옆에 위치하도록 하겠습니다.

// 구 지오메트리로 와이어프레임 지오메트리 생성
const sphere1WireframeGeometry = new THREE.WireframeGeometry(sphere1Geometry);
// 와이어프레임을 선으로 그리기 위해 라인 세그먼트즈 객체 생성
const sphere1WireframeLine = new THREE.LineSegments(sphere1WireframeGeometry);
// 선 색상을 붉은색으로 변경
sphere1WireframeLine.material.color = new THREE.Color(0xff0000);
// 구 객체 오른쪽에 위치 시키기 위해 구 위치를 복사하고 X축에 2를 더해 라인 세그먼트즈 객체의 위치 설정
sphere1WireframeLine.position.copy(sphere1.position).x += 2;
// 장면에 라인 세그먼트즈 객체 추가
scene.add(sphere1WireframeLine);

 

마우스로 이동해서 보시면 WireframeGeometry(와이어프레임 지오메트리)를 입체적으로 확인할 수 있습니다.

 

이어서 객체와 WireframeGeometry(와이어프레임 지오메트리)를 합쳐보겠습니다.