Threejs进阶之十一：使用FontLoader和TextGeometry创建三维文字

import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.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 fontLoader = new FontLoader();
fontLoader.load('fonts/helvetiker_regular.typeface.json', function (font) {
    // 创建文字几何体
    const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
        font: font,
        size: 0.5,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelOffset: 0,
        bevelSegments: 5
    });
 
    // 创建材质
    const textMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
 
    // 创建网格
    const mesh = new THREE.Mesh(textGeometry, textMaterial);
 
    // 添加到场景
    scene.add(mesh);
 
    // 设置摄像机位置并开始渲染循环
    camera.position.z = 5;
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
});

这段代码使用FontLoader加载字体文件，并在加载完成后创建一个TextGeometry对象，该对象包含了我们想要显示的文字。然后，我们创建一个MeshBasicMaterial材质和一个Mesh对象，把TextGeometry加入到Mesh中，并将其添加到场景中。最后，我们设置摄像机位置并启动渲染循环。这个例子展示了如何在Three.js中创建和使用3D文字。