[three.js] 램프의 종류 총결

AmbientLight

모든 장면의 형상을 전방위적으로 균일하게 조명하다.색상 및 강도 지정하기
전체적으로 밝아지고 싶을 때 사용하세요.그러나 그림자를 그릴 수 없기 때문에 기본적으로 다른 등과 함께 사용한다

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)

DirectionalLight

햇빛 같은 물건.한 방향을 비추다

const directionalLight = new THREE.DirectionalLight(0xa09e5f, 0.5)

Ambient Light와 함께 사용

HemisphereLight

위에서 찍은 색과 아래에서 찍은 색을 지정할 수 있습니다
첫 번째 매개변수는 위의 색상, 두 번째 매개변수는 아래의 색상, 세 번째 매개변수 강도

const hemisphereLight = new THREE.HemisphereLight(0x507fff, 0xd0e040, 0.3)

Ambient Light와 함께 사용

PointLight

전구 같은 물건.광원이 작아 전체 방향을 밝게 비춘다

const pointLight = new THREE.PointLight(0xffffff, 0.5)
pointLight.position.set(2, 3, 4)

Ambient Light와 함께 사용

RectAreaLight

발광판 같은 인상.일정한 방향을 비추다
하나의 매개 변수는 색깔, 두 번째 강도, 세 번째 구역 램프의 너비, 네 번째 구역 램프의 높이이다.
밑에서 비춰주세요.

const rectAreaLight = new THREE.RectAreaLight(0x507fff, 2, 3, 3)
rectAreaLight.position.set(0, -0.5, 0)
rectAreaLight.rotation.x = Math.PI * 0.5

Ambient Light와 함께 사용

구역등은 아래에서 위로 비춘다
아래 판이 빛에 비치지 않았는지 확인할 수 있어요.

SpotLight

말 그대로 스포트라이트.
전방을 비추어 광원을 확대하다
매개변수에는 색상, 강도, 조사 거리, 각도(각도), 프로파일 흐림 정도(0~1에서 기본값은 0), 조명이 조명 거리를 따라 어두워지는 양(0~1)이 포함됩니다.

const spotLight = new THREE.SpotLight(0x78ff00, 0.5, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0, 2, 3)

Ambient Light와 함께 사용

주의

등불이 많을수록 계산량이 많을수록 부하가 커지기 때문에 최소한으로 제어해야 한다

저비용: Ambient Light, Hemisphere Light

중간 비용: DirectionalLight, Point Light

고비용: RectAreaLight, SpotLight

3D 모형도 Blender 등을 통해 무늬를 바꿀 수 있다.