three.js 셋팅_배경 컬러, 빛 (5)

김종민·2025년 5월 21일

라이브러리

목록 보기

16/22

1. 배경 색상을 바꾸는 방법

해당 코드는 ⭐️ 구역만 수정된 부분으로 해당 구역만 집중해서 보면 된다!

<script>
    const renderer = new THREE.WebGLRenderer({
        canvas,
        antialias: true,
        alpha:true⭐️
    });

	~ 중간 생략 ~
    
    renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
    //renderer.setClearAlpha(0.5);⭐️
    //renderer.setClearColor(0xfff000);⭐️
    //renderer.setClearColor('#fff000');⭐️

    // Scene
    const scene = new THREE.Scene();
    scene.background = new THREE.Color('yellow');⭐️
    
</script>

renderer에서 배경설정

⭐️ renderer에서 alpha 객체를 설정해준 후, true값을 넣어준다!

⭐️ setClearAlpha

setClearAlpha는 renderer의 투명도를 설정할 수 있다.
setClearAlpha(0)은 투명 정도가 0을 뜻하고
setClearAlpha(1)은 투명 정도가 100을 뜻한다.

⭐️ setClearColor

setClearColor는 renderer의 색상을 설정할 수 있다.
(0xfff000)와 같이 표현하거나
('#fff000')와 같이 ''를 사용해서 헥스코드를 사용하면 된다.

scene에서 배경설정

scene에 배경색상을 설정해주려면 scene에 background를 불러주고,
three.js 메소드인 Color를 사용하여 색상을 선언해주면 된다
괄호안에는 위와 같이 (0xfff000),('#fff000'),('yellow') 처럼 표기가 가능하다!

💡 유의사항
renderer 보다 scene 즉 내가 만든 무대가 우선순위가 더 높게 설정이 되어있다.
그렇기 때문에 위의 코드에서 renederer의 주석을 해제한다고 하여도
scene이 우선순위로 설정되기 때문에
renderer의 색상 설정 코드는 적용되지 않는다.
❗️만약❗️
배경의 투명도, 즉 alpha값을 적용하고 싶다면 scene말고 renederer의 배경색을 바꾸는 방법을 활용해야 한다!

2. 빛 적용 방법

<script>
	//light
    const light = new THREE.DirectionalLight(0xffffff, 1);
    scene.add(light);
</script>

빛 설정

lihgt 변수를 선언해서 DirectionalLight를 설정해준다.
(DirectionalLight는 기본적으로 간단히 태양광이라고 생각해주면 된다!)
DirectionalLight 앞에 오는건 보면 아시다시피 빛의 색상으로 흰색이고,
뒤에 나타나는 숫자는 빛의 강도로 생각하면 된다.

그리고 scene에 camera를 add 해준 것처럼 scene에 light로 추가해줘야만 light가 적용이 된다!
하지만 결과값을 확인하면 박스가 아무것도 변한게 없는것을 확인할 수 있다!
그 이유인 즉슨!

<script>
    // Mesh
    const geometry = new THREE.BoxGeometry(1,1,1); // 1m * 1m * 1m를 의미
    const material = new THREE.⭐️ MeshBasicMaterial ⭐️({
        color:'#f00000'
    });
</script>

해당 mesh의 경우 재질이 Basic으로 설정되어 있는데,
Basic의 경우 빛을 반사하는 재질이 아닌 아주 기본형태의 설정이라서 그렇다!
그렇다면 해당 부분의 설정을 변경해주면 되는데!

<script>
    // Mesh
    const geometry = new THREE.BoxGeometry(1,1,1); // 1m * 1m * 1m를 의미
    const material = new THREE.✅ MeshStandardMaterial ✅({
        color:'#f00000'
    });
</script>

위의 코드와 같이 Basic 부분을 Standard로 변경해준다면!
드디어 빛이 아래와 같이 적용된다!

위와 같이 light를 적용하면 light가 위치값이 위에서 바로 내리쬐는(태양처럼) 형태라 빛을 받는 상단부분만 색상이 보이는걸 확인 가능한대, 이럴때 light의 위치를 변경해주면 제대로 노출이된다.

빛 위치이동

<script>
	//light
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.x = 1; ⭐️
    light.position.z = 2; ⭐️
    scene.add(light);
</script>