three-bitmap-text

Дополнение Three Bitmap Text добавляет поддержку открисовки BMFont шрифтов.

Пример использования:

// Copyright (c) 2012-2022 FuryLion Group. All Rights Reserved.

import loadFont from 'load-bmfont';
import font from './assets/sans-serif.fnt';
import fontTexture from './assets/sans-serif.png';
import {TextGeometry} from '../src/TextGeometry';
import {TextAlign} from '../src/TextAlign';
import {TextAnchor} from '../src/TextAnchor';

export class SimpleExample {
	constructor(scene) {
		this._scene = scene;

		this.load();
		this.loadFont();
	}

	async load() {
		const texture = await this.loadTexture();
		const font = await this.loadFont();

		this.createText(font, texture);
	}

	/**
	 * Загружает и возвращает текстуру шрифта.
	 * @return {Promise<THREE.Texture>} - объект текстуры
	 */
	async loadTexture() {
		return await new Promise(resolve =>
			new THREE.TextureLoader().load(fontTexture,
				(result) => resolve(result)));
	}

	/**
	 * Загружает и возвращает шрифт BMFont.
	 * @return {Promise<object>} - объект шрифта
	 */
	async loadFont() {
		return await new Promise(resolve =>
			loadFont(font, (error, font) => resolve(font)));
	}

	createText(font, texture) {
		// Создание геометрии текста
		const textGeometry = new TextGeometry({
			width: 740,
			align: TextAlign.Center,
			anchor: TextAnchor.Center,
			font: font,
			text: 'Hello World',
			flipY: true,
		});

		// Материал текста с текстурой BMFont
		const material = new THREE.MeshBasicMaterial({
			color: '#ff0000',
			transparent: true,
			map: texture,
			side: THREE.DoubleSide,
		});

		// Создание меша текста из геометрии с указанным материалом.
		const textMesh = new THREE.Mesh(textGeometry, material);
		textMesh.scale.set(0.01, 0.01, 0.01);
		textMesh.name = 'Text';

		// Добавление текста на сцену
		this._scene.add(textMesh);

		this.printExample(textGeometry);
	}

	/**
	 * Функция демонстрирует печать текста и обновление геометрии.
	 * @param textGeometry - геометрия текста
	 * @return {Promise<void>}
	 */
	async printExample(textGeometry) {
		await new Promise(resolve => setTimeout(resolve, 1500));

		const string = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';

		for (let i = 0; i < string.length; i++) {
			textGeometry.update(string.substring(0, i));
			await new Promise(resolve => setTimeout(resolve, 25));
		}
	}
}