three.js로 웹 장면을 만들다 보면 캔버스 뒤에 있는 HTML 요소가 비치도록 배경을 투명하게 처리해야 하거나, 반대로 특정 배경색을 지정해야 하는 경우가 있습니다. 이 두 가지 모두 WebGLRenderer의 옵션과 setClearColor() 메서드를 활용하면 간단하게 해결할 수 있습니다.
1. three.js 배경을 투명하게 만들기
투명한 배경을 사용하려면 렌더러 생성 시 생성자에 alpha 옵션을 true로 전달해야 합니다. 그런 다음 setClearColor()의 두 번째 인자(알파 값)를 0으로 설정하면 배경이 완전히 투명해집니다.
var renderer = new THREE.WebGLRenderer({ alpha: true });
// 배경색은 기본값으로 두어도 됩니다.
renderer.setClearColor(0x000000, 0); // 기본값alpha: true는 렌더러가 알파 채널을 지원하도록 하는 옵션이고, setClearColor(0x000000, 0)에서 마지막 인자 0이 불투명도를 의미합니다. 이 값이 0이면 배경이 완전히 투명해집니다.
참고로, 투명 배경이 실제로 화면에 드러나려면 캔버스 아래에 있는 웹 페이지의 body나 부모 요소에 배경 이미지나 색상이 있어야 합니다. 페이지 자체가 흰색이라면 투명 효과를 눈으로 확인하기 어렵습니다.
2. 배경을 특정 색상으로 지정하기
투명 대신 원하는 색상을 배경으로 사용하고 싶다면 setClearColor()에 헥스 코드 색상값만 전달하면 됩니다.
renderer.setClearColor(0xb0f442);
위 예제에서는 연두색 계열인 0xb0f442가 배경색으로 적용됩니다. 필요에 따라 0xff0000(빨강)처럼 원하는 색상 값으로 자유롭게 변경할 수 있습니다.
정리
- 투명 배경:
new THREE.WebGLRenderer({ alpha: true })로 렌더러를 생성한 뒤renderer.setClearColor(0x000000, 0)호출 - 단색 배경:
renderer.setClearColor(원하는_색상값)호출
이처럼 alpha 옵션과 setClearColor() 메서드만 잘 활용하면 three.js 장면의 배경을 손쉽게 제어할 수 있습니다.