SpotLight
- 특정 방향으로 원뿔 형태의 빛을 발산하는 광원이다.
- 3D 씬에서 스포트라이트 효과를 내는 데 사용된다.
- 이 빛은 특정 지점에 집중해 비추며, 시야 각과 감쇠를 설정해 효과를 세밀하게 조정할 수 있다.
- 무대 조명이나 손전등과 같은 빛을 표현할 때 유용하다.
SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
- 위치 (Position)
- 빛이 발산되는 시작 지점이다.
- position.set(x, y, z)로 설정할 수 있다.
- 대상 (Target)
- 빛이 향하는 지점을 설정할 수 있는 속성이다.
- light.target.position.set(x, y, z)로 대상 위치를 조정하고 씬에 add해야 한다.
- 강도 (Intensity)
- 빛의 밝기를 설정한다.
- 값이 높을수록 밝은 조명을 제공한다.
- 색상 (Color)
- 빛의 색을 설정해 따뜻한 느낌이나 차가운 느낌의 조명을 연출할 수 있다.
- 거리 (Distance)
- 빛의 영향을 미치는 최대 거리이다.
- 거리를 넘어가면 빛의 영향이 사라진다.
- 감쇠 (Decay)
- 거리에 따라 빛이 약해지는 정도를 조정하는 값이다.
- 각도 (Angle)
- 빛의 확산 각도를 설정한다.
- 값이 작을수록 좁은 빛 범위를 가진다.
- 특정 지점에 더 집중하는 효과를 낸다.
- 펜엄브라 (Penumbra)
- 빛의 가장자리 부드러움을 설정하는 값이다.
- 값이 높을수록 가장자리로 갈수록 어두워지는 부드러운 경계가 생긴다.
이 속성들을 조정해 SpotLight의 범위, 방향, 밝기, 그리고 가장자리 부드러움을 조절할 수 있다.
// SpotLight : 스포트라이트 효과
const light = new THREE.SpotLight("white", 30, 10, Math.PI / 6);
scene.add(light);
// lightHelper: 조명을 시각적으로 확인하는 법
const lightHelper = new THREE.SpotLightHelper(light);
scene.add(lightHelper)
- Math.PI = 180도
- Math.PI / 6 = 30
'Frontend > Three.js' 카테고리의 다른 글
조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과 (0) | 2024.11.11 |
---|---|
조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과 (0) | 2024.11.11 |
조명, PointLight _ 특정 지점에서 빛이 모든 방향으로 퍼져나가는 조명 효과_ 전구나 촛불 같은 광원을 표현 (0) | 2024.11.10 |
조명, 그림자(Shadow) 처리하기 (0) | 2024.11.08 |
조명, Light 애니메이션 (0) | 2024.11.03 |