3D 도형 그리기

Three.js에서 3D 도형을 만드는 방법은 좌표의 점을 이은 선과 면으로 이루어진 도형인 Geometry와 색상, 질감을 표현하는 재질인 Material을 합쳐서 표현한다.

📌 3D 큐브 그리기

BoxGeometry는 주어진 '너비', '높이' 및 '깊이'가 있는 직육면체의 기하학 클래스이다. 생성 시 입방체는 각 모서리가 축 중 하나와 평행한 상태에서 원점의 중심에 배치된다.

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 도형의 크기
const material = new THREE.MeshBasicMaterial( {color: 0x000000} ); // 도형의 색상
const cube = new THREE.Mesh( geometry, material ); 
scene.add( cube );

위와 같은 검은색 큐브가 그려진다. 겉보기엔 2D 형태의 큐브 같지만 3D 큐브를 정면에서 본 상태로 그려진다. 3D 큐브 모양으로 보이게 하려면 조명을 따로 추가해주어야 한다.(조명은 추후에 배워보자!)

📌 3D 큐브 여러 개 그리기

const geometry01 = new THREE.BoxGeometry(1, 1, 1) // 도형의 크기
const material01 = new THREE.MeshBasicMaterial({ color: 0x000000 })
const cube1 = new THREE.Mesh(geometry01, material01)
cube1.position.x = -1 // 도형 위치 조정
scene.add(cube1)

const geometry02 = new THREE.BoxGeometry(1, 1, 1)
const material02 = new THREE.MeshBasicMaterial({ color: 0x000000 })
const cube2 = new THREE.Mesh(geometry02, material02)
scene.add(cube2)

const geometry03 = new THREE.BoxGeometry(1, 1, 1)
const material03 = new THREE.MeshBasicMaterial({ color: 0x000000 })
const cube3 = new THREE.Mesh(geometry03, material03)
cube3.position.x = 1
scene.add(cube3)

Mesh에서 position값을 조정하여 도형의 위치를 배치할 수 있다. 이때, 우리가 보는 위치를 기준으로 투시가 적용되어 보인다.

투시(perspective) : 공간을 바라볼 때 보여지는 입체적인 흐름

Three.js에서는 다양한 Geometry를 제공한다.

https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry

three.js docs

맨 우측에 있는 도형을 ConeGeometry를 사용하여 원뿔 모양으로 변경해 보았다.

const geometry01 = new THREE.BoxGeometry(1, 1, 1) // 도형의 크기
const material01 = new THREE.MeshBasicMaterial({ color: 0x000000 })
const cube1 = new THREE.Mesh(geometry01, material01)
cube1.position.x = -2 // 도형 위치 조정
scene.add(cube1)

const geometry02 = new THREE.BoxGeometry(1, 1, 1) // 도형의 크기
const material02 = new THREE.MeshBasicMaterial({ color: 0x000000 })
const cube2 = new THREE.Mesh(geometry02, material02)
scene.add(cube2)

// 원뿔 모양
const geometry03 = new THREE.ConeGeometry(0.5, 0.8, 16)
const material03 = new THREE.MeshStandardMaterial({ color: 0xffff00 })
const cone3 = new THREE.Mesh(geometry03, material03)
cone3.position.x = 2
scene.add(cone3)

📌 해상도 변경

화면을 확대하면 아래와 같이 계단 현상으로 픽셀이 깨지는 것을 볼 수 있다.

이 경우 렌더러에서 antialias설정값을 true로 지정해 주면 된다.

// 렌더러
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 계단 현상 방지
})

그 전과 비교하면 도형이 좀 더 매끄러워졌다.

📌 반응형 처리

// 반응형 처리
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight // 카메라의 종횡비를 윈도우 너비, 높이로 동기화
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.render(scene, camera)
}

window.addEventListener('resize', onWindowResize)

 

 

참고

https://designbase.co.kr/category/threejs-course/

Three.js | 디자인베이스