TextGeometry text geometry introduction and use
1. Introduction to TextGeometry
TextGeometry can be used to create three-dimensional text. In fact, the characters are created by specifying the font, and then the text is stretched like the stretched geometry, and then the three-dimensional text is obtained. There are many parameters for creating TextGeometry text geometry and ExtrudeGeometry geometry, as follows:
| Attributes | have to | description |
|---|---|---|
| size | no | This attribute specifies the text size, the default value is 100 |
| height | no | This attribute specifies the thickness of the text, the default value is 50 |
| font | no | This attribute specifies the font of the text, which is a THREE.Font object |
| commandEnabled | no | This attribute specifies whether to enable the bevel when the text is stretched, the default is false |
| bevelThickness | no | This attribute specifies the thickness of the bevel of the text extruded body, the default value is 10 |
| bevelSize | no | This attribute specifies the height of the bevel of the text extruded body. The default value is 8 |
| bevelSegments | no | This attribute specifies the number of segments of the bevel of the text stretched body. The more segments, the smoother the bevel. The default value is 3. |
| curveSegments | no | This attribute specifies the number of segments of the stretched curve when the text is stretched. The more the number of segments, the smoother the curve will be. The default value is 4 |
2. TextGeometry text geometry usage
2.1 Font file introduction
The helvetiker font is used in the example. The font is imported through the file helvetiker_regular.typeface.js. The file helvetiker_regular.typeface.js is in the same directory as the working file. The font file can be downloaded here. The introduction process of helvetiker_regular.typeface.js is as follows:
const textLoader = new THREE.FontLoader()
const url = './helvetiker_regular.typeface.js'
//导入字体
textLoader.load(url, font => {
// 这里可以获取到font就是创建文本几何体需要的字体
})
2.2 Create text geometry
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('Learning', options)
2.3 Create a mesh object and add it to the scene
// 创建材质
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 description
As shown above, this example supports the following functions
- Adjust the text size through the size attribute
- Adjust the text thickness through the height property
- Specify whether the bevel is enabled for the text through the bevelEnabled property
- Specify the thickness of the text bevel through the bevelThickness property
- Specify the height of the text bevel through the bevelSize property
- Specify the number of segments of the text bevel through the bevelSegments property
- Specify the number of segments of the stretched curve when the text is stretched through the curveSegments property
4.demo code
<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 :span="8">
<span class="vertice-span">{
{
item.name}}</span>
</el-col>
<el-col :span="13">
<el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip" @change="redraw(item.name)"></el-slider>
</el-col>
<el-col :span="3">
<span class="vertice-span">{
{
item.value}}</span>
</el-col>
</div>
</div>
</el-row>
<el-row>
<el-checkbox v-model="properties.bevelEnabled" @change="redraw">bevelEnabled</el-checkbox>
</el-row>
</section>
</div>
</div>
</template>
<script>
import * as THREE from 'three'
import {
OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import {
SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js'
export default {
data() {
return {
properties: {
size: {
name: 'size',
value: 20,
min: 0,
max: 100,
step: 1
},
height: {
name: 'height',
value: 20,
min: 0,
max: 100,
step: 1
},
bevelThickness: {
name: 'bevelThickness',
value: 2,
min: 0,
max: 10,
step: 0.1
},
bevelSize: {
name: 'bevelSize',
value: 0.5,
min: 0,
max: 10,
step: 0.1
},
bevelSegments: {
name: 'bevelSegments',
value: 3,
min: 0,
max: 30,
step: 1
},
curveSegments: {
name: 'curveSegments',
value: 12,
min: 1,
max: 30,
step: 1
},
bevelEnabled: false
},
mesh: null,
camera: null,
scene: null,
renderer: null,
controls: null
}
},
mounted() {
this.init()
},
methods: {
formatTooltip(val) {
return val
},
// 初始化
init() {
this.createScene() // 创建场景
this.createMesh() // 创建网格模型
this.createLight() // 创建光源
this.createCamera() // 创建相机
this.createRender() // 创建渲染器
this.createControls() // 创建控件对象
this.render() // 渲染
},
// 创建场景
createScene() {
this.scene = new THREE.Scene()
},
// 创建网格模型
createMesh() {
const textLoader = new THREE.FontLoader()
const url = './helvetiker_regular.typeface.js'
//导入字体
textLoader.load(url, font => {
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('Learning', options)
// 创建材质
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)
})
},
// 创建光源
createLight() {
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光
this.scene.add(ambientLight) // 将环境光添加到场景
const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
spotLight.position.set(-40, 60, -10)
spotLight.castShadow = true
this.scene.add(spotLight)
},
// 创建相机
createCamera() {
const element = document.getElementById('container')
const width = element.clientWidth // 窗口宽度
const height = element.clientHeight // 窗口高度
const k = width / height // 窗口宽高比
// PerspectiveCamera( fov, aspect, near, far )
this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
this.camera.position.set(-80, 60, 40) // 设置相机位置
this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向
this.scene.add(this.camera)
},
// 创建渲染器
createRender() {
const element = document.getElementById('container')
this.renderer = new THREE.WebGLRenderer({
antialias: true, alpha: true })
this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
this.renderer.shadowMap.enabled = true // 显示阴影
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
element.appendChild(this.renderer.domElement)
},
// 重新绘制
redraw() {
this.scene.remove(this.mesh)
this.createMesh()
},
render() {
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render)
},
// 创建控件对象
createControls() {
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
}
}
}
</script>
<style>
#container {
position: absolute;
width: 100%;
height: 100%;
}
.controls-box {
position: absolute;
right: 5px;
top: 5px;
width: 300px;
padding: 10px;
background-color: #fff;
border: 1px solid #c3c3c3;
}
.vertice-span {
line-height: 38px;
padding: 0 2px 0 10px;
}
</style>