[Three.js] renderer와 scene 백그라운드 차이

안녕하세요 :)

 

최근 유니티 게임과 더불어 3D 렌더링 공부에 푹 빠져 즐거운 나날을 보내고 있습니다. 

오늘은 Three.js 공부 중에 canvas의 백그라운드를 설정할 수 있는 방법이 두 가지가 있다는 사실을 알고 그 차이가 무엇인지 공부해 보았습니다. 

Three.js에서는 아래와 같이 "scene"과 "renderer" 두가지 인스턴스의 백그라운드를 설정할 수 있도록 해놓았습니다. 

// Set the background of the scene to red.
scene.background = new THREE.Color(0xff0000);

// Set the background of the renderer to transparent.
renderer.setClearColor(0, 0, 0, 0);

언듯 보기에 효과가 동일해 보이지만 사실을 그렇지 않습니다. 

 

Scene에 background를 설정했을 때

만약 scene안에 다른 오브젝트가 있다면 해당 오브젝트를 제외하고 배경색을 칠합니다. 

 

Renderer에 color를 설정했을 때

scene안에 오브젝트가 있더라도 해당 오브젝트 위에 배경색이 덧붙여집니다.

 

쉽게 이해하자면 Scene은 무대 위의 배경에 배경색을 칠하는 것이고, Renderer는 그 무대를 찍는 카메라의 렌즈에 필터를 끼우는 것이라 이해하면 될 듯합니다.