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

인기 글

태그

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

최근 글

관리자

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

w__am 개발노트

재질, MeshNormalMaterial_각 법선의 방향에 따라 다른 색상을 부여
Frontend/Three.js

재질, MeshNormalMaterial_각 법선의 방향에 따라 다른 색상을 부여

2024. 10. 27. 19:12

 

MeshNormalMaterial

  • 물체의 표면 법선(normal) 벡터를 기반으로 색상을 렌더링 한다.
  • 이 재질은 주로 물체의 법선을 시각적으로 표현할 때 사용된다.
  • 각 법선의 방향에 따라 다른 색상을 부여한다.
  • SphereGeometry (원 모양)으로 설정할 경우 법선의 각도가 일정해서 색상의 변화를 확인하기 어렵다.

 

 

법선 벡터의 방향은 색상으로 매핑되며, 일반적으로 다음과 같이 동작한다

  1. 법선 벡터
    • 물체의 각 표면 점에서 수직으로 나오는 벡터를 기반으로 색상이 결정된다.
    • 법선이 위쪽을 향하면 빨간색, 오른쪽을 향하면 초록색, 그리고 앞쪽을 향하면 파란색으로 표현된다.



  2. 시각적 효과
    • 이 재질은 물체의 형태를 이해하는 데 도움을 준다.
    • 조명 효과 없이도 입체감을 나타낼 수 있다.
    • 객체의 구조나 형태를 강조하고자 할 때 유용하다.


  3. 사용 예시
    • 주로 디버깅, 시각화, 또는 법선 방향을 이해하기 위한 도구로 사용된다.
    • 특정 아트 스타일을 위해서도 활용될 수 있다.

 

 

 

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

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

재질, MeshStandardMaterial에 효과 더하기  (0) 2024.10.27
재질, MeshMatcapMaterial_Matcap 텍스처를 사용하여 간단하게 색상과 조명 효과를 적용 가능  (0) 2024.10.27
재질, MeshToonMaterial(만화 느낌)  (0) 2024.10.27
재질, 여러 이미지 텍스쳐가 적용된 큐브  (0) 2024.10.22
재질, 텍스쳐 변환  (0) 2024.10.22
    'Frontend/Three.js' 카테고리의 다른 글
    • 재질, MeshStandardMaterial에 효과 더하기
    • 재질, MeshMatcapMaterial_Matcap 텍스처를 사용하여 간단하게 색상과 조명 효과를 적용 가능
    • 재질, MeshToonMaterial(만화 느낌)
    • 재질, 여러 이미지 텍스쳐가 적용된 큐브
    wam
    wam

    티스토리툴바