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

최근 글

관리자

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

w__am 개발노트

재질, flatShading - 각지게 표현
Frontend/Three.js

재질, flatShading - 각지게 표현

2024. 10. 16. 03:28

 

flatShading 속성

 

  // MeshPhongMaterial, 상대적으로 덜 사실적
  const material1 = new THREE.MeshPhongMaterial({
    color: "orangered",
    shininess: 800,
    flatShading: true
  });

  // MeshStandardMaterial, 고품질의 사실적인 렌더링
  const material2 = new THREE.MeshStandardMaterial({
    color: "orangered",
    roughness: 0.2,
    metalness: 0.3,
    flatShading: true
  });

 

  • flatShading 속성은 평면 셰이딩(Flat Shading)을 활성화할지 여부를 결정하는 Boolean 값이다.

 

  • 이 값이 true로 설정되면, 각 면(Face)에 대해 개별적으로 정규 벡터가 계산되어 면이 평평하게 보이게 된다.
    • 이때 각 삼각형의 면이 뚜렷하게 드러나기 때문에 물체가 더 각지게 보이게 된다.

 

  • flatShading이 false일 경우(기본값), 모든 면에 대해 부드러운 셰이딩(Smooth Shading)이 적용되어 정점 간의 노멀 벡터를 보간해 부드러운 표면을 표현하게 된다.

 

 

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

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

재질, 텍스쳐 이미지 로드하기  (0) 2024.10.16
재질, side - Mesh의 앞 뒷면  (0) 2024.10.16
재질, MeshStandardMaterial (MeshPhongMaterial과 비교)  (0) 2024.09.30
재질, MeshLambertMaterial, MeshPhongMaterial  (0) 2024.09.30
재질, MeshBasicMaterial  (0) 2024.09.30
    'Frontend/Three.js' 카테고리의 다른 글
    • 재질, 텍스쳐 이미지 로드하기
    • 재질, side - Mesh의 앞 뒷면
    • 재질, MeshStandardMaterial (MeshPhongMaterial과 비교)
    • 재질, MeshLambertMaterial, MeshPhongMaterial
    wam
    wam

    티스토리툴바