<div id="readability-page-1" class="page"><div><blockquote>
Three.js에서 Light(조명)은 3D 씬(Scene) 내에서 객체의 조명과 그림자를 결정하는 중요한 요소입니다. 조명을 사용하면 입체감, 반사, 그림자, 분위기 효과를 조정할 수 있습니다.
</blockquote>
<h2 id="ambientlight-주변광"><code>AmbientLight</code> (주변광)</h2>
씬 전체를 균일하게 밝히는 조명 (모든 방향에서 빛이 들어오는 효과) 
그림자가 없음 (모든 객체가 동일한 밝기로 표시됨) 
주로 다른 조명과 함께 사용하여 기본적인 밝기를 추가하는 용도로 활용
<pre><code>// uniform
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
ambientLight.color = new THREE.Color(0xffffff)
scene.add(ambientLight)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/d4805321-fb25-44d9-8c97-d26fec4ee473/image.png">
<h2 id="directionallight-태양광"><code>DirectionalLight</code> (태양광)</h2>
한 방향에서 오는 평행광 (햇빛과 비슷한 효과) 
그림자 생성 가능 (매우 현실적인 조명 효과) 
특정 위치에서 빛이 퍼지는 것이 아니라, 한 방향으로 균일하게 쏘여짐
<pre><code>// directional
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)
directionalLight.position.set(1, 0.25, 0)
scene.add(directionalLight)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/2d294294-0dca-4842-a97f-de8d3aa6d052/image.png">
<h2 id="hemispherelight-반구-조명"><code>HemisphereLight</code> (반구 조명)</h2>
하늘과 땅에서 서로 다른 색의 빛을 제공 (예: 하늘은 파란색, 땅은 노란색) 
자연스러운 실외 조명 효과를 줄 때 사용됨
<pre><code>const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.9)
scene.add(hemisphereLight)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/696c4d32-0df5-49c7-bfbb-2df1815070c4/image.png">
<h2 id="pointlight-점광원"><code>PointLight</code> (점광원)</h2>
한 점에서 사방으로 퍼지는 빛 (전구 같은 조명 효과) 
거리(distance)에 따라 감쇠 (거리가 멀어질수록 어두워짐) 
그림자 생성 가능
<pre><code>const pointLight = new THREE.PointLight(0xff9000, 1.5, 10, 2)
pointLight.position.set(1, -0.5, 1)
scene.add(pointLight)</code></pre>
🌟 거리 효과 추가 (decay)
<pre><code>pointLight.decay = 2; // 빛이 점점 약해지는 정도</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/2e31c8e5-57e1-40a6-989f-3cea55e37585/image.png">
<h2 id="rectarealight-사각형-조명"><code>RectAreaLight</code> (사각형 조명)</h2>
넓은 면적에서 빛을 내는 조명 (창문이나 네온사인 효과) 
물체의 표면을 자연스럽게 비추는 효과 제공 
MeshStandardMaterial 또는 MeshPhysicalMaterial과 함께 사용해야 함 
개인적으론 화보 찍을때 보조 조명같은 느낌..
<pre><code>const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 6, 1, 1)
rectAreaLight.position.set(-0.5, 0, 0.5)
rectAreaLight.lookAt(new THREE.Vector3()) // 빛의 위치를 가운데로 둠
scene.add(rectAreaLight)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/4d531f32-1e27-4648-a729-5bdd4c99a2a8/image.png">
다른 빛을 제거하면?
<img src="https://velog.velcdn.com/images/hyounglee/post/2f6759cb-2805-482b-9e44-84f93d444544/image.png">
<h2 id="spotlight-스포트라이트"><code>SpotLight</code> (스포트라이트)</h2>
원뿔 모양으로 빛을 집중시키는 조명 (무대 조명과 유사) 
거리 감쇠 및 그림자 생성 가능 
빛이 퍼지는 각도를 조정할 수 있음 (angle 값 사용)
<pre><code>const spotLight = new THREE.SpotLight(0x78ff00, 6, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0, 2, 3)
scene.add(spotLight)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/acdc2f69-3599-45ce-bb10-86efe450dc1b/image.png">
<pre><code>spotLight.target.position.x = -1.5
scene.add(spotLight.target)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/189f47b5-225c-48b8-84cb-b9e23f79ec49/image.png">
🌟 그림자 활성화
<pre><code>spotLight.castShadow = true;</code></pre>
<h2 id="성능">성능</h2>
Light는 성능에 많은 영향을 준다. 따라서 가능한 최소한의 조명을 사용하는 것이 좋다.
<ul>
<li><code>AmbientLight</code>, <code>HemisphereLight</code> 적은 비용</li>
<li><code>DirectionalLight</code>, <code>PointLight</code> 중간 비용</li>
<li><code>SpotLight</code>, <code>RectAreaLight</code> 많은 비용</li>
</ul>
<h2 id="baking">Baking</h2>
<img src="https://velog.velcdn.com/images/hyounglee/post/b6603d16-89a0-4048-a7ab-dec3e0812bdc/image.png">
<ul>
<li>bake a light into the texture -&gt; 텍스쳐에 조명을 입혀버린다는 의미같음</li>
<li>빛을 실시간으로 옮길 수 없다는 단점이 있다.</li>
</ul>
<h2 id="helpers">Helpers</h2>
조명의 위치를 잡는데 도움이 되는 기능
<pre><code>const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2)
scene.add(hemisphereLightHelper)

const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2)
scene.add(directionalLightHelper)

const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2)
scene.add(pointLightHelper)

const spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)

window.requestAnimationFrame(() =&gt; {
	spotLightHelper.update()
})

const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/4ba68421-dedf-4f96-84cd-8e24bbc81847/image.png"></div></div>

(งᐖ)ว

Three.js에서 Light(조명)은 3D 씬(Scene) 내에서 객체의 조명과 그림자를 결정하는 중요한 요소입니다. 조명을 사용하면 입체감, 반사, 그림자, 분위기 효과를 조정할 수 있습니다.
AmbientLight (주변광)
씬 전체를 균일하게 밝히는 조명 (모든 방향에서 빛이 들어오는 효과)
그림자가 없음 (모든 객체가 동일한 밝기로 표시됨)
주로 다른 조명과 함께 사용하여 기본적인 밝기를 추가하는 용도로 활용
// uniform
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
ambientLight.color = new THREE.Color(0xffffff)
scene.add(ambientLight)
DirectionalLight (태양광)
한 방향에서 오는 평행광 (햇빛과 비슷한 효과)
그림자 생성 가능 (매우 현실적인 조명 효과)
특정 위치에서 빛이 퍼지는 것이 아니라, 한 방향으로 균일하게 쏘여짐
// directional
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)
directionalLight.position.set(1, 0.25, 0)
scene.add(directionalLight)
HemisphereLight (반구 조명)
하늘과 땅에서 서로 다른 색의 빛을 제공 (예: 하늘은 파란색, 땅은 노란색)
자연스러운 실외 조명 효과를 줄 때 사용됨
const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.9)
scene.add(hemisphereLight)
PointLight (점광원)
한 점에서 사방으로 퍼지는 빛 (전구 같은 조명 효과)
거리(distance)에 따라 감쇠 (거리가 멀어질수록 어두워짐)
그림자 생성 가능
const pointLight = new THREE.PointLight(0xff9000, 1.5, 10, 2)
pointLight.position.set(1, -0.5, 1)
scene.add(pointLight)
🌟 거리 효과 추가 (decay)
pointLight.decay = 2; // 빛이 점점 약해지는 정도
RectAreaLight (사각형 조명)
넓은 면적에서 빛을 내는 조명 (창문이나 네온사인 효과)
물체의 표면을 자연스럽게 비추는 효과 제공
MeshStandardMaterial 또는 MeshPhysicalMaterial과 함께 사용해야 함
개인적으론 화보 찍을때 보조 조명같은 느낌..
const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 6, 1, 1)
rectAreaLight.position.set(-0.5, 0, 0.5)
rectAreaLight.lookAt(new THREE.Vector3()) // 빛의 위치를 가운데로 둠
scene.add(rectAreaLight)
다른 빛을 제거하면?
SpotLight (스포트라이트)
원뿔 모양으로 빛을 집중시키는 조명 (무대 조명과 유사)
거리 감쇠 및 그림자 생성 가능
빛이 퍼지는 각도를 조정할 수 있음 (angle 값 사용)
const spotLight = new THREE.SpotLight(0x78ff00, 6, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0, 2, 3)
scene.add(spotLight)
spotLight.target.position.x = -1.5
scene.add(spotLight.target)
🌟 그림자 활성화
spotLight.castShadow = true;
성능
Light는 성능에 많은 영향을 준다. 따라서 가능한 최소한의 조명을 사용하는 것이 좋다.
AmbientLight, HemisphereLight 적은 비용
DirectionalLight, PointLight 중간 비용
SpotLight, RectAreaLight 많은 비용
Baking
bake a light into the texture -> 텍스쳐에 조명을 입혀버린다는 의미같음
빛을 실시간으로 옮길 수 없다는 단점이 있다.
Helpers
조명의 위치를 잡는데 도움이 되는 기능
const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2)
scene.add(hemisphereLightHelper)
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2)
scene.add(directionalLightHelper)
const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2)
scene.add(pointLightHelper)
const spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)
window.requestAnimationFrame(() => {
    spotLightHelper.update()
})
const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)

TIL 119 | Three.js 기본 - Light

댓글