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

这篇具有很好参考价值的文章主要介绍了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.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--》实现3d字体模型展示

加载字体模型

在 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)
})

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

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js--》实现3d圣诞贺卡展示模型

    目录 项目搭建 初始化three.js基础代码 加载环境模型 设置环境纹理 添加水面并设置阴影效果 实现幽灵小球的运动 实现相机切换和文字切屏 实现漫天星星和爱心样式 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起

    2024年02月06日
    浏览(60)
  • Three.js--》实现3d球形机器人模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理 加载机器人模型 添加光阵 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工

    2024年02月07日
    浏览(103)
  • Three.js--》实现3d小岛模型搭建

    目录 项目搭建 初始化three.js基础代码 设置环境背景 设置水面样式 添加天空小岛 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建

    2024年02月05日
    浏览(102)
  • Three.js--》实现3d汽车模型展览搭建

    目录 项目搭建 初始化three.js基础代码 添加汽车模型展示 动态修改汽车模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具

    2024年02月06日
    浏览(97)
  • Three.js--》实现3d水晶小熊模型搭建

    目录 项目搭建 初始化three.js基础代码 加载背景纹理 加载小熊模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项

    2024年02月06日
    浏览(55)
  • 微信小程序利用three.js展示3D模型部分问题

    由于小程序的内存限制比较多,稍不注意就容易溢出,所以经过测试后我选择gltf模型。不用加载贴图,而且这个格式较为通用,最关键的是真的很小。OBJ+PNG怎么转GLTF格式在我上篇帖子内有。 three.js有一个小程序专用插件threex,移植效果还不错,但渲染出来的效果会差一点,

    2024年02月08日
    浏览(55)
  • three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)

    Three.js是一款开源的主流3D绘图JS引擎,简单点,可以将它理解为three+js就可以了,three表示3D,js表示JavaScript的意思。 结构  .glb.gltf文件最好放在服务器上 放在本地容易报找不到的错 .fbx格式文件可以在本地用3d看图(win10自带)打开另存为.glb格式 index.html代码 js代码 项目案例

    2024年02月11日
    浏览(60)
  • Three.js--》实现图片转3D效果展示

    目录 项目搭建 初始化three.js基础代码 加载图片纹理 设置着色器 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项目

    2024年02月08日
    浏览(60)
  • Three.js--》实现3D汽车展厅效果展示

    目录 项目搭建 初始化three.js基础代码 加载汽车模型 设置展厅效果 设置GUI面板动态控制车身操作 车门操作与车身视角展示 设置手动点击打开关闭车门 设置图片背景 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起

    2024年02月09日
    浏览(60)
  • 微信小程序3D,使用Three.js在微信小程序中展示gltf模型,使用VisionKit展示AR能力

    本仓库只开源gltf模型展示技术,技术好的朋友有这些代码就能帮助你解决很多问题了 如需要完整项目(基于若依框架开发的后端,AR能力前端)需另外付费赞助, 联系方式:QQ 790002517 微信公众号:时不待我 https://github.com/zzy-life/Wechat3D Three.js Three.js is a JavaScript 3D library. thr

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包