[Three.js] To infinity and beyond! 3D 웹 도전기 #1

Library:

[Three.js] To infinity and beyond! 3D 웹 도전기 #1

칠일오. 2023. 12. 16. 17:14

⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.

"three.js로 무언가를 표현하려면 scene, camera 그리고 renderer가 필요하다. 이를 통해 카메라로 장면을 구사할 수 있다."

그럼 scene, camera, renderer가 무엇인지 알아보겠다.

Renderer

화면에 그림을 그려주는 역할을 한다.

renderer를 만드는 방법은 크게 동적과 정적으로 나뉜다.

자바스크립트를 통해 동적으로 만들어 줄 경우에는 아래와 같이 사용한다.

document.body.appendChild(renderer.domElement);

domElement : renderer가 가지고 있는 canvas 이다.

위 코드에서 나오는 renderer 변수명은 three.js 라이브러리 내부의 WebGLRenderer을 의미하며, 이 프로퍼티가 가진 메서드 중 하나가 domElement인 것이다.

What is WebGLRenderer?
The WebGL renderer displays your beautifully crafted scenes using WebGL.

정적으로 만드는 방법은, HTML 문서에 직접 <canvas></canvas>를 명시하는 것이다. 이렇게 하면 다른 요소들과 함께 레이아웃을 고려할 수 있어 더 권장되는 방법이기도 하다.

단, 자바스크립트 파일에서 해당 태그를 연결해주어야 한다.

const canvas = document.querySelector('#three-canvas');

// WebGL1Renderer의 canvas 속성 값으로 해당 요소를 설정
const renderer = new THREE.WebGLRenderer({ canvas: canvas });

Scene

전체 요소들이 포함되는 공간이다.

const scene = new THREE.Scene();

Camera

다양한 카메라가 있지만 공식 문서 사용 예시에서도 PerspectiveCamera를 사용하는 것처럼 가장 기본이 되는 방법이다.

perspective projection을 사용하는 카메라입니다.
이 투영 모드는 사람의 눈으로 보는 방식을 모방하여 설계되었습니다. 3D 장면을 렌더링하는데 가장 널리 쓰이는 투영 모드입니다.

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

table-center

fov	카메라 절두체 수직 시야.
aspect	카메라 절두체 종횡비. (화면의 너비와 높이의 비율)
near	카메라 절두체 근평면. (피사체가 어느 시점부터 보이게 할 것인지 설정)
far	카메라 절두체 원평면. (피사체가 어느 시점까지 보이게 할 것인지 설정)

이제 만든 scene과 camera를 사용해보자.

camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
scene.add(camera);

이때 카메라를 위치 설정하지 않으면 기본값은 (0, 0, 0)이다. 만약 물체도 (0,0,0)이면 카메라에 물체가 안 보이기 때문에 위치 설정을 반드시 해주어야한다.

추가로 OrthographicCamera(직교 카메라)에 대해서 알아보겠다. 그림에서 보이듯이 PerspectiveCamera와 달리 원근이 없다.

OrthographicCamera( 
    left : Number, // 카메라 절두체 좌평면
    right : Number, // 카메라 절두체 우평면
    top : Number, // 카메라 절두체 상평면
    bottom : Number, // 카메라 절두체 하평면
    near : Number, // 카메라 절두체 근평면
    far : Number // 카메라 절두체 원평면
)

카메라의 위치를 정했는데 보이지 않을 경우에는, lookAt 메서드를 통해 물체를 바라볼 수 있도록 물체의 좌표를 찍어주어 사용한다.

camera.lookAt(0,0,0);

또한 줌인, 줌아웃 효과를 하고 싶을 때 z축을 변경하는 것이 아니라(뷰 각도에 영향을 주기 때문에) 아래와 같이 zoom 메서드를 통해 표현할 수 있고, 이때 카메라 렌더에 관한 속성을 변경했을 때는 updateProjectionMatrix 메서드도 함께 호출해야만 적용이 된다는 점을 기억하자!

camera.zoom = 0.5;
camera.updateProjectionMatrix();

zoom의 기본값은 1이다.

Mesh

scene에 올려지는 객체 하나 하나가 모두 이에 해당한다. geometry(모양)와 material(재질)로 구성되어 있다.

const geometry = new THREE.BoxGeometry(1, 1, 1) // 직육면체 Geometry이다.
const material = new THREE.MeshBasicMaterial({ color: 0xff0000});

Mesh의 구성요소를 만들었다면, 조합을 해주자.

const mesh = new THREE.Mesh(geometry, material);

조합에서 끝내는 것이 아니라 scene에 올려주고 렌더러로 그려주어야 화면에 보여진다.

scene.add(mesh);
renderer.render(scene, camera);

그러면 이미지처럼 도형이 만들어진다.

그런데 만들어진 도형의 오른쪽 하단 부분을 보면 계단 모양처험 처리된 걸 확인할 수 있다.

이를 부드럽게 처리해주는 속성이 있다.

const renderer = new THREE.WebGL1Renderer({ canvas, antialias: true });

만들어 둔 renderer에 antialias 옵션을 true로 설정하면 된다. 그러나 성능 저하가 있다는 점을 주의하자.

📜 출처

[공식문서] three.js 장면 만들기