wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • joi 에러
  • reactive variables
  • 스코프
  • getdelta()
  • 데이터 포맷
  • 원형적인 움직임
  • 함수의 범위
  • getelapsedtime()
  • gridhelper
  • axeshelper
  • 초기 환경설정
  • 디자인 패턴
  • 오프-프레미스(off-premise) 방식
  • 렌더링 성능 최적화
  • type-graphql
  • mapped types
  • math.sin()
  • Decorators
  • math.cos()
  • API
  • e.preventdefault()
  • react 성능 최적화
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • 함수 리터럴
  • 함수 선언문
  • 삼각함수
  • isabstract
  • three.js 구성 요소
  • 함수 표현식
  • Interface

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

조명, SpotLight_스포트라이트 효과_무대 조명이나 손전등과 같은 빛을 표현
Frontend/Three.js

조명, SpotLight_스포트라이트 효과_무대 조명이나 손전등과 같은 빛을 표현

2024. 11. 10. 01:05

 

 

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
    'Frontend/Three.js' 카테고리의 다른 글
    • 조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과
    • 조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과
    • 조명, PointLight _ 특정 지점에서 빛이 모든 방향으로 퍼져나가는 조명 효과_ 전구나 촛불 같은 광원을 표현
    • 조명, 그림자(Shadow) 처리하기
    wam
    wam

    티스토리툴바