[three.js]material, geometry

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({
    color: "hotpink",
    wireframe: true,
    side: THREE.DoubleSide,
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

mesh는 3D 공간에서의 객체로 점, 선, 면, 텍스처 등의 속성을 가집니다.

mesh는 geometry와 material을 함께 사용하여 객체를 생성하고 화면에 표시합니다. mesh 객체를 생성할 때 geometry와 material을 전달하고, 필요에 따라 다른 속성들을 설정할 수 있습니다. 예를 들어, mesh의 위치, 회전, 크기 등을 조정할 수 있으며, 텍스처 매핑을 사용하여 객체에 이미지나 패턴을 입힐 수도 있습니다.

🔎 Geometry

mesh는 geometry와 material을 결합하여 만들어집니다. geometry는 실제 객체의 형태를 정의하는 점, 선, 면 등의 기하학적 데이터를 포함합니다. 예를 들어, geometry는 정육면체, 구, 원기둥 등과 같은 3D 모양을 정의할 수 있습니다. 또한 geometry는 객체의 정점(vertex)과 면(face) 등의 구성 요소를 가지고 있습니다.

✏️ vertex값을 이용한 애니메이션 효과

const positionArray = geometry.attributes.position.array;
  console.log(positionArray);
//[-5, 5, 0, -4.6875, 5, 0, -4.375, 5, 0, -4.0625, 5, 0, -3.75, 5, 0, -3.4375, 5, 0, -3.125, 5, 0, -2.8125, 5, 0, -2.5, 5, 0, -2.1875, 5, 0, -1.875, 5, 0, -1.5625, 5, 0, -1.25, 5, 0, -0.9375, 5, 0, -0.625, 5, 0, -0.3125, 5, 0, 0, 5, 0, 0.3125, 5, 0, 0.625, 5, 0, 0.9375, 5, 0, 1.25, 5, 0, 1.5625, 5, 0, 1.875, 5, 0, 2.1875, 5, 0, 2.5, 5, 0, 2.8125, 5, 0, 3.125, 5, 0, 3.4375, 5, 0, 3.75, 5, 0, 4.0625, 5, 0, 4.375, 5, 0, 4.6875, 5, 0, 5, 5, 0, -5, …]

geometry vertex의 x,y,z 좌표는 geometry.attributes.position.array을 통해 확인할 수 있습니다. 이 배열은 vertex의 x,y,z값의 연속으로 이 값을 조절하여 다양한 효과를 줄 수 있습니다.

for (let i = 0; i < positionArray.length; i += 3) {
    positionArray[i] += (Math.random() - 0.5) * 0.2;
    positionArray[i + 1] += (Math.random() - 0.5) * 0.2;
    positionArray[i + 2] += (Math.random() - 0.5) * 0.2;
  }

예를 들어 위와 같이 vertex의 x,y,z값을 랜덤한 숫자를 넣을 경우

평평했던 PlaneGeometry가 위와 같이 표면이 울퉁불퉁한 입체적인 모양으로 변합니다.

🔎 Material

material은 객체의 외관을 정의하는 데 사용됩니다. material은 객체 표면의 색상과 질감을 어떻게 나타내는지를 결정합니다. 예를 들어, material은 물체의 색상, 반사율, 투명도 등을 정의할 수 있습니다.

📍MeshBasicMaterial

입체감이 없고 그림자와 빛의 영향을 받지 않아 조명이 필요없는 재질로 material 중 성능이 가장 좋습니다.

📍MeshLambertMaterial

mesh를 구성하는 정점에서 광원의 영향을 계산하는 재질로 반사광이 없는 무광 재질입니다.

📍MeshPhongMaterial

mesh가 랜더링되는 픽셀 단위로 광원의 영향을 계산하는 재질로 반사광 표현이 가능한 유광 재질입니다. shininess를 통해 반사광을 조절할 수 있습니다.

const material2 = new THREE.MeshPhongMaterial({
    color: "orange",
    //반사광 정도 조절
    shininess: 1000,
  	flatShading: true,
  });

📍MeshStandardMaterial

const material3 = new THREE.MeshStandardMaterial({
    color: "orange",
    roughness: 0.25, // 거칠기 0(매끈한 상태) ~ 1(거친 상태)
  metalness: 0.5, // 금속성 0(금속성 없음) ~ 1(완전한 금속성)
  side: THREE.DoubleSide,
  });

roughness, metalness 속성을 통해 거친 정도와 금속성에 대한 설정을 할 수 있습니다. 또한 side 속성을 통해 겉면만 보이게THREE.FrontSide, 안쪽면만 보이게 THREE.BackSide, 양면 모두 보이게 THREE.DoubleSide 설정할 수 있습니다.

📍외부 이미지로 텍스처 설정

https://3dtextures.me/ 와 같은 사이트에서 3D texture를 다운받아 material을 설정할 수 있습니다.

const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load(
    "/textures/brick/Old_Graffiti_Wall_001_COLOR.jpg",
    () => {
      console.log("로드 완료");
    },
    () => {
      console.log("로드 중");
    },
    () => {
      console.log("로드 에러");
    }
  );

const geometry = new THREE.BoxGeometry(2, 2, 2);
  const material = new THREE.MeshStandardMaterial({
    // color: "red",
    map: texture,
  });

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

TextureLoader를 통해 이미지를 로드해 material의 map에 해당 texture를 적용하면 됩니다. 해당 이미지들은 기본적으로 material의 속성을 따릅니다.