Three.js - Geometry 2

라인 네모

_setModel(){
  const shape = new THREE.Shape(); // 모양 만들래
  shape.moveTo(1, 1);
  shape.lineTo(1, -1);
  shape.lineTo(-1, -1);
  shape.lineTo(-1, 1);
  shape.closePath();				// path 닫을래
  
  const geometry = new THREE.BufferGeometry();	// 나 뭐 그릴거야
  const points = shape.getPoints();		// shape에서 점 가져와
  geometry.setFromPoints(points);		// 형태를 점으로 그려
  
  const material = new THREE.LineBasicMaterial({color: 0xffff00});	// 스타일
  const line = new THREE.Line(geometry, material);	// 형태랑 스타일을 가지고 오브젝트를 만들어
  
  this._scene.add(line);		// 장면에 그린거 넣어
}

라인 sin 그래프

_setupModel() {
    class CustomSinCurve extends THREE.Curve {
      constructor(scale) {
        super();
        this.scale = scale;
      }
      getPoint(t) {
        const tx = t * 3 - 1.5;
        const ty = Math.sin(2 * Math.PI * t);
        const tz = 0;
        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
      }
    }
    const path = new CustomSinCurve(4);
    const geometry = new THREE.BufferGeometry(); // geometry 생성
    const points = path.getPoints(100);
    geometry.setFromPoints(points);

    const material = new THREE.LineBasicMaterial({ color: 0xffff00 });
    const line = new THREE.Line(geometry, material);

    this._scene.add(line);
  }

TubeGeometry

_setupModel() {
    class CustomSinCurve extends THREE.Curve {
      constructor(scale) {
        super();
        this.scale = scale;
      }
      getPoint(t) {
        const tx = t * 3 - 1.5;
        const ty = Math.sin(2 * Math.PI * t);
        const tz = 0;
        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
      }
    }
    const path = new CustomSinCurve(4);
    const geometry = new THREE.TubeGeometry(path, 60); // geometry 생성
    // 인자2 : 튜브의 진행 방향에 대한 분할 수. default : 64
    // 인자3 : 튜브의 원통 반지름 길이. default : 1
    // 인자4 : 원통 원 둘레에 대한 분할 수. default : 8
    // 인자5 : 원통 끝 열려있는지 여부. default: false

    const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x515151 });
    const cube = new THREE.Mesh(geometry, fillMaterial);

    const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 });
    const line = new THREE.LineSegments(
      new THREE.WireframeGeometry(geometry, lineMaterial)
    );

    const group = new THREE.Group();
    group.add(cube);
    group.add(line);

    this._scene.add(group);
    this._cube = group;
  }

LatheGeometry - 라인을 그려 회전시켜 면을 생성

_setupModel() {
    const points = [];
    for (let i = 0; i < 10; ++i) {
      points.push(new THREE.Vector2(Math.sin(i * 0.2) * 3 + 3, (i - 5) * 0.8));
    }

    const geometry = new THREE.LatheGeometry(points, 4);

    const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x515151 });
    const cube = new THREE.Mesh(geometry, fillMaterial);

    const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 });
    const line = new THREE.LineSegments(
      new THREE.WireframeGeometry(geometry, lineMaterial)
    );

    const group = new THREE.Group();
    group.add(cube);
    group.add(line);

    this._scene.add(group);
    this._cube = group;
  }

const geometry = new THREE.LatheGeometry(points, 4);

인자1: 회전시킬 대상에 대한 좌표 배열
인자2: 분할 수
인자3: 시작각. default: 1
인자4: 연장각. default: 2pi

ExtrudeGeometry - 평면 shape에 깊이값을 부여해주고 mesh의 윗 면과 밑 면을 비스듬하게 처리

_setupModel() {
    const x = -2.5,
      y = -5;
    const shape = new THREE.Shape();
    shape.moveTo(x + 2.5, y + 2.5);
    shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
    shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
    shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);
    shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
    shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
    shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);

    const settings = {
      steps: 2, // 깊이 방향으로의 분할 수. default: 1
      depth: 1, // 깊이. default: 100
      bevelEnabled: true, // 베벨링처리 할 것인지. default: true
      bevelThickness: 4, // 베벨링 두께 값. default: 6
      bevelSize: 4, // shape의 외곽선으로부터 얼마나 멀리 베벨링할 것인지의 거리. default: 2
      bevelSegments: 6, // 베벨링 단계 수. default: 3
    };
    const geometry = new THREE.ExtrudeGeometry(shape, settings);

    const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x515151 });
    const cube = new THREE.Mesh(geometry, fillMaterial);

    const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 });
    const line = new THREE.LineSegments(
      new THREE.WireframeGeometry(geometry, lineMaterial)
    );

    const group = new THREE.Group();
    group.add(cube);
    group.add(line);

    this._scene.add(group);
    this._cube = group;
  }

const geometry = new THREE.ExtrudeGeometry(shape, settings);

TextGeometry - ExtrudeGeometry의 파생 클래스

TTF 등의 폰트 파일을 three.js에서 폰트로 사용할 수 있는 json형식의 포멧으로 변경해 사용

import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";

...

 _setupModel() {
    const fontLoader = new FontLoader(); // 폰트를 로드하기 위해 필요
    // 폰트 데이터를 비동기적으로 불러오는 함수 추가
    async function loadFont(that) {
      const url = "/fonts/D2Coding_Regular.json";
      const font = await new Promise((resolve, reject) => {
        fontLoader.load(url, resolve, undefined, reject);
      });
      const geometry = new TextGeometry("Hello Three.js", {
        font: font, // FontLoader를 통해 가져온 font 객체
        size: 5, // 텍스트 mesh의 크기. default: 100
        height: 1.5, // 깊이값. default: 50
        curveSegments: 4, // 하나의 커브를 구성하는 정점의 개수. default: 12
        bevelEnabled: true,
        bevelThickness: 0.7,
        bevelSize: 0.7,
        bevelSegments: 2,
      });

      const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x515151 });
      const cube = new THREE.Mesh(geometry, fillMaterial);

      const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 });
      const line = new THREE.LineSegments(
        new THREE.WireframeGeometry(geometry, lineMaterial)
      );

      const group = new THREE.Group();
      group.add(cube);
      group.add(line);

      that._scene.add(group);
      that._cube = group;
    }
    loadFont(this);
  }