Three.js--》实现3d字体模型展示

项目搭建

初始化three.js基础代码

设置环境纹理

加载字体模型

今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。

<template><!-- 酷炫字体 --><Coolfonts></Coolfonts>
</template><script setup>
import Coolfonts from './components/Coolfonts.vue';
</script><style lang="less">*{margin: 0;padding: 0;}
</style>

初始化three.js基础代码

three.js开启必须用到的基础代码如下：

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

// 设置渲染器
const renderdr = new THREE.WebGLRenderer({ antialias: true })
renderdr.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderdr.domElement)

添加控制器并监听屏幕大小的改变：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';// 添加控制器
const controls = new OrbitControls(camera,renderdr.domElement)
controls.enableDamping = true
// 监听屏幕大小的改变，修改渲染器的宽高和相机的比例
window.addEventListener("resize",()=>{ renderer.setSize(window.innerWidth,window.innerHeight)camera.aspect = window.innerWidth/window.innerHeightcamera.updateProjectionMatrix()
})

设置渲染函数：

// 设置渲染函数
const render = () =>{ controls.update()requestAnimationFrame(render)renderdr.render(scene,camera)
}
render()

ok，写完基础代码之后，接下来开始具体的Demo实操。

设置环境纹理

看过我之前文章的人都知道，设置环境已经老生常谈了，就是使用TextureLoader，其是Three.js中加载图片纹理的一种加载器。在 Three.js 中，画面的渲染是基于 WebGL 实现的，而图片纹理则是应用于其中的一种材质类型。使用 TextureLoader 可以方便地加载外部图片文件，例如 JPG、PNG 等格式的图片，以便将其应用到 Three.js 的材质中。

// 设置环境纹理
const texture = new THREE.TextureLoader().load('/images/starts.jpg')
texture.mapping = THREE.EquirectangularReflectionMapping // 全景贴图反射
scene.background = texture
scene.environment = texture

这里为了彰显字体，我把背景设置一下模糊度属性，环境变得模糊起来：

// 设置背景的模糊度
scene.backgroundBlurriness = 0.2

加载字体模型

在 Three.js 中，我们可以使用 FontLoader（用于加载字体文件的工具类）加载包含字形信息的字体文件（通常为 JSON 格式），并使用字体文件创建 TextGeometry 实例，从而在场景中显示文本。我们设置字体格式的话可以参考：官方提供的示例字体 JSON 文件。

目前，Three.js 官方并没有提供官方的中文字体，但是可以使用第三方的字体库来实现中文的显示，我们可以通过搜索引擎下载该字体的 TTF 或 OTF 格式文件，并使用 Gulp 或者 Webfont 等工具将其转换为 Three.js 所需的 JSON 格式文件。这里就不再展示了，以官方提供的字体案例演示

const loader = new FontLoader()
loader.load('fonts/Flamingo.json',(font)=>{// 创建几何体const geometry = new TextGeometry( 'hello three.js!', {font: font, // 字体size: 80, // 字体大小height: 15, // 字体厚度curveSegments: 12, // 曲线分段数bevelEnabled: true, // 是否启用斜角bevelThickness: 10, // 斜角厚度bevelSize: 2, // 斜角大小bevelSegments: 5 // 斜角分段数});geometry.center()// 设置几何体的材质const material = new THREE.MeshPhysicalMaterial({color: 0xff0000,roughness: 0,reflectivity: 1,thickness: 80,ior: 1.5,side: THREE.DoubleSide})// 创建字体const mesh = new THREE.Mesh(geometry,material)scene.add(mesh)
})

demo做完，给出本案例的完整代码：（获取素材也可以私信博主）

<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 导入字体加载器
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
// 导入几何缓冲
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'// 创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,2000)
camera.position.set(0,0,800)
// 设置渲染器
const renderdr = new THREE.WebGLRenderer({ antialias: true })
renderdr.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderdr.domElement)
// 添加控制器
const controls = new OrbitControls(camera,renderdr.domElement)
controls.enableDamping = true
// 监听屏幕大小的改变，修改渲染器的宽高和相机的比例
window.addEventListener("resize",()=>{ renderer.setSize(window.innerWidth,window.innerHeight)camera.aspect = window.innerWidth/window.innerHeightcamera.updateProjectionMatrix()
})// 设置渲染函数
const render = () =>{ controls.update()requestAnimationFrame(render)renderdr.render(scene,camera)
}
render()// 设置环境纹理
const texture = new THREE.TextureLoader().load('/images/starts.jpg')
texture.mapping = THREE.EquirectangularReflectionMapping // 全景贴图反射
scene.background = texture
scene.environment = texture
// 设置背景的模糊度
scene.backgroundBlurriness = 0.2// 加载字体
const loader = new FontLoader()
loader.load('fonts/Flamingo.json',(font)=>{// 创建几何体const geometry = new TextGeometry( 'hello three.js!', {font: font, // 字体size: 80, // 字体大小height: 15, // 字体厚度curveSegments: 12, // 曲线分段数bevelEnabled: true, // 是否启用斜角bevelThickness: 10, // 斜角厚度bevelSize: 2, // 斜角大小bevelSegments: 5 // 斜角分段数});geometry.center()// 设置几何体的材质const material = new THREE.MeshPhysicalMaterial({color: 0xff0000,roughness: 0,reflectivity: 1,thickness: 80,ior: 1.5,side: THREE.DoubleSide})// 创建字体const mesh = new THREE.Mesh(geometry,material)scene.add(mesh)
})
</script>