threejs实现模型导入，且在模型指定位置添加数字

之前写的文章，实现了flutter和three之间的通讯，今天这篇文章，将会更加细致的来讲解three的一些方法，并实现在模型指定位置添加数字/文字。

前言

什么是threejs，Three.js 是一个用于创建 3D 图形和动画的 JavaScript 库，它基于 WebGL 技术，允许开发者在网页中渲染复杂的 3D 场景和效果，而不需要深入了解底层的 WebGL 代码。Three.js 简化了 3D 渲染的流程，使得即使没有专业的图形编程经验，也可以在网页中创建丰富的 3D 内容。
图片效果：

一、导入模型

这里你可以导入不同类型的模型，可以是obj,可以是stl，也可以是别的模型类别。

二、给模型指定位置添加文字

//  添加文字
		function addWord() {
			// ---------------------------------------------------------------------
			// 添加文字模型
			// ---------------------------------------------------------------------
			let texts1 = [
				{
					x: -1.6626462025963695,
					y: -0.49404344305720693,
					z: 0.05308300020173229,
					text: 10
				},
				{
					x: -0.9864818451781294,
					y: 0.5702905493357392,
					z: 0.32163065100489648,
					text: 8
				}
				// {
				// 	x: -2.444533617698571,
				// 	y: -0.7710072993738915,
				// 	z: 0.25008149921894128,
				// 	text: 8
				// }
			]
			texts1.forEach((value, index) => {
				addTextGeometry(value.text, value.x, value.y, value.z);
			})
		}
		function addTextGeometry(text, x, y, z) {
			var loader = new FontLoader();
			loader.load("./files/chinses.json", function (res) {
				var geometry = new TextGeometry(`${text}`, {
					font: res,          // 字体格式
					size: 0.1,           // 字体大小
					depth: 0,          // 字体深度
					// curveSegments: 11,  // 曲线控制点数
					bevelEnabled: false, // 斜角
					bevelThickness: 0.0,  // 斜角的深度
					bevelSize: 1,       // 斜角的大小
					bevelSegments: 1    // 斜角段数
				});
				var mat = new THREE.MeshPhongMaterial({
					color: text >= 10 ? "red" : 'green',
					opacity: 0.8,
					shininess: 1,
				});
				var mesh = new THREE.Mesh(geometry, mat);
				// mesh.rotation.y = -Math.PI / 2
				mesh.position.set(x, y, z);
				scene.add(mesh);
				// 使文字一直面向摄像机
				function animate() {
					requestAnimationFrame(animate);
					// 锁定文字的朝向到摄像机
					mesh.lookAt(camera.position);
				}
				animate();
				render();
			});

		}

因为文字是在模型指定位置显示，所以当模型旋转的时候，需要保证文字一直可以看到，即可以锁定文字，让文字朝向摄像机。

总结

如需项目demo，微信扫下面的二维码，注册成功，到下面的我的-联系客服 问我要代码