GIS Developer

SVG 파일은 2차원 벡터 그래픽 데이터인데, 이를 이용해 three.js에서 완전한 3차원 모델로 렌더링하는 코드의 정리입니다. 먼저 사용할 SVG 파일은 다음과 같습니다.

이 SVG 데이터 파일을 3차원 모델, 즉 Mesh로 만들기 위해서는 Geometry가 필요합니다. 이를 위해 three.js는 SVG 데이터를 받아 처리해주는 SVGLoader를 제공해주고 SVGLoader를 통해 데이터를 해석해 입체감있는 Geometry로 만들어주는 ExtrudeGeometry를 제공합니다. 이 둘을 이용한 코드는 다음과 같습니다.

const svg = await new SVGLoader().loadAsync("./flower.svg");
const paths = svg.paths
const geometries = [];

for (let i = 0; i < paths.length; i++) {
  const path = paths[i];

  const shapes = SVGLoader.createShapes(path);
  const shapeGeometry = new THREE.ExtrudeGeometry(shapes, {
    depth: 1,
    steps: 2,
    curveSegments: 16,
    bevelEnabled: true,
    bevelThickness: 0.5,
    bevelSize: .5,
    bevelOffset: -.15,
    bevelSegments: 8,
  });
  geometries.push(shapeGeometry);
}

const geometry = BufferGeometryUtils.mergeGeometries(geometries)
geometry.center();
geometry.rotateZ(Math.PI);
geometry.scale(.15, .15, .15);

이렇게 만들어진 geometry를 시각해 보면 다음과 같습니다.

빙고! 하지만 곧 꽃의 중심에 대한 구멍(hole)이 이상하게 표현되고 있다는 것을 알 수 있습니다. 직관을 통해 재질의 속성(side: THREE.DoubleSide)을 조정해 보면 다음과 같은 결과를 볼 수 있습니다.

아! 꽃 중심의 구멍의 노말벡터가 뒤짚혔다는 것을 알 수 있습니다. SVG는 구멍을 정의하기 위해서 정점의 구성 순서를 시계 방향으로 해야 합니다. 구멍이 아닌 외곽은 반시계 방향으로 구성해야 하구요. 그런데 사용하고 있는 SVG 데이터는 이러한 규칙을 무시하고 있습니다. 정해준 규칙을 따르는 SVG 데이터를 제공받아 사용하면 좋겠지만, 저는 그렇게 하지 않고 코드를 통해 해당 규칙을 따르도록 만들겠습니다.해당 코드가 적용된 것은 같습니다.

const svg = await new SVGLoader().loadAsync("./flower.svg");
const paths = svg.paths
const geometries = [];

for (let i = 0; i < paths.length; i++) {
  const path = paths[i];

  const correctedShapes = [];
  const shapes = SVGLoader.createShapes(path);
  for (let j = 0; j < shapes.length; j++) {
    const shape = shapes[j];

    // 외곽 포인트
    const outerPts = shape.getPoints(64);
    if (THREE.ShapeUtils.isClockWise(outerPts)) outerPts.reverse();
    const newShape = new THREE.Shape(outerPts);

    // 홀 처리
    shape.holes.forEach(hole => {
      const holePts = hole.getPoints(64);
      // 홀은 시계 방향이어야 하므로, 반대인 경우 뒤집음
      if (!THREE.ShapeUtils.isClockWise(holePts)) holePts.reverse();
      newShape.holes.push(new THREE.Path(holePts));
    });

    correctedShapes.push(newShape);
  }

  const shapeGeometry = new THREE.ExtrudeGeometry(correctedShapes, {
    ...
  });
  geometries.push(shapeGeometry);
}

const geometry = BufferGeometryUtils.mergeGeometries(geometries)
...

이제 결과를 보면 다음처럼 SVG에 대한 완전한 지오메트리 구성이 된 것을 확인할 수 있습니다.