Frontend/Three.js

재질, MeshToonMaterial(만화 느낌)

wam 2024. 10. 27. 18:28

 

MeshToonMaterial

  • 셰이딩이 간소화된 스타일을 표현하기 위해 사용한다.
  • 셀 셰이딩(cell shading)이라고도 불린다.
  • 일반적인 조명 효과를 단순화하여 만화 같은 스타일을 만들어 준다.

 

 

MeshToonMaterial의 주요 속성

  1. color
    • 재질의 기본 색상을 지정한다.
  2. gradientMap
    • toon 효과의 색상 단계를 설정할 수 있는 텍스처를 지정한다.
    • 이를 통해 원하는 음영 단계를 직접 설정할 수 있다.
  3. shininess
    • 반사광의 강도를 설정한다.
  4. lightMap / lightMapIntensity
    • 추가 조명 효과를 위한 텍스처를 설정할 수 있다.
  5. emissive / emissiveIntensity
    • 발광 효과를 추가하여 물체가 빛을 내는 것처럼 보이게 할 수 있다.
  6. bumpMap, normalMap
    • 세부적인 질감을 추가하는 텍스처를 통해 표면의 디테일을 강화할 수 있다.

 

 

MeshToonMaterial은 MeshBasicMaterial 차이

  • MeshToonMaterial은 MeshBasicMaterial과 비슷하지만, toon 셰이딩을 통해 빛의 세기에 따라 단순화된 명암을 표현하는 데 적합하다.
  • 게임이나 만화 스타일의 그래픽을 만들 때 자주 사용된다.

 

 

  /* 텍스쳐 이미지 로드 */
  const textureLoader = new THREE.TextureLoader(loadingManager);
  const gradientTex = textureLoader.load("/textures/gradient.png");
  gradientTex.magFilter = THREE.NearestFilter;
  
  
  /* Messh 만들기 */
  const geometry = new THREE.ConeGeometry(1, 2, 128);
  const material = new THREE.MeshToonMaterial({
    color: "plum",
    gradientMap: gradientTex
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

 

 

댓글수0