mile米乐体育-米乐app官网登录
开发技术 正文
怎么用three.js react实现3d文字悬浮效果
本篇内容介绍了“怎么用three.js react实现3d文字悬浮效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
背景
在three.js journey
课程示例中,提供了一个使用three.js
内置方法实现的3d
文字悬浮效果的例子,本文使用react three.js
技术栈,参照示例实现类似的效果。本文中涉及到的知识点主要包括:css
网格背景、meshnormalmaterial
法向材质、fontloader
字体加载器、textgeometry
文本缓冲几何体、torusbuffergeometry
圆环缓冲几何体、conebuffergeometry
圆锥缓冲几何体、octahedronbuffergeometry
八面缓冲几何体、three.js
后期渲染、glitchpass
通道、element.requestfullscreen
、document.exitfullscreen
等。
效果
实现效果如banner
图所示,页面主体由位于中心的文字网格模型以及四周的圆环面、圆锥以及八面体构成。随着鼠标在页面上移动或点击,模型也随之移动。页面右上角提供了2个按钮,可以切换页面背景色和切换故障风格后期特效。双击屏幕可以进入或退出全屏。
在线预览:https://3d-dragonir.vercel.app/#/floating
或https://dragonir.github.io/3d/#/floating
已适配:
实现
资源引入
首先引入开发所需要的模块资源,其中fontloader
用于加载字体文件,textgeometry
用于创建3d
字体网格,effectcomposer
、renderpass
和glitchpass
用于后期特效渲染。
import*asthreefrom"three";import{fontloader}from"three/examples/jsm/loaders/fontloader";import{textgeometry}from'three/examples/jsm/geometries/textgeometry';import{effectcomposer}from'three/examples/jsm/postprocessing/effectcomposer.js';import{renderpass}from'three/examples/jsm/postprocessing/renderpass.js';import{glitchpass}from'three/examples/jsm/postprocessing/glitchpass.js';
dom结构
页面dom
结构非常简单,容器#canvas
用于场景渲染,.color_pick
用于切换页面背景颜色,.pass_button
用于切换故障风格后期渲染。
特效{this.state.renderglithpass?'开':'关'} 设置状态
backgroundcolor
表示当前页面背景色,renderglithpass
表示是否开启后期状态。自测发现在ios safari
浏览器中,故障风格后期渲染会导致模型产生穿模问题,因此使用该参数控制手机端默认关闭后期效果、pc端默认开启。
state={backgroundcolor:'#164cca',renderglithpass:!(window.navigator.useragent.tolowercase().indexof('mobile')>0)}
网格背景
使用纯css
属性linear-gradient
实现网格背景来美化页面。
background-image:linear-gradient(rgba(3,192,60,.3)1px,transparent1px),linear-gradient(90deg,rgba(3,192,60,.3)1px,transparent1px);background-size:1em1em;
场景初始化
初始化渲染容器、场景、摄像机,摄像机的位置可根据自身所需调整。render
开启alpha
并设置.setclearalpha(0)
可将背景色设置为透明。
canvas=document.getelementbyid('canvas');renderer=newthree.webglrenderer({antialias:true,alpha:true});renderer.setpixelratio(math.min(2,window.devicepixelratio));renderer.setsize(window.innerwidth,window.innerheight);renderer.setclearalpha(0);canvas.appendchild(renderer.domelement);scene=newthree.scene();camera=newthree.perspectivecamera(70,window.innerwidth/window.innerheight,.1,10000);camera.position.set(-2*10000,0,780);
创建材质
本文中所有网格模型都将使用同一种材质meshnormalmaterial
,应用它的特性,可以使网格模型产生彩色渐变。全局创建一次,后续开发不需要重复创建,有利于页面性能提升。
constmaterial=newthree.meshnormalmaterial();
meshnormalmaterial 法向材质
是一种把法向量映射到rgb
颜色的材质,可以通过观察模型表面渐变颜色是否连续来检测模型表面是否平整。
构造函数:
meshnormalmaterial(parameters:object)
parameters
:可选,用于定义材质外观的对象,具有一个或多个属性。
特殊属性:
.normalmap[texture]
:用于创建法线贴图纹理,rgb
值会影响每个像素片段的曲面法线,并更改颜色照亮的方式。
.normalmaptype[integer]
:法线贴图的类型,选项为three.tangentspacenormalmap
(默认)和three.objectspacenormalmap
。
.normalscale[vector2]
:法线贴图对材质的影响程度。范围是0-1
,默认值是vector2
设置为(1, 1)
。
.flatshading[boolean]
:定义材质是否使用平面着色进行渲染,默认值为false
。
.morphnormals[boolean]
:定义是否使用morphnormals
。设置为true
可将morphnormal
属性从geometry
传递到shader
。默认值为false
。
.morphtargets[boolean]
:定义材质是否使用morphtargets
,默认值为false
。
创建文字模型
使用fontloader
加载fontface
字体json
文件,并用textgeometry
创建文字几何体模型。
constloader=newfontloader();loader.load('./fonts/helvetiker_regular.typeface.json',font=>{textmesh.geometry=newtextgeometry('@dragonir\nfantastic\nthree.js\nartwork',{font:font,size:100,height:40,curvesegments:12,bevelenabled:true,bevelthickness:30,bevelsize:8,beveloffset:1,bevelsegments:12});textmesh.material=material;scene.add(textmesh);});
fontloader 字体加载器
使用json
格式中加载字体的一个类,返回font
, 返回值是表示字体的shape
类型的数组,其内部使用fileloader
来加载文件。
构造函数:
fontloader(manager:loadingmanager)
方法:
.load
从url
中进行加载,并将被加载的texture
传递给onload
。
.load(url: string, onload: function, onprogress: function, onerror: function): null
。
url
:文件的url或者路径,也可以为data uri
。
onload
:加载完成时将调用。回调参数是将要被加载的texture
。
onprogress
:将在加载过程中进行调用。参数为xmlhttprequest
实例,包含total
和loaded
字节。
onerror
:加载错误时被调用。
.parse
以json
格式进行解析,并返回一个font
。
textgeometry 文本几何体
用于将文本生成单一几何体的类,它是由一串给定的文本,以及由加载的font
字体和该几何体extrudegeometry
父类中的设置所组成的参数构造的。
构造函数:
textgeometry(text:string,parameters:object)
text
:将要显示的文本。
parameters
:
font[font]
:three.font
实例。
size[float]
:字体大小,默认值为100
。
height[float]
:挤出文本的厚度,默认值为50
。
curvesegments[integer]
:表示文本的曲线上点的数量,默认值为12
。
bevelenabled[boolean]
:是否开启斜角,默认为false
。
bevelthickness[float]
:文本斜角的深度,默认值为20
。
bevelsize[float]
:斜角与原始文本轮廓之间的延伸距离,默认值为8
。
bevelsegments[integer]
:斜角的分段数,默认值为3
。
可以使用facetype.js在线转换three.js
支持的字体。
创建几何体模型
使用其他3种内置几何体模型圆环、圆锥和八面体来装饰页面。装饰几何体的数量比较多,为了有效提升页面性能,需要注意以下两点:
//批量创建模型方法generaterandommesh=(geometry,material,count)=>{for(leti=0;i
torusbuffergeometry 圆环缓冲几何体
用于生成圆环几何体的类。
构造函数:
torusbuffergeometry(radius:float,tube:float,radialsegments:integer,tubularsegments:integer,arc:float)
radius
:圆环的半径,从圆环的中心到管道横截面的中心,默认值是1
。
tube
:管道的半径,默认值为0.4
。
radialsegments
:圆环的分段数,默认值为8
。
tubularsegments
:管道的分段数,默认值为6
。
arc
:圆环的圆心角,单位是弧度,默认值为math.pi * 2
。
conebuffergeometry 圆锥缓冲几何体
用于生成圆锥几何体的类。
构造函数:
conebuffergeometry(radius:float,height:float,radialsegments:integer,heightsegments:integer,openended:boolean,thetastart:float,thetalength:float)
radius
:圆锥底部的半径,默认值为1
。
height
:圆锥的高度,默认值为1
。
radialsegments
:圆锥侧面周围的分段数,默认为8
。
heightsegments
:圆锥侧面沿着其高度的分段数,默认值为1
。
openended
:指明该圆锥的底面是开放的还是封顶的。默认值为false
,即其底面默认是封顶的。
thetastart
:第一个分段的起始角度,默认为0
。
thetalength
:圆锥底面圆扇区的中心角,通常被称为θ
。默认值是2*pi
,使其成为一个完整的圆锥。
octahedronbuffergeometry 八面缓冲几何体
用于创建八面体的类。
构造函数:
octahedronbuffergeometry(radius:float,detail:integer)
鼠标事件监听
通过对鼠标移动坐标和模型坐标的相互转换来添加鼠标移动和触摸移动事件的监听方法。
constmousefx={windowhalfx:window.innerwidth/2,windowhalfy:window.innerheight/2,coordinates:(coordx,coordy)=>{mousex=(coordx-mousefx.windowhalfx)*5;mousey=(coordy-mousefx.windowhalfy)*5;},onmousemove:e=>{mousefx.coordinates(e.clientx,e.clienty)},ontouchmove:e=>{mousefx.coordinates(e.changedtouches[0].clientx,e.changedtouches[0].clienty)}};document.addeventlistener('mousemove',mousefx.onmousemove,false);document.addeventlistener('touchmove',mousefx.ontouchmove,false);
背景色切换
使用一个input[type='color']
标签来实现背景色切换。
handleinputchange=e=>{this.setstate({backgroundcolor:e.target.value});}
后期渲染
为了更具有冲击感的视觉效果,我添加了一个故障风格后期渲染特效,并使用一个按钮开关来控制开启和关闭该特效。
composer=neweffectcomposer(renderer);composer.addpass(newrenderpass(scene,camera));glitchpass=newglitchpass();composer.addpass(glitchpass);
handlerenderchange=()=>{this.setstate({renderglithpass:!this.state.renderglithpass});}
后期渲染
three.js
后期渲染处理,是通过叠加渲染通道达到预期视觉效果的过程。实现流程如下:
创建效果组合器:效果组合器是各种处理通道的入口,使用effectcomposer
对象创建一个效果组合器。
添加通道:添加renderpass
通道 它将在指定的场景和相机的基础上渲染出一个新的场景。
组合器更新:在动画循环中,调用效果组合器的render
方法,通道生成效果将在场景中输出。
glitchpass 故障风格通道
glitchpass
通道产生模拟故障风格效果,它只有一个可选配置参数:
gowild
该属性接收一个布尔值,指定是否持续产生电磁风暴效果。
three.js
提供了很多后期处理的通道,可以直接使用。同时提供了shaderpass
通道,它支持使用自定义shader
,可以创建高级的自定义后期处理通道。
动画
在requestanimationframe
中更新场景、相机、和后期渲染通道。
functionanimate(){requestanimationframe(animate);camera.position.x =(mousex-camera.position.x)*0.05;camera.position.y =(mousey*-1-camera.position.y)*0.05;camera.lookat(scene.position);//给场景中的立方体网格和字体网格添加自转动画constt=date.now()*0.001;constrx=math.sin(t*0.7)*0.5;constry=math.sin(t*0.3)*0.5;constrz=math.sin(t*0.2)*0.5;group.rotation.x=rx;group.rotation.y=ry;group.rotation.z=rz;textmesh.rotation.x=rx;textmesh.rotation.y=ry;textmesh.rotation.z=rx;renderer.render(scene,camera);//更新后期渲染通道composer.render();}
缩放适配
renderer
和composer
大小要同时调整。
window.addeventlistener('resize',()=>{camera.aspect=window.innerwidth/window.innerheight;camera.updateprojectionmatrix();renderer.setsize(window.innerwidth,window.innerheight);composer.setsize(window.innerwidth,window.innerheight);},false);
双击全屏
监听页面鼠标双击dblclick
事件,通过调用requestfullscreen
和exitfullscreen
进入或退出全屏状态。
window.addeventlistener('dblclick',()=>{letfullscreenelement=document.fullscreenelement||document.webkitfullscreenelement;if(!fullscreenelement){if(canvas.requestfullscreen){canvas.requestfullscreen();}elseif(canvas.webkitrequestfullscreen){canvas.webkitrequestfullscreen();}console.log('进入全屏')}else{if(document.exitfullscreen){document.exitfullscreen();}elseif(document.webkitexitfullscreen){document.webkitexitfullscreen();}console.log('退出全屏')}})
element.requestfullscreen
element.requestfullscreen
方法用于发出异步请求使元素进入全屏模式。调用此api
并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式,返回的promise
会resolve
,并且该元素会收到一个fullscreenchange
事件,通知它已经进入全屏模式。如果全屏请求被拒绝,返回的promise
会变成rejected
并且该元素会收到一个fullscreenerror
事件。如果该元素已经从原来的文档中分离,那么该文档将会收到这些事件。
语法:
varpromise=element.requestfullscreen(options);
options
:可选,一个fullscreenoptions
对象提供切换到全屏模式的控制选项。
这个方法只能在用户交互或者设备方向改变的时候调用,否则将会失败。fullscreenoptions
目前唯一的选项是navigationui
,这控制了是否在元素处于全屏模式时显示导航条ui
。默认值是auto
,表明这将由浏览器来决定是否显示导航条。
document.exitfullscreen
document.exitfullscreen
方法用于让当前文档退出全屏模式。调用这个方法会让文档回退到上一个调用element.requestfullscreen
方法进入全屏模式之前的状态。
语法:
document.exitfullscreen();
“怎么用three.js react实现3d文字悬浮效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站,小编将为大家输出更多高质量的实用文章!
展开全文
内容来源于互联网和用户投稿,文章中一旦含有米乐app官网登录的联系方式务必识别真假,本站仅做信息展示不承担任何相关责任,如有侵权或涉及法律问题请联系米乐app官网登录删除
最新文章
行业资讯
华为mate40系列的国内发布会时间为10月30日,其中华为mate40凭借5nm5gso...…
行业资讯
这几年手机市场真的是百花齐放,很多品牌我基本都没听说过,但是就是异军突起般地崛起了。最近在...…
行业资讯
在2021年之前,在众多的手机厂商当中没有人能够小瞧荣耀这个品牌的,我们不能否认这里面有着...…
行业资讯
从发布这篇文章开始倒推计算的话,我入手华为nova65g版这款手机已经半月有余了,写这篇文...…