Material

모든 자식 클래스는 Material 클래스의 속성을 사용할 수 있다.

PointsMaterial

_setupModel() {
  const vertices = [];
  for (let i = 0; i < 10000; i++) {
    const x = THREE.Math.randFloatSpread(5);
    const y = THREE.Math.randFloatSpread(5);
    const z = THREE.Math.randFloatSpread(5);

    vertices.push(x, y, z);
  }

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3) // vertices의 좌표가 3개라는 의미
  );

  const sprite = new THREE.TextureLoader().load("/images/star.png"); // 포인트에 랜더링할 이미지

  const material = new THREE.PointsMaterial({
    map: sprite, // 이미지 랜더링
    alphaTest: 0.5, // 이미지의 픽셀값 중 알파값이 이 alphaTest값보다 클때만 픽셀이 랜더링 됨
    color: "#fff",
    size: 0.005,
    sizeAttenuation: true, // 사이즈를 통해 원근감을 나타낼지의 여부
  });

  const points = new THREE.Points(geometry, material);
  this._scene.add(points);
}

LineBasicMaterial

선에 대한 색상만 지정 가능

_setupModel() {
  const vertices = [-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0];

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3)
  );
  const material = new THREE.LineBasicMaterial({
    color: 0xff0000,
  });

  const line = new THREE.LineLoop(geometry, material);
  // vertices의 구성 좌표가 순서대로 연결되어 라인으로 랜더링 됨
  this._scene.add(line);
}

LineDashedMaterial

점선 표현 가능
선의 길이를 참조하여 재질이 적용되므로 선의 길이를 계산해줘야 함

const material = new THREE.LineDashedMaterial({
  color: 0xffff00,
  dashSize: 0.2, // 선이 그려지는 길이
  gapSize: 0.1, // 선이 띄워지는 길이
  scale: 1, // 대쉬 영역에 대한 표현 횟수를 몇 배로 지정할 것인지
});

const line = new THREE.Line(geometry, material);
line.computeLineDistances(); // 선의 길이 계산
this._scene.add(line);

MeshBasicMaterial

광원의 영향을 받지 않음

• Depth Buffer는 깊이 버퍼이고 z버퍼라고도 한다. z버퍼는 3차원 객체를 카메라를 통해 좌표를 변환시켜 화면상에 랜더링 될 때 해당 3차원 객체를 구성하는 각 픽셀에 대한 z값 좌표값을 0~1로 정규화시킨다.

const material = new THREE.MeshBasicMaterial({
  visible: true, // 랜더링할 때 mesh가 보일지 여부
  transparent: true, // 재질에 대한 불투명도 속성인 opacity를 사용할지에 대한 여부
  opacity: 0.5, // 재질의 불투명도를 지정. 0(투명) ~ 1(불투명) 사이의 값
  // 이 정규화된 z값이 저장된 버퍼가 z버퍼.
  // 이 값이 작을수록 카메라에 가까운 3차원 객체의 픽셀이다.
  depthTest: true, // 랜더링되고있는 mesh의 픽셀 위치의 z값을 깊이 버퍼값을 이용해 검사할지에 대한 여부
  depthWrite: true, // 랜더링되고있는 mesh의 픽셀에 대한 z값을 깊이 버퍼에 기록할지에 대한 여부
  side: THREE.FrontSide, // mesh를 구성하는 삼각형 면에 대해 앞 면만 랜더링할 것인지, 뒷 면만 랜더링할 것인지, 모두 랜더링할 것인지 지정
  // BackSide: 뒷면, DoubleSide: 앞 뒷면 모두
  color: 0xffffff,
  wireframe: false, // mesh가 선으로 포현되는지의 여부
});

const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const box = new THREE.Mesh(boxGeometry, material);
box.position.set(-1, 0, 0);

const sphereGeometry = new THREE.SphereGeometry(0.7, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.set(1, 0, 0);

this._scene.add(box);
this._scene.add(sphere);

MeshLambertMaterial

mesh를 구성하는 정점에서 광원의 영향을 계산하는 재질

const material = new THREE.MeshLambertMaterial({
  visible: true,
  transparent: true,
  opacity: 0.5,
  side: THREE.DoubleSide,
  color: 0xffffff, // 재질의 색상
  emissive: 0x555500, // 다른 광원의 영향을 받지 않는, 재질 자체에서 방출하는 색상 값. default: black
  wireframe: false,
});

MeshPhongMaterial

mesh가 랜더링되는 픽셀 단위로 광원의 영향을 계산하는 재질

const material = new THREE.MeshPhongMaterial({
  color: 0xffffff, // 재질의 색상
  emissive: 0x000000, // 다른 광원의 영향을 받지 않는, 재질 자체에서 방출하는 색상 값. default: black
  specular: 0xffff00, // 광원에 의해 반사되는 색상. default: light gray
  shininess: 10, // specular가 반사되는 정도
  flatShading: true, // mesh를 편평하게 랜더링할지에 대한 여부
  wireframe: false,
});

물리기반 랜더링(PBR) 재질

3차원 그래픽에서 가장 많이 사용되는 재질.
속도면에서는 이 두 재질이 다른 재질보다 상대적으로 느리지만,
훨씬 고품질의 랜더링 결과를 얻을 수 있다.

MeshStandardMaterial

const material = new THREE.MeshStandardMaterial({
  color: 0xff0000, // 재질의 색상
  emissive: 0x000000, // 다른 광원의 영향을 받지 않는, 재질 자체에서 방출하는 색상 값. default: black
  roughness: 0.25, // 거칠기 0(매끈한 상태) ~ 1(거친 상태)
  metalness: 0.5, // 금속성 0(금속성 없음) ~ 1(완전한 금속성)
  wireframe: false,
});

MeshPhysicalMaterial

MeshStandardMaterial을 상속받고 있는, 보다 발전된 물리기반 랜더링 재질
재질의 표면에 코팅 효과를 줄 수 있고,
다른 재질처럼 단순 투명도 처리가 아닌 실제 유리같은 효과를 표현할 수 있다.

const material = new THREE.MeshStandardMaterial({
  color: 0xff0000,
  emissive: 0x000000,
  roughness: 0.1,
  metalness: 0,
  clearcoat: 0.5, // 코딩효과. 0 ~ 1
  clearcoatRoughness: 0, // 코딩에 대한 거칠기 값. 0 ~ 1
  wireframe: false,
  flatShading: false,
});

MeshDepthMaterial

MeshNormalMaterial

MeshToonMaterial