three.js之高级几何体-TextGeometry文本几何体创建中文文本(vue中使用three.js37)

最新推荐文章于 2025-03-21 17:23:38 发布

原创

最新推荐文章于 2025-03-21 17:23:38 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#three.js #webgl #vue

本文介绍如何使用Three.js中的TextGeometry结合支持中文的YaHei字体文件创建三维中文文本，并可通过参数调整文本大小、厚度及斜角效果。

TextGeometry创建中文文本

1.引言
2.创建中文实现步骤
3.demo说明
4.demo代码

1.引言

上一篇文章中使用TextGeometry创建三维文本使用的是helvetiker字体，只能创建英文字符的文本，不能创建中文字符的文本。实际使用中很可能会使用中文，经过一番折腾后，终于出现在屏幕上了，接下来就介绍一下实现过程。

2.创建中文实现步骤

2.1字体文件引入

示例中使用的是支持中文的YaHei字体，首先需要获取 YaHei_Regular.js 文件，这里给大家一个下载链接和上一篇是同一个链接，里面放了两个字体文件，一个是helvetiker_regular.typeface.js，一个是YaHei_Regular.js，如果需要请点击这里下载YaHei_Regular.js，
首先将字体文件YaHei_Regular.js 放在public/font目录下在将该文件引入，引入过程如下:

const publicPath = process.env.BASE_URL
const textLoader = new THREE.FontLoader()
const url = './YaHei_Regular.js'
// 导入字体
textLoader.load(`${
     
     publicPath}font/YaHei_Regular.js`, font => {
   
   
	// 这里可以获取到font就是创建文本几何体需要的字体
})

2.2创建文本几何体

const options = {
   
   
  size: this.properties.size.value,
  height: this.properties.height.value,
  font: font,
  bevelThickness: this.properties.bevelThickness.value,
  bevelSize: this.properties.bevelSize.value,
  bevelSegments: this.properties.bevelSegments.value,
  bevelEnabled: this.properties.bevelEnabled,
  curveSegments: this.properties.curveSegments.value
}
// 创建文本几何体
const textGeo = new THREE.TextGeometry('中文文本测试', options)

2.3创建网格对象并添加到场景

// 创建材质
const meshMaterial = new THREE.MeshStandardMaterial({
   
   
  color: 0xeeffff
})
// 创建文字网格对象
this.mesh = new THREE.Mesh(textGeo, meshMaterial)
this.mesh.position.set(40, -30, -60)
this.mesh.rotation.y = -1.1
// 网格对象添加到场景中
this.scene.add(this.mesh)

3.demo说明

在这里插入图片描述

如上图，该示例支持以下功能

通过size属性调整文本大小
通过height 属性调整文本厚度
通过bevelEnabled属性指定文本是否启用斜角
通过bevelThickness属性指定文本斜角的厚度
通过bevelSize属性指定文本斜角的高度
通过bevelSegments属性指定文本斜角的分段数
通过curveSegments属性指定文本拉伸时拉伸曲线的分段数

4.demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined">
              <el-col

最低0.47元/天解锁文章