three.js 3d文字

// 引入Three.js库
import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/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 fontLoader = new FontLoader();
fontLoader.load('fonts/helvetiker_regular.typeface.json', function (font) {
    // 创建文本几何体
    const textGeometry = new TextGeometry('Hello, Three.js!', {
        font: font,
        size: 1,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });

    // 创建材质
    const textMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

    // 创建网格并添加到场景
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);
    textMesh.position.set(-2, 0, 0);
    scene.add(textMesh);

    // 设置相机位置
    camera.position.z = 5;

    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
});