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

최근 글

관리자

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

w__am 개발노트

조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과
Frontend/Three.js

조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과

2024. 11. 11. 19:31

 

RectAreaLight

  • 직사각형 모양으로 균일한 빛을 방사하는 조명이다.
  • 광원에서 직접적인 조명을 받는 물체 표면에 부드럽고 넓은 조명을 적용할 때 유용하다.
  • 주로 실내 장면이나 부드러운 조명 효과가 필요한 곳에 많이 사용한다
  • width와 height를 통해 직사각형의 크기를 조절할 수 있다.
  • 직사각형의 평면에 따라 빛이 방사되기 때문에, 위치와 회전이 매우 중요하며, 정확히 원하는 방향으로 조명해야 한다.

 

 

RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )

 

다음과 같은 주요 속성을 가진다

  1. color
    • 빛의 색상을 설정하는 속성이다.


  2. intensity
    • 빛의 밝기를 조절하는 속성이다.
    • 값이 클수록 빛이 더 강해진다.


  3. width와 height
    • 조명의 가로와 세로 크기를 조절한다.

 

 

사용할 때 주의할 점

  • RectAreaLight는 MeshStandardMaterial 또는 MeshPhysicalMaterial과 같은 PBR(Materials based on Physical Based Rendering) 재질에서만 효과가 있다는 점이다.
// RectAreaLightHelper는 three.js 코어에 기본적으로 포함되지 않는다.
import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper";

/* Light 만들기 */
// RectAreaLight : 직사각형 모양으로 균일한 빛을 방사하는 조명
const light = new THREE.RectAreaLight("orange", 10, 2, 2);
light.position.set(-5, 3, 0);
scene.add(light);

// lightHelper: 조명을 시각적으로 확인하는 법
const lightHelper = **new RectAreaLightHelper(**light);
scene.add(lightHelper);
  • 성능에 영향을 줄 수 있으므로 필요한 경우에만 사용하는 것이 좋다.
  • RectAreaLightHelper는 three.js 코어에 기본적으로 포함되지 않는다.
    • https://threejs.org/docs/index.html#examples/en/helpers/RectAreaLightHelper
    • 별도로 라이브러리를 불러와주면 된다.

 

 

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

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

Raycaster, 특정 방향의 광선(Ray)에 맞은 Mesh 판별하기  (0) 2024.11.12
Raycaster, 동작 원리  (0) 2024.11.12
조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과  (0) 2024.11.11
조명, SpotLight_스포트라이트 효과_무대 조명이나 손전등과 같은 빛을 표현  (0) 2024.11.10
조명, PointLight _ 특정 지점에서 빛이 모든 방향으로 퍼져나가는 조명 효과_ 전구나 촛불 같은 광원을 표현  (0) 2024.11.10
    'Frontend/Three.js' 카테고리의 다른 글
    • Raycaster, 특정 방향의 광선(Ray)에 맞은 Mesh 판별하기
    • Raycaster, 동작 원리
    • 조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과
    • 조명, SpotLight_스포트라이트 효과_무대 조명이나 손전등과 같은 빛을 표현
    wam
    wam

    티스토리툴바