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

최근 글

관리자

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

w__am 개발노트

재질,  텍스쳐 변환
Frontend/Three.js

재질, 텍스쳐 변환

2024. 10. 22. 22:34

 

THREE.RepeatWrapping

  • 텍스처를 물체에 적용할 때 사용되는 래핑 모드 중 하나이다.
  • 텍스처가 물체의 UV 좌표를 벗어날 경우 텍스처가 반복되어 적용되게 한다.
  • wrapS는 수평, wrapT 수직 방향으로 반복되도록 설정하는 것이다.
  • 텍스쳐의 offset, repeat 등 변환을 줄 때 THREE.RepeatWrapping 적용하기

 

 

 

텍스쳐 기준 가운데로 잡기

...

/* 텍스쳐 변환 */
//  텍스처가 물체의 UV 좌표를 벗어날 경우 텍스처가 반복되어 적용되게 한다.
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

// 위치 이동
texture.offset.x = 0.3;
texture.offset.y = 0.3;


// 반복
texture.repeat.x = 2;
texture.repeat.y = 2;

// 회전
texture.rotation = Math.PI * 0.25;
texture.rotation = THREE.MathUtils.degToRad(60);

// 기준을 가운데로 잡기
texture.center.x = 0.5;
texture.center.y = 0.5;

 

 

 

저작자표시 변경금지

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

재질, MeshToonMaterial(만화 느낌)  (0) 2024.10.27
재질, 여러 이미지 텍스쳐가 적용된 큐브  (0) 2024.10.22
재질, 로딩 매니저(여러개의 텍스쳐 이미지)  (0) 2024.10.16
재질, 텍스쳐 이미지 로드하기  (0) 2024.10.16
재질, side - Mesh의 앞 뒷면  (0) 2024.10.16
    'Frontend/Three.js' 카테고리의 다른 글
    • 재질, MeshToonMaterial(만화 느낌)
    • 재질, 여러 이미지 텍스쳐가 적용된 큐브
    • 재질, 로딩 매니저(여러개의 텍스쳐 이미지)
    • 재질, 텍스쳐 이미지 로드하기
    wam
    wam

    티스토리툴바