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

인기 글

태그

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

최근 글

관리자

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

재질, MeshMatcapMaterial_Matcap 텍스처를 사용하여 간단하게 색상과 조명 효과를 적용 가능

재질, MeshMatcapMaterial_Matcap 텍스처를 사용하여 간단하게 색상과 조명 효과를 적용 가능
Frontend/Three.js

재질, MeshMatcapMaterial_Matcap 텍스처를 사용하여 간단하게 색상과 조명 효과를 적용 가능

2024. 10. 27. 19:58

 

MeshMatcapMaterial

  • 특정한 시각적 효과를 생성하기 위해 사용된다.
  • 주로 매트 캡(matt cap) 텍스처를 사용하여 객체의 표면에 색상과 조명을 적용하는 데 유용하다.

 

 

MeshMatcapMaterial의 주요 특징

 

  1. Matcap 텍스처
    • Matcap은 2D 텍스처로, 조명과 그림자의 효과를 시뮬레이션하기 위해 사용된다.
    • 이 텍스처는 일반적으로 구 형태의 렌더링된 이미지를 포함한다.
    • 객체의 노멀 벡터에 따라 색상이 결정된다.


  2. 간단한 설정
    • MeshMatcapMaterial은 설정이 간단하고 빠르게 사용할 수 있다.
    • 복잡한 조명 효과를 필요로 하지 않는 경우 유용하다.


  3. 비구조적 조명
    • 이 머티리얼은 조명 정보 없이도 좋은 시각적 효과를 제공하므로, 3D 씬에서 사용하기에 적합하다.


  4. 특정 효과
    • 이 머티리얼은 금속, 플라스틱, 또는 유리와 같은 다양한 표면 효과를 쉽게 재현할 수 있다.

 

 

Matcap 이미지 다운로드 하기

https://www.deviantart.com/sespider/art/163-FREE-MatCaps-258893793

  • 구글에 MatCap texture download 검색
  • 로그인 해서 MatCap texture download 하기
  • 다양한 입체 구 형태의 이미지가 있다.

 

 

 

/* 텍스쳐 이미지 로드 */
const textureLoader = new THREE.TextureLoader(loadingManager);
const matcapTex = textureLoader.load("/textures/matcap/material3.jpg");
/* Messh 만들기 */
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshMatcapMaterial({
matcap: matcapTex
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

 

 

 

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

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

재질, Environment Map_물체 표면에 반사되는 배경 이미지를 설정  (0) 2024.10.29
재질, MeshStandardMaterial에 효과 더하기  (0) 2024.10.27
재질, MeshNormalMaterial_각 법선의 방향에 따라 다른 색상을 부여  (0) 2024.10.27
재질, MeshToonMaterial(만화 느낌)  (0) 2024.10.27
재질, 여러 이미지 텍스쳐가 적용된 큐브  (0) 2024.10.22
  • MeshMatcapMaterial
  • MeshMatcapMaterial의 주요 특징
  • Matcap 이미지 다운로드 하기
'Frontend/Three.js' 카테고리의 다른 글
  • 재질, Environment Map_물체 표면에 반사되는 배경 이미지를 설정
  • 재질, MeshStandardMaterial에 효과 더하기
  • 재질, MeshNormalMaterial_각 법선의 방향에 따라 다른 색상을 부여
  • 재질, MeshToonMaterial(만화 느낌)
wam
wam

티스토리툴바

개인정보

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

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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