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

2024/10/25 18:23:18 来源：https://blog.csdn.net/weixin_43929450/article/details/142912416 浏览: 次关键词：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 / 2mesh.position.set(x, y, z);scene.add(mesh);// 使文字一直面向摄像机function animate() {requestAnimationFrame(animate);// 锁定文字的朝向到摄像机mesh.lookAt(camera.position);}animate();render();});}