Matarialize中文社区-使用 Three.js 创建文字（Creating Text）

使用 Three.js 创建文字（Creating Text）

少陵野老 2024-10-11 22:52:40

39 Creating Text 专栏

在 Three.js 中，创建和渲染文本是一个非常实用的功能，特别是在进行数据可视化、游戏开发或制作信息展示时。本文将详细介绍如何在 Three.js 中创建文字，包括使用字体、设置文本属性以及结合其他组件的使用。

1. 文字的基本概念

Three.js 提供了几种方式来创建和渲染文本，最常用的有以下两种：

使用 THREE.TextGeometry：创建三维文本几何体。
使用 THREE.Sprite 和 THREE.CanvasTexture：创建二维文本纹理，适合用于简单的文本显示。

1.1 TextGeometry 的基本概念

THREE.TextGeometry 允许你根据字体创建可渲染的三维文字，适合于需要深度和立体效果的应用。

1.2 Sprite 和 CanvasTexture 的基本概念

使用 THREE.Sprite 和 THREE.CanvasTexture 创建的文本更适合用作标记或简单的文本显示，因为它们是在 2D 画布上渲染的，通常更轻量。

2. 使用 TextGeometry 创建三维文本

2.1 安装和引入 Three.js

首先，确保在你的 HTML 文件中引入 Three.js：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 创建文字示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/fonts/helvetiker_regular.typeface.json"></script>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>

2.2 创建基础场景

在 <script> 标签中，创建一个基础的 Three.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);

camera.position.z = 5;

2.3 加载字体并创建文本

使用 THREE.FontLoader 加载字体，并创建文本几何体：

const loader = new THREE.FontLoader();
loader.load('https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/fonts/helvetiker_regular.typeface.json', function (font) {
    const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
        font: font,
        size: 1,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.05,
        bevelSize: 0.05,
        bevelOffset: 0,
        bevelSegments: 5
    });

    const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);
    scene.add(textMesh);
});

2.4 渲染场景

在动画循环中渲染场景：

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

animate();

2.5 处理窗口大小变化

确保在窗口大小变化时调整摄像机和渲染器的大小：

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

2.6 完整示例代码

将所有代码整合，得到完整的 HTML 文件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 创建文字示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/fonts/helvetiker_regular.typeface.json"></script>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script>
        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);
        camera.position.z = 5;

        const loader = new THREE.FontLoader();
        loader.load('https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/fonts/helvetiker_regular.typeface.json', function (font) {
            const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
                font: font,
                size: 1,
                height: 0.2,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 0.05,
                bevelSize: 0.05,
                bevelOffset: 0,
                bevelSegments: 5
            });

            const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
            const textMesh = new THREE.Mesh(textGeometry, textMaterial);
            scene.add(textMesh);
        });

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

        animate();

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

3. 使用 Sprite 和 CanvasTexture 创建二维文本

3.1 创建文本纹理

另一种方法是使用 THREE.Sprite 和 THREE.CanvasTexture 创建文本。以下是如何实现的步骤：

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 256;
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = '40px Arial';
context.fillStyle = 'black';
context.fillText('Hello Sprite!', 50, 100);

const texture = new THREE.CanvasTexture(canvas);
const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(2, 1, 1); // 设置缩放
scene.add(sprite);

3.2 整合到完整示例中

在原有代码的基础上，添加 Sprite 的部分：

// 在加载字体和创建 TextGeometry 后面添加

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 256;
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = '40px Arial';
context.fillStyle = 'black';
context.fillText('Hello Sprite!', 50, 100);

const texture = new THREE.CanvasTexture(canvas);
const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(2, 1, 1); // 设置缩放
scene.add(sprite);

3.3 完整示例代码

以下是包含 Sprite 的完整示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 创建文字示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/fonts/helvetiker_regular.typeface.json"></script>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script>
        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);
        camera.position.z = 5;

        const loader = new THREE.FontLoader();
        loader.load('https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/fonts/helvetiker_regular.typeface.json', function (font) {
            const textGeometry = new THREE.TextGeometry('Hello Three.js!', {


                font: font,
                size: 1,
                height: 0.2,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 0.05,
                bevelSize: 0.05,
                bevelOffset: 0,
                bevelSegments: 5
            });

            const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
            const textMesh = new THREE.Mesh(textGeometry, textMaterial);
            scene.add(textMesh);
        });

        // 创建 Sprite 文本
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = 512;
        canvas.height = 256;
        context.fillStyle = 'rgba(255, 255, 255, 1)';
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.font = '40px Arial';
        context.fillStyle = 'black';
        context.fillText('Hello Sprite!', 50, 100);

        const texture = new THREE.CanvasTexture(canvas);
        const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
        const sprite = new THREE.Sprite(spriteMaterial);
        sprite.scale.set(2, 1, 1); // 设置缩放
        scene.add(sprite);

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

        animate();

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

4. 文字的其他属性和方法

在创建文本时，除了基本的属性外，THREE.TextGeometry 还提供了一些其他选项：

size：文本的大小。
height：文本的厚度，影响三维效果。
bevelEnabled：是否启用斜角效果。
bevelThickness：斜角的厚度。
bevelSize：斜角的大小。
curveSegments：曲线细分，影响曲线的平滑度。

5. 结论

在本文中，我们深入探讨了如何在 Three.js 中创建和渲染文本，包括使用 THREE.TextGeometry 创建三维文本和使用 THREE.Sprite 结合 THREE.CanvasTexture 创建二维文本。通过这些示例，你可以在自己的项目中实现丰富的文本展示效果。希望本博客对你学习 Three.js 有所帮助！如果有任何问题或建议，欢迎在评论区留言讨论！

评论区