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

인기 글

태그

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

최근 글

관리자

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

조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과

조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과
Frontend/Three.js

조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과

2024. 11. 11. 18:39

 

HemisphereLight

 

  • 하늘과 땅을 기반으로 빛을 조절하는 조명이다.
  • AmbientLight와 같이 전체적으로 은은하게 깔아주는 조명이며 그림자가 없는 것이 특징이다.
  • 위쪽 색상과 아래쪽 색상을 지정해 주면, 이 빛은 장면의 모든 객체에 고르게 빛을 투사하며, 이 빛의 방향은 특정하지 않고 주위 조명을 제공하는 역할을 한다.
  • 예를 들어 하늘은 하늘색, 땅은 흰색이나 약간의 회색을 주면 자연스러운 빛 효과를 얻을 수 있다.

 

 

 

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

 

주요 매개변수는 다음과 같다

  1. skyColor
    • 하늘 쪽에서 오는 빛의 색상이다.
    • 일반적으로 하늘색, 파란색 등으로 설정한다.


  2. groundColor
    • 땅 쪽에서 반사되는 빛의 색상이다.
    • 회색, 갈색 등으로 설정해 실제 바닥에 가까운 느낌을 줄 수 있다.


  3. intensity
    • 빛의 세기이다.
    • 기본값은 1이며, 이를 통해 빛의 밝기를 조절할 수 있다.

 

 

/* Light 만들기 */
// HemisphereLight : 하늘과 땅을 기반으로 빛을 조절하는 조명
const light = new THREE.HemisphereLight("pink", "lime", 1);
light.position.set(-5, 3, 0);
scene.add(light);
// lightHelper: 조명을 시각적으로 확인하는 법
const lightHelper = new THREE.HemisphereLightHelper(light);
scene.add(lightHelper);

 

 

이렇게 설정하면 장면 내에서 자연스럽게 위아래로 다른 색조의 빛을 투사해 준다.

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Three.js' 카테고리의 다른 글

Raycaster, 동작 원리  (0) 2024.11.12
조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과  (0) 2024.11.11
조명, SpotLight_스포트라이트 효과_무대 조명이나 손전등과 같은 빛을 표현  (0) 2024.11.10
조명, PointLight _ 특정 지점에서 빛이 모든 방향으로 퍼져나가는 조명 효과_ 전구나 촛불 같은 광원을 표현  (0) 2024.11.10
조명, 그림자(Shadow) 처리하기  (0) 2024.11.08
  • HemisphereLight
'Frontend/Three.js' 카테고리의 다른 글
  • Raycaster, 동작 원리
  • 조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과
  • 조명, SpotLight_스포트라이트 효과_무대 조명이나 손전등과 같은 빛을 표현
  • 조명, PointLight _ 특정 지점에서 빛이 모든 방향으로 퍼져나가는 조명 효과_ 전구나 촛불 같은 광원을 표현
wam
wam
w__am 개발노트wam 님의 블로그입니다.

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.