[Light] gui, 애니메이션

- ambient Light : 은은한 조명

- directional Light: 태양광

 

빛을 볼때 조명이 어떻게 비추는지 아는것은 힘들다.

이것을 도와주는 장치가 gui다

gui를 쓰는법은 

const gui = new dat.GUI();
	gui.add(light.position, 'x', -5, 5, 0.1).name('조명 X');
	gui.add(light.position, 'y', -5, 5, 0.1).name('조명 Y');
	gui.add(light.position, 'z', 2, 10, 0.1).name('조명 Z');

이렇게 x,y,z방향에 대한 GUI를 만들어주기만하면, 화면에서 바로 확인해볼수가있다.

아주간단!

 

이번에는 움직이는 애니메이션 조명을 만들어보자.

어떨때 필요할까? 🙄 해가 동쪽에서 서쪽으로 지는 애니메이션을 만들고싶다거나 할때 움직이는 조명이 필요할것이다!

 

애니메이션시 draw함수에서 했던 기억을 되살려서

 

const clock = new THREE.Clock();

function draw() {
        const delta = clock.getDelta();
        
        const time = clock.getElapsedTime();
        light.position.x = Math.cos(time)*5;
        light.position.z = Math.sin(time)*5;

		renderer.render(scene, camera);
		renderer.setAnimationLoop(draw);
	}

detla 는 이전에 있던 clock에 getDelta()라는 속성을 이용한것 

 

 

sin = b/a

cos = c/a

 

 

a= 1 일때 sin  => b => y축으로 움직이는값

cos => c x축으로 움직이는값

 

값이늘어남에 따라 점의 값이 움직이고 그게 원모양을 이루어서 돌아가는 원리다.

 

 

 

그림자설정을 해보자

export default function example() {
	// Renderer
	const canvas = document.querySelector('#three-canvas');
	const renderer = new THREE.WebGLRenderer({
		canvas,
		antialias: true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
    renderer.shadowMap.enabled = true;

renderer에서 shadowMap.enabled = true로 설정해준다

 

1. 다른물체에 영향을 주는지 - cast shadow

2. 영향을 받아서 나한테도 그림자가 그려지는지 - receive shadow

 

 

공과 박스는 cashShadow가 true고 아래에 있는 plane은 영향받아서 그림자가 그려져야하기에 receiveShadow true

 

light.castShadow = true;

//그림자 설정
    plane.receiveShadow = true;
    box.castShadow = true;
    box.receiveShadow = true;
    sphere.castShadow = true;
    sphere.receiveShadow = true;

 

애니메이션을 잠시 주석처리한후에 화면을 보면

그림자부분이 약간 깨져보인다. 

이걸 조명에서 설정해줄 수 있다.

 

mapSize라는 속성을 통해서 그림자 퀄리티를 높일 수 있다.

 

    light.castShadow = true;
    light.shadow.mapSize.width = 2048;
    light.shadow.mapSize.height = 2048;
    //그림자 부드럽게
    light.shadow.radius = 5;

 

mapSize는 성능에 영향을 주기때문에 너무 쎄게 설정하면 안된다.