패스트캠퍼스 환급챌린지 24일차 미션 (2월 24일) : 초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas 강의 후기

Part3 [Three.js]의 Chapter03 3D 텍스트 강의 후기(08~09강)

 

오늘은 spolight 조명을 추가해서 텍스트 뒤쪽에 조명이 향하는 모습을 구현해보았습니다. spolight 조명은 촬영장에서 배우들을 비출 때 사용하는 그 조명을 생각하시면 되는데요, target값을 가지고있어서 어느곳을 향해 조명을 비출지 따로 조정할 수 있습니다.

spolight 인스턴스 생성하는 건 다른 ambient, point light처럼 new THREE.Spolight로 생성할 수 있는데요, props가 다른 조명들과 다르게 좀 많아 보입니다. 차례대로 빛의 색상, 강도, 거리, 퍼지는 각도, 반그림자..?, 거리에따라 빛이 희미해지는 정도 를 나타냅니다.

Three.js 공부할 때마다 모르는 단어들이 종종 나와서 단어장을 많이 찾아보게되네요 ㅎㅎ; ((( Penumbra는 진짜 처음 들어봅니다; )))

  const spotlight = new THREE.SpotLight(0xffffff, 2.5, 30, Math.PI *0.15, 0.2,0.5);

https://threejs.org/docs/?q=spotlight#api/en/lights/SpotLight

three.js docs

spotlight position까지 설정 후 scene에 조명을 추가한 모습입니다. 사실 이전과 크게 차이가 안납니다...ㅋ-ㅋ... 조명을 받아 줄 배경을 추가해봅시다

 

Three.js 공부할 때마다 또 하나 느끼는 것은... 이게 강의고, 강사님이 필요한 것을 금방금방 찾아주니까 빠르게 만드는 거지 혼자 만들었다면 삽질을 정말 어마무시하게 했을 것 같다는 생각이 듭니다. 뭐 하나 빠뜨리거나(예: update 문, position.set 등등) 빠뜨리지 않아도 따로 뭔가를 추가하지 않으면(Light, 배경 등) 오류도 없이 제대로 보이지 않는 상황들이 많아서 복장이 터지지 않았을까 싶어요..🥲

  const plainGeometry = new THREE.PlaneGeometry(2000, 2000);
  const plainMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 });
  const plain = new THREE.Mesh(plainGeometry, plainMaterial);
  plain.position.z = -10;
  scene.add(plain);

제 화면에서는... 이상하게 조명이 참 약하게 보이네요 ㅠ

spolight를 명확하게 하기위해 point, ambientLight 를 지운 후 모습

 

 

spolight helper까지 추가한 모습

spotLight Helper를 추가하면 각도에 따라 빛이 퍼지는 정도를 확인할 수 있습니다. 영상에서는 render함수에 Update 문을 추가하지않아 spotLight Helper의 각도가 변하지 않는 것같군요..🫠

아래 코드를 추가해시면 gui에서 angle값을 변경할 때마다 spotlight helper의 각도도 변하는 것을 확인할 수 있습니다..

    spolightHelper.update();

 

angle 외에 position.z, distance, decay, penumbra 등의 값을 설정해서 조명을 좀더 자연스럽게 보이게 할 수 있습니다.

position.z는 spotLight의 target이 향할 지점의 z값을, distance는 말그대로 조명원점에서 비춰질 거리, decay는 거리에따라 빛이 희미해지는 정도로 값이 커질수록 빛이 희미~해집니다. penumbra는 0에 가까워질수록 조명이 뚜렷해지는 속성입니다.

 

✨오늘의 학습 인증 샷

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://fastcampus.co.kr/event_online_challenge_2401_mission

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스

https://bit.ly/48sS29N