学习threejs，使用TextGeometry文本几何体

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.TextGeometry
- - 1.1.1 ☘️代码示例
  - 1.1.2 ☘️构造函数
  - 1.1.4 ☘️方法
二、🍀使用TextGeometry文本几何体
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用TextGeometry文本几何体，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.TextGeometry

THREE.TextGeometry一个用于将文本生成为单一的几何体的类。它是由一串给定的文本，以及由加载的font（字体）和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的。

1.1.1 ☘️代码示例

代码示例

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,bevelSegments: 5} );
} );

1.1.2 ☘️构造函数

TextGeometry(text : String, parameters : Object)
text — 将要显示的文本。
parameters — 包含有下列参数的对象：

font — THREE.Font的实例。
size — Float。字体大小，默认值为100。
height — Float。挤出文本的厚度。默认值为50。
curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
bevelEnabled — Boolean。是否开启斜角，默认为false。
bevelThickness — Float。文本上斜角的深度，默认值为20。
bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
bevelSegments — Integer。斜角的分段数。默认值为3。

可用的字体
文本几何体使用 typeface.json所生成的字体。一些已有的字体可以在/examples/fonts中找到，且必须在页面中引入。
在这里插入图片描述 ### 1.1.3 ☘️属性

共有属性请参见其基类ExtrudeGeometry。

.parameters : Object
一个包含着构造函数中每个参数的对象。在对象实例化之后，对该属性的任何修改都不会改变这个几何体。

1.1.4 ☘️方法

共有方法请参见其基类ExtrudeGeometry。

二、🍀使用TextGeometry文本几何体

1. ☘️实现思路

1、初始化renderer渲染器。
2、初始化Scene三维场景scene。
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
4、创建THREE.DirectionalLight平行光源dirLight、dirLight2，设置dirLight和dirLight2的位置，scene场景加入dirLight和dirLight2。
5、加载几何模型：定义createMesh方法（参数为geom），方法内创建MeshPhongMaterial高光材质meshMaterial，传入geom和meshMaterial调用createMultiMaterialObject方法创建网格对象plane。定义controls方法，方法内定义gui初始化值用于控制TextGeometry文本几何体的属性，定义asGeom方法，分别传入new THREE.TextGeometry(“Gis”, options)、new THREE.TextGeometry(“Sharer”, options)调用createMesh方法创建两个TextGeometry文本网格对象text1和text2，设置text1的位置，scene添加text1和text2。调用controls.asGeom方法。具体代码参考下面代码样例。
6、加入gui控制。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>学习threejs，使用TextGeometry文本几何体</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../assets/fonts/helvetiker_regular.typeface.js"></script><script type="text/javascript" src="../assets/fonts/helvetiker_bold.typeface.js"></script><script type="text/javascript" src="../assets/fonts/bitstream_vera_sans_mono_roman.typeface.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<div id="WebGL-output">
</div><!-- Js代码块 -->
<script type="text/javascript">function init() {var stats = initStats();// 创建三维场景scenevar scene = new THREE.Scene();// 创建相机cameravar camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器webGLRenderer，设置颜色、大小和投影var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// 设置相机位置和方向camera.position.x = 100;camera.position.y = 300;camera.position.z = 600;camera.lookAt(new THREE.Vector3(400, 0, -300));// 添加平行光var dirLight = new THREE.DirectionalLight();dirLight.position.set(25, 23, 15);scene.add(dirLight);// 添加平行光var dirLight2 = new THREE.DirectionalLight();dirLight2.position.set(-25, 23, 15);scene.add(dirLight2);document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var text1;var text2;var controls = new function () {this.size = 90;this.height = 90;this.bevelThickness = 2;this.bevelSize = 0.5;this.bevelEnabled = true;this.bevelSegments = 3;this.bevelEnabled = true;this.curveSegments = 12;this.steps = 1;this.font = "helvetiker";this.weight = "normal";this.asGeom = function () {scene.remove(text1);scene.remove(text2);var options = {size: controls.size,height: controls.height,weight: controls.weight,font: controls.font,bevelThickness: controls.bevelThickness,bevelSize: controls.bevelSize,bevelSegments: controls.bevelSegments,bevelEnabled: controls.bevelEnabled,curveSegments: controls.curveSegments,steps: controls.steps};console.log(THREE.FontUtils.faces);text1 = createMesh(new THREE.TextGeometry("Gis", options));text1.position.z = -100;text1.position.y = 100;scene.add(text1);text2 = createMesh(new THREE.TextGeometry("Sharer", options));scene.add(text2);};};controls.asGeom();var gui = new dat.GUI();gui.add(controls, 'size', 0, 200).onChange(controls.asGeom);gui.add(controls, 'height', 0, 200).onChange(controls.asGeom);gui.add(controls, 'font', ['bitstream vera sans mono', 'helvetiker']).onChange(controls.asGeom);gui.add(controls, 'bevelThickness', 0, 10).onChange(controls.asGeom);gui.add(controls, 'bevelSize', 0, 10).onChange(controls.asGeom);gui.add(controls, 'bevelSegments', 0, 30).step(1).onChange(controls.asGeom);gui.add(controls, 'bevelEnabled').onChange(controls.asGeom);gui.add(controls, 'curveSegments', 1, 30).step(1).onChange(controls.asGeom);gui.add(controls, 'steps', 1, 5).step(1).onChange(controls.asGeom);render();function createMesh(geom) {var meshMaterial = new THREE.MeshPhongMaterial({specular: 0xffffff,color: 0xeeffff,shininess: 100,metal: true});var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);return plane;}function render() {stats.update();requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>