Three.js の 3D 空間内に文字列を表示する方法

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

// フォントローダー
const fontLoader = new FontLoader();

// フォントを読み込む
const font = await fontLoader.loadAsync(`/fonts/droid_sans_mono_regular.typeface.json`);

// テキストメッシュ
const textMesh = new THREE.Mesh(
  new TextGeometry(`TextGeometry Scene`, {
    font: font, // フォントを指定 (FontLoaderで読み込んだjson形式のフォント)
    size: 10,   // 文字のサイズを指定
    height: 1,  // 文字の厚さを指定
  }),
  new THREE.MeshBasicMaterial({
    color: `#ccc`, // 文字の色
  })
);
textMesh.position.set(-0.75, 0, 0);   // Meshの位置を設定
textMesh.scale.set(0.01, 0.01, 0.01); // Meshの拡大縮小設定

// シーンを初期化
const scene = new THREE.Scene();
scene.add(textMesh); // Meshをシーンに追加