개발/three.js / / 2022. 10. 7. 12:16

three.js PointLight와 SpotLight

반응형

https://threejs.org/docs/index.html?q=pointlight#api/en/lights/PointLight 

 

three.js docs

 

threejs.org

PointLight는 특정 광원으로부터 전 방향으로 나아가는 light이다.

빛이 영향을 미치는 거리, 또한 거리에 따라 얼마나 어두워지는지 정도를 decay로 정할 수 있다. 

 

const light = new THREE.PointLight('white', 1, 100, 2);
light.position.y = 3;
scene.add(light);

const lightHelper = new THREE.PointLightHelper(light);
scene.add(lightHelper);

PointLight의 생성자의 값들을 변경해보면서 테스트 해보자. 

 

 

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

 

three.js docs

 

threejs.org

 

const light = new THREE.SpotLight('white', 1, 30, Math.PI / 6);
light.position.x = -5;
light.position.y = 3;
scene.add(light);

const lightHelper = new THREE.SpotLightHelper(light);
scene.add(lightHelper);

원뿔 모양의 방향으로 빛이 나아가는 SpotLight의 경우 angle을 설정하여 각도를 설정할 수 있다.

 

반응형

'개발 > three.js' 카테고리의 다른 글

three.js Raycaster로 물체 감지하기  (0) 2022.10.11
three.js HemisphereLight와 RectAreaLight  (0) 2022.10.10
three.js 그림자 집어넣기  (0) 2022.10.06
three.js Light 객체 사용하기  (0) 2022.10.03
three.js SkyBox 구현하기  (0) 2022.09.30
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유