Threejs引入字体，实现3D文字，Canvas画布作为纹理贴图实现滚动字幕

原创已于 2022-07-13 10:43:05 修改 · 4.8k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#three.js

于 2022-05-16 11:00:04 首次发布

threejs 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了如何使用Three.js r95版本创建3D文字和滚动字幕。通过FontLoader加载JSON字体文件，展示3D文本效果，并利用Canvas作为纹理贴图实现LED屏幕滚动显示文字。示例代码详细展示了实现过程，包括文字几何体的创建和Canvas纹理的应用。

1，介绍

该示例使用的是 r95版本Three.js库。

主要实现功能：Threejs引入字体，实现3D文字，Canvas画布作为纹理贴图实现滚动字幕。效果图如下：

2，主要说明

1，使用FontLoader加载字体，显示3D文字

2，使用Canvas作为纹理贴图，实现滚动字幕

Three.js提供了几种可以在场景中使用的字体。这些字体基于由TypeFace.js库提供的字体。TypeFace.js库可以将TrueType和OpenType字体转换为JavaScript文件或者JSON文件，以便在网页中的JavaScript程序中直接使用。在旧版本的Three.js使用字体时，需要用转换得到的JavaScript文件，而新版Three.js改为使用JSON文件了。

转换得到JSON文件后，你可以使用THREE.FontLoader加载字体，，并将字体对象赋给THREE.TextGeometry的font属性。

使用Facetype.js生成json字体入口

用于Threejs的谷歌字体库地址入口

function add3DFont() {
	new THREE.FontLoader().load('font/FZYaoTi_Regular.json', function(font) {
		//加入立体文字
		var text = new THREE.TextGeometry("左本的博客，Three.js3D文字", {
			// 设定文字字体
			font: font,
			//尺寸
			size: 24,
			//厚度
			height: 5
		});
		text.computeBoundingBox();
		// 设置偏移
		text.translate(-220, 0, 0);
		//3D文字材质
		var m = new THREE.MeshStandardMaterial({
			color: "#FF0000"
		});
		fontMesh = new THREE.Mesh(text, m)
		fontMesh.position.y = 100;
		scene.add(fontMesh);
	});
}

创建Canvas设置字体填充文字，作为纹理CanvasTexture引入到材质MeshPhongMaterial中。

// 创建LED电子屏幕
function addLEDScreen() {
	var canvas = document.createElement("canvas");
	canvas.width = 512;
	canvas.height = 64;
	var c = canvas.getContext('2d');
	c.fillStyle = "#aaaaff";
	c.fillRect(0, 0, 512, 64);
	// 文字
	c.beginPath();
	c.translate(256, 32);
	c.fillStyle = "#FF0000"; //文本填充颜色
	c.font = "bold 28px 宋体"; //字体样式设置
	c.textBaseline = "middle"; //文本与fillText定义的纵坐标
	c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
	c.fillText("左本的博客，Three.js3D文字", 0, 0);

	var cubeGeometry = new THREE.BoxGeometry(512, 64, 5);
	canvasTexture = new THREE.CanvasTexture(canvas);
	canvasTexture.wrapS = THREE.RepeatWrapping;
	var material = new THREE.MeshPhongMaterial({
		map: canvasTexture, // 设置纹理贴图
	});
	var cube = new THREE.Mesh(cubeGeometry, material);
	cube.rotation.y += Math.PI; //-逆时针旋转,+顺时针
	scene.add(cube);
}

在线预览：左本的博客 (zuoben.top)