下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:Three.JS中创建文字的几种方法

作者:chencarl     来源: https://www.cnblogs.com/chencarl/p/11725091.html点击数:2603发布时间: 2020-03-09 09:33:18

标签: Three.jsHTML5Javascript

Web开发

  three.js是Javascript编写的WebGL第三方库。提供了非常多的3D显示功能。

  1.DOM+css

  传统HTML5的文字实现,用于添加描述性叠加文字的方法。一般使用绝对定位,并且保证z-index够大,用于显示在3D场景之上。

  优点:

  与CSS3D效果一致

  缺点:

  3d效果和运动还原不好

  2.THREE.CanvasTexture

  在canvas中绘制文字,然后使用CanvasTexture作为纹理进行贴图

  例子

  优点:

  文字效果较为丰富,方便绘制。

  缺点:

  一旦生成,分辨率固定,放大会产生失真。

  3.THREE.TextGeometry/THREE.TextBufferGeometry

  使用原生的TextGeometry进行渲染生成。例子

  优点:

  效果好,可与场景进行同步

  缺点:

  单个字体的颜色和动画制作较为复杂,且耗费资源较大

  4.3d字体模型

  使用3d制作的字体模型,使用threejs进行加载控制。例子

  优点:

  效果好,可定制效果

  缺点:

  加载模型较为耗费资源,字体内容无法自定义

  5.位图字体

  通过BmpFont生成文字模板,然后进行加载显示。BMFonts(位图字体)可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signeddistancefieldswithstandardderivatives、multi-channelsigneddistancefields、多纹理字体等特性。three-bmfont-text

  优点:

  可自定义字体和效果

  缺点:

  加载模型较为耗费资源,字体内容无法自定义

  6.Three.Sprite

  Sprite加载图像纹理

  优点:

  永远面向相机的平面,适合作为标签显示

  缺点:

  存在canvasTexture的问题

  Three.js是一款运行在浏览器中的3D引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。

赞(13)
踩(1)
分享到:
华为认证网络工程师 HCIE直播课视频教程