Materials

이장에서는 자주 사용하는 materials 에 대해 설명드리고자 합니다.

참조

properties

• color: material 색상, default: 0xffffff
• flatShading: material이 플랫 셰이딩으로 렌더링할지를 정의합니다. 기본값은 false입니다. flatShading이 true가 되면 표면이 각진 형태로 출력됩니다.
• map: new THREE.TextureLoader().load( def.ring.url ); 이미지를 이용해서 texture를 입힙니다.
• opacity: 0.1 ~ 1.0, default: 1.0
• shininess: MeshPhongMaterial에 사용하며 .specular 하이라이트의 광택도. 값이 높을수록 하이라이트가 선명해집니다. 기본값은 30입니다.
• side: Defines which side of faces will be rendered - front, back or both. Default is THREE.FrontSide. Other options are THREE.BackSide and THREE.DoubleSide.(flat 으로 표시될때 위에서 볼때 나타날 것인가 아래서 볼때 나타날것인가를 제시)
• specular: 0x666666Specular color of the materia 반사광, Default is a Color set to 0x111111 (very dark grey).
• transparent: true | false
• wireframe : face를 나타낼것인가 (default: false);

MeshBasicMaterial

빛의 영향을 받지 않는 기본 재질이다.
조명이 필요 없는 단순한 색상 표현에 적합하다.

MeshBasicMaterial({ color: 0x00ff00 });

MeshLambertMaterial

특정한 highlights 없이는 빛나지 않는 표면. 보여지기 위해서는 빛이 필요하다.
표면의 밝기를 단순하게 계산하는 재질로, 빠른 렌더링에 유리하다.

MeshLambertMaterial({ color: 0xa52523 })

• color:
• map: texture

MeshPhongMaterial

표준 물리 기반 재질로, 빛의 영향을 받아 반사와 그림자를 표현할 수 있다.
물체가 빛을 반사하는 모습을 표현하고 싶을 때 사용한다.
유리나 금속처럼 반짝이는 표면을 표현할 때 적합하다.

참조

MeshStandardMaterial

물리적으로 기준이 되는 material 이다. MeshPhongMaterial 보다 좀더 현실적인 느낌은 있어나 좀더 많은 계산요소가 들어간다.
물체가 빛을 반사하는 모습을 표현하고 싶을 때 사용한다.

THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5, flatShading: true });

PointsMaterial(ParticleBasicMaterial)

PointsMaterial({color: 0xfffafa, size: 0.2});

ParticleBasicMaterial

const pMaterial = new THREE.ParticleBasicMaterial({
  color: 0xfffafa,
  size: 0.2
});
=>
const pMaterial = new THREE.PointsMaterial({
  color: 0xfffafa,
  size: 0.2
});