目录
项目搭建
初始化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.innerHeight
camera.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)
})
文章来源:https://www.toymoban.com/news/detail-470381.html
demo做完,给出本案例的完整代码:(获取素材也可以私信博主)文章来源地址https://www.toymoban.com/news/detail-470381.html
<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.innerHeight
camera.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>
到了这里,关于Three.js--》实现3d字体模型展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!