TIL-2024.03.06 - 3js - Fonts - 1. 3D 폰트 만들기

------- Fonts 

 

 

목표:

보기에는 2D지만, 일단 3D..

 

 

 

순서:

 

1. font.json 파일을 준비하고, root > assers > fonts 아래 위치

The Jamsil 5 Bold_Regular.json

7.72MB

 

2. Import

import { FontLoader } from "three/addons";
import { TextGeometry } from "three/addons";
import { OrbitControls } from "three/addons";

 

 

 

3. 코드 작성

 /*Font Loader*/
    const fontLoader = new FontLoader(); // 폰트 파일을 비동기적으로 로드하기 위한 FontLoader 인스턴스
    const jamsilFont = await fontLoader.loadAsync("./assets/fonts/The Jamsil 5 Bold_Regular.json");
    // 폰트 파일을 비동기적으로 로드하고, jamsilFont 변수에 할당합니다.

    const textGeometry = new TextGeometry("안녕하세요. ", {
        font: jamsilFont,
        size: 0.5,
        height: 0.1,
    }); 
    // 로드된 폰트를 사용하여 "안녕하세요."라는 텍스트를 만듭니다.
    // size와 height 매개변수는 텍스트의 크기와 높이를 정의

    const textMaterial = new THREE.MeshPhongMaterial({color: 0x00c896}); // 녹색으로 색상이 채워진 새로운 MeshPhongMaterial
    const text = new THREE.Mesh(textGeometry, textMaterial); // 텍스트 지오메트리와 재료를 결합하여 새 Mesh 인스턴스 생성
    scene.add(text);

    // SECTION: LIGHT
    const ambientLight = new THREE.AmbientLight(0xffffff, 1); // 모든 방향에서 동일한 강도로 장면을 조명
    const pointLight = new THREE.PointLight(0xffffff, 1); //  한 점에서 방사형으로 조명하는 조명 유형
    const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.5, 0xffffff); // 포인트 빛의 위치를 시각적으로 나타
    pointLight.position.set(3, 0, 2);
    scene.add(ambientLight);
    scene.add(pointLight, pointLightHelper);