Bài 5. Tạo văn bản trong Three.js

Đôi khi, bạn có thể cần sử dụng văn bản trong ứng dụng Three.js của mình - đây là một số cách mà bạn có thể làm như vậy.

1. DOM + CSS

Sử dụng HTML nói chung là cách dễ nhất và nhanh nhất để thêm văn bản. Đây là phương pháp được sử dụng cho lớp phủ mô tả trong hầu hết các ví dụ của Three.js.

Bạn có thể thêm nội dung vào

<div id="info">Description</div>

và sử dụng đánh dấu CSS để định vị tuyệt đối ở vị trí cao hơn tất cả các vị trí khác với chỉ mục z, đặc biệt nếu bạn đang chạy toàn màn hình three.js.

#info {
	position: absolute;
	top: 10px;
	width: 100%;
	text-align: center;
	z-index: 100;
	display:block;
}

2. Vẽ văn bản vào canvas và sử dụng Texture

Texture
Sử dụng phương pháp này nếu bạn muốn dễ dàng vẽ văn bản trên mặt phẳng trong cảnh three.js của mình.

3. Tạo một mô hình trong ứng dụng thiết kế 3D của bạn (ví dụ blender) và xuất sang three.js

4. Dùng Text Geometry

Nếu bạn thích làm việc hoàn toàn trong THREE.js hoặc để tạo các hình học văn bản 3D động và thủ tục, bạn có thể tạo một lưới có hình học là một phiên bản của THREE.TextGeometry:

new THREE.TextGeometry( text, parameters );
Tuy nhiên, để điều này hoạt động, TextGeometry của bạn sẽ cần một phiên bản của THREE.Font được đặt trên tham số “font” của nó. Xem trang TextGeometry để biết thêm thông tin về cách thực hiện điều này, mô tả của từng tham số được chấp nhận và danh sách các phông chữ JSON đi kèm với bản phân phối THREE.js.

FontLoader

Lớp để tải một phông chữ ở định dạng JSON. Trả về một phông chữ, là một mảng Hình dạng đại diện cho phông chữ. Điều này sử dụng FileLoader nội bộ để tải tệp.

const loader = new FontLoader();
const font = loader.load(
	// resource URL
	'fonts/helvetiker_bold.typeface.json',

	// onLoad callback
	function ( font ) {
		// do something with the font
		console.log( font );
	},

	// onProgress callback
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError callback
	function ( err ) {
		console.log( 'An error happened' );
	}
);

TextGeometry

Một lớp để tạo văn bản dưới dạng một hình học duy nhất. Nó được xây dựng bằng cách cung cấp một chuỗi văn bản và một tập hợp các tham số bao gồm một phông chữ được tải và các cài đặt cho ExtrudeGeometry . Xem trang FontLoader để biết thêm chi tiết.
Ví dụ về TextGeometry

const loader = new FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

	const geometry = new TextGeometry( 'Hello three.js!', {
		font: font,
		size: 80,
		height: 5,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelOffset: 0,
		bevelSegments: 5
	} );
} );

https://threejs.org/examples/#webgl_geometry_text