threejs模型添加文字的方式有哪些

Three.js模型添加文字的方式有哪些

Three.js 是一個強大的 JavaScript 庫，用于在網頁上創建和顯示 3D 圖形。在 Three.js 中，為模型添加文字是一個常見的需求，無論是為了標注、說明還是增強用戶體驗。本文將詳細介紹在 Three.js 中為模型添加文字的多種方式，包括使用 TextGeometry、CSS2DRenderer、CSS3DRenderer、Sprite 以及自定義紋理等方法。

1. 使用 TextGeometry 創建 3D 文字

TextGeometry 是 Three.js 提供的一個幾何體類，用于生成 3D 文字。它基于字體文件（通常是 .json 格式）來生成文字的幾何形狀，然后可以將其作為網格添加到場景中。

1.1 準備工作

首先，你需要一個字體文件。Three.js 提供了一些默認的字體文件，可以在 examples/fonts 目錄下找到。你也可以使用在線工具（如 Facetype.js）將 .ttf 或 .otf 字體文件轉換為 .json 格式。

1.2 創建 3D 文字

// 引入 Three.js
import * as THREE from 'three';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
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 TextGeometry('Hello Three.js', {
        font: font,
        size: 5,
        height: 1,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.5,
        bevelSize: 0.3,
        bevelOffset: 0,
        bevelSegments: 5
    });

    // 創建材質
    const textMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });

    // 創建網格
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);

    // 設置文字位置
    textMesh.position.set(-20, 0, -50);

    // 添加到場景
    scene.add(textMesh);
});

// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1).normalize();
scene.add(light);

// 設置相機位置
camera.position.z = 50;

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

1.3 優缺點

• 優點：生成的文字是 3D 的，可以與其他 3D 模型進行交互。
• 缺點：需要加載字體文件，生成的文字幾何體可能會比較復雜，影響性能。

2. 使用 CSS2DRenderer 添加 2D 文字

CSS2DRenderer 是 Three.js 提供的一個渲染器，用于將 HTML 元素（如 div）作為 2D 標簽添加到 3D 場景中。這種方式適合需要與 3D 模型交互的 2D 文字。

2.1 創建 2D 文字

// 引入 Three.js
import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.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);

// 創建 CSS2DRenderer
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement);

// 創建 3D 模型
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 創建 2D 文字標簽
const labelDiv = document.createElement('div');
labelDiv.className = 'label';
labelDiv.textContent = 'Cube';
labelDiv.style.color = 'white';
labelDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
labelDiv.style.padding = '5px';
labelDiv.style.borderRadius = '5px';

const label = new CSS2DObject(labelDiv);
label.position.set(0, 1.5, 0); // 設置標簽位置
cube.add(label);

// 設置相機位置
camera.position.z = 5;

// 渲染循環
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}
animate();

2.2 優缺點

• 優點：文字是 2D 的，性能較好，適合需要與 3D 模型交互的場景。
• 缺點：文字是 2D 的，無法實現 3D 效果。

3. 使用 CSS3DRenderer 添加 3D 文字

CSS3DRenderer 是 Three.js 提供的另一個渲染器，用于將 HTML 元素作為 3D 對象添加到場景中。與 CSS2DRenderer 不同，CSS3DRenderer 可以將 HTML 元素放置在 3D 空間中，并應用 3D 變換。

3.1 創建 3D 文字

// 引入 Three.js
import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.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);

// 創建 CSS3DRenderer
const labelRenderer = new CSS3DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement);

// 創建 3D 模型
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 創建 3D 文字標簽
const labelDiv = document.createElement('div');
labelDiv.className = 'label';
labelDiv.textContent = 'Cube';
labelDiv.style.color = 'white';
labelDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
labelDiv.style.padding = '5px';
labelDiv.style.borderRadius = '5px';

const label = new CSS3DObject(labelDiv);
label.position.set(0, 1.5, 0); // 設置標簽位置
cube.add(label);

// 設置相機位置
camera.position.z = 5;

// 渲染循環
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}
animate();

3.2 優缺點

• 優點：文字可以放置在 3D 空間中，適合需要 3D 效果的場景。
• 缺點：性能可能不如 CSS2DRenderer，且需要處理 HTML 元素的 3D 變換。

4. 使用 Sprite 添加 2D 文字

Sprite 是 Three.js 提供的一個 2D 對象，可以用于顯示圖片或文字。通過將文字渲染到 Canvas 上，然后將 Canvas 作為紋理應用到 Sprite 上，可以實現 2D 文字的顯示。

4.1 創建 2D 文字

// 引入 Three.js
import * as THREE from 'three';

// 創建場景、相機和渲染器
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);

// 創建 Canvas 并繪制文字
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 256;
canvas.height = 128;
context.fillStyle = 'rgba(0, 0, 0, 0.5)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = '48px Arial';
context.fillStyle = 'white';
context.textAlign = 'center';
context.fillText('Hello Three.js', canvas.width / 2, canvas.height / 2);

// 創建紋理
const texture = new THREE.CanvasTexture(canvas);

// 創建 Sprite
const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(5, 2.5, 1); // 設置 Sprite 大小
scene.add(sprite);

// 設置相機位置
camera.position.z = 5;

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

4.2 優缺點

• 優點：文字是 2D 的，性能較好，適合需要顯示簡單文字的場景。
• 缺點：文字是 2D 的，無法實現 3D 效果。

5. 使用自定義紋理添加文字

除了使用 Sprite，你還可以將文字渲染到紋理上，然后將紋理應用到 3D 模型的表面。這種方式適合需要在模型表面顯示文字的場景。

5.1 創建自定義紋理

// 引入 Three.js
import * as THREE from 'three';

// 創建場景、相機和渲染器
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);

// 創建 Canvas 并繪制文字
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 256;
canvas.height = 128;
context.fillStyle = 'rgba(0, 0, 0, 0.5)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = '48px Arial';
context.fillStyle = 'white';
context.textAlign = 'center';
context.fillText('Hello Three.js', canvas.width / 2, canvas.height / 2);

// 創建紋理
const texture = new THREE.CanvasTexture(canvas);

// 創建 3D 模型
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 設置相機位置
camera.position.z = 5;

// 渲染循環
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

5.2 優缺點

• 優點：文字可以顯示在模型表面，適合需要在模型上顯示文字的場景。
• 缺點：文字是 2D 的，無法實現 3D 效果。

6. 總結

在 Three.js 中，為模型添加文字有多種方式，每種方式都有其優缺點。選擇哪種方式取決于你的具體需求：

• 如果你需要 3D 文字，可以使用 TextGeometry。
• 如果你需要與 3D 模型交互的 2D 文字，可以使用 CSS2DRenderer。
• 如果你需要將 HTML 元素放置在 3D 空間中，可以使用 CSS3DRenderer。
• 如果你需要簡單的 2D 文字，可以使用 Sprite 或自定義紋理。

希望本文能幫助你更好地理解在 Three.js 中為模型添加文字的各種方式，并為你的項目提供參考。