Three立体文本实例

基础环境搭建：

新建文件夹fonts，拷贝官方字体文件：

创建立体文本：

1. 引入字体加载器、文本几何体对象：

FontLoader：一个用于加载JSON格式的字体的类，返回font， 返回值是表示字体的Shape类型的数组。

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'

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。

        const textGeometry = new TextGeometry('Hello lkk', {
            font: font,
            size: 45,
            height: 0,
            curveSegments: 20,
            bevelEnabled: true,
            bevelThickness: 10,
            bevelSize: 1.5,
        })
        const materials = [
            new THREE.MeshPhongMaterial({
                color: 0xfffffff,
                flatShading: true
            }),
            new THREE.MeshPhongMaterial({
                color: 0xffffff
            })
        ]
        const textMesh1 = new THREE.Mesh(textGeometry, materials)
        scene.add(textMesh1)

3. 调整网格模型位置：

.computeBoundingBox () : undefined
计算当前几何体的的边界矩形，该操作会更新已有 [param:.boundingBox]。
边界矩形不会默认计算，需要调用该接口指定计算边界矩形，否则保持默认值 null。

        textGeometry.computeBoundingBox()
        const centerOffset = -0.5 * (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x)
        ...
        textMesh1.position.x = centerOffset
        textMesh1.position.y = 30
        textMesh1.position.z = 0

4. 倒影（旋转多少度拿张纸撕一下）

        const textMesh2 = new THREE.Mesh(textGeometry, materials)
        textMesh2.position.set(centerOffset, -30, 0)
        textMesh2.rotation.x = Math.PI
        textMesh2.rotation.y = Math.PI * 2
        scene.add(textMesh2)

5. 设置地面和线性雾，设置点光源随机颜色：