[THREE] three.js의 renderer와 scene알아보기!

three.js

 

요즘은 업무상 three.js를 공부하고 있습니다. 

이전에도 사용했던 기술이지만 기초부터 천천히 다져보기 위해 다시 공부하고 있는데요!

블로그에 내용을 공유해보고자 합니다!

 

Three.js의 기본구조

아래의 사진과 같이 가장 큰 바탕이자 뷰포트와 같은 역할을 하는 renderer,

가장 큰 node이자 모든 요소들이 실질적으로 보여지는 scene,

그러한 요소들은 바라보는 즉 우리가 보는 눈의 역할을 해주는 camera로 볼 수 있습니다.

 

기본구조(그림)

기본구조(도표)

 

renderer

three.js의 핵심 객체로 camera, scene등을 객체로 넘겨 받아 표현합니다.

기본적으로 WebGL을 사용하며, renderer가 canvas에 대한 이미지를 생성 할 때,

GPU가속 이미지 처리와 효과를 허용합니다.

 

renderer 구조

// 랜더러 생성 - 매개변수로 생성될 위치(canvas)를 받게 된다.
const renderer = new THREE.WebGLRenderer({canvas});

// 추가적인 옵션으로 antialias등을 추가 할 수 있습니다.
const renderer = new THREE.WebGLRenderer({
		canvas,
		antialias: true,
});

// 랜더러 사이즈 지정 및 scene, camera 추가
// 가장 큰 틀이 되는 랜더러에 씬과 카메라를 추가하여 랜더러 안에서 랜더링이 되게 해줍니다.
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.render(scene, camera)

// 애니메이션을 업데이트 하는 등의 행위도 랜더러에 추가해줍니다.
renderer.setAnimationLoop(draw)

 

scene

모든 요소가 올라가는 전체 배경으로 3D object와 light, material 등의 요소들을 모두 모아놓은 곳이라고 볼 수 있습니다.

 

scene 구조

// scene 생성
const scene = new THREE.Scene();

// 카메라를 씬에 추가
// 카메라의 생성을 다음에 다룰 예정
scene.add(camera)

// light와 mesh등의 요소들도 동일하게 추가 합니다.
scene.add(light)
scene.add(mesh)

 

 

 

사진 및 자료 출처

• https://designbase.co.kr/threejs-03/ (기본 뼈대 이해하기 Renderer, Scene, Camera - Three.js 강좌)