Three.jsでテキストを配置する

Three.jsでテキストを配置する方法をメモ。
今回はViteを使った開発環境での使用例になります。

設定方法

まずは使用するフォントを用意します。
今回はGoogle FontsのKanitをダウンロードしました。

ダウンロードしたフォントの拡張子はttfですが、Three.jsでロードする際はjson形式である必要があるようです。
公式のドキュメント内で紹介されているfacetype.jsで変換を行います。

publicディレクトリ内にfontフォルダを作成して、上記で変換を行ったファイルを格納します。
これでテキストを配置する準備ができたので、実際に試してみます。

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);
// カメラの位置変更と更新
camera.position.set(0, 0, 100);
controls.update();

// フォントの読み込み
const loader = new FontLoader();
loader.load("font/Kanit_Regular.json", (font) => {
  console.log(font);
  // オブジェクトの作成
  const geometry = new TextGeometry("Sample Text", {
    font: font,
    size: 10,
    depth: 5
  });
  const material = new THREE.MeshBasicMaterial({
    color: "orange"
  })
  const object = new THREE.Mesh(geometry, material);
  scene.add(object);
});

function animate() {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

TextGeometryとFontLoaderはアドオンのため、別途インポートが必要になります。
これでThree.jsでテキストを配置することができました。
テキストを配置するデモページ

最後にテキストをセンタリングに調整します。

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);
// カメラの位置変更と更新
camera.position.set(0, 0, 100);
controls.update();

// フォントの読み込み
const loader = new FontLoader();
loader.load("font/Kanit_Regular.json", (font) => {
  console.log(font);
  // オブジェクトの作成
  const geometry = new TextGeometry("Sample Text", {
    font: font,
    size: 10,
    depth: 5
  });
  geometry.center();
  const material = new THREE.MeshBasicMaterial({
    color: "orange"
  })
  const object = new THREE.Mesh(geometry, material);
  scene.add(object);
});

function animate() {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

テキストを配置するデモページ2