three.js 做成3d文字效果思路及代码

发布时间：2022-04-20 08:51:39 所属栏目：语言来源：互联网

导读：网页展示文字的方式有很多，将文字刻在3D图形上的你有没有看到过呢？将文字刻在3D图形上，文字能够随着图形一起运动，视觉效果呈现更酷炫。那么这是如何实现的呢？three.js是一款运行在浏览器中的3D引擎，我们能用它创建各种三维场景。因此，我们能够尝试使

网页展示文字的方式有很多，将文字刻在3D图形上的你有没有看到过呢？将文字刻在3D图形上，文字能够随着图形一起运动，视觉效果呈现更酷炫。那么这是如何实现的呢？three.js是一款运行在浏览器中的3D引擎，我们能用它创建各种三维场景。因此，我们能够尝试使用three.js来复现3D动态文字效果。

准备工作
       笔者自行封装的three.js模板：Three.js Starter。读者可以点击右下角fork一份后再开始本项目。本项目需要用到位图字体，可以直接复制demo的HTML里的font字体代码

       一个注意点：three-bmfont-text这个库依赖全局的three.js，因此要在JS里额外引入一次three.js，如下图

       实现思路
加载位图字体文件，将其转化为文字对象所需要的形状和材质
创建文字对象
创建渲染目标，可以理解为canvas中的canvas，因为接下来我们要将文字对象本身当做贴图
创建承载字体的容器，将文字对象作为贴图贴上去
动画
       正片
       搭好架子

<div class="relative w-screen h-screen">
<div class="kinetic-text w-full h-full bg-blue-1"></div>
<div class="font">
<font>
  一坨从demo里CV而来的字体代码
</font>
</div>
</div>
:root {
--blue-color-1: #2c3e50;
}

class KineticText extends Base {
constructor(sel: string, debug: boolean) {
super(sel, debug);
this.cameraPosition = new THREE.Vector3(0, 0, 4);
this.clock = new THREE.Clock();
this.meshConfig = {
  torusKnot: {
  vertexShader: kineticTextTorusKnotVertexShader,
  fragmentShader: kineticTextTorusKnotFragmentShader,
  geometry: new THREE.TorusKnotGeometry(9, 3, 768, 3, 4, 3)
  }
};
this.meshNames = Object.keys(this.meshConfig);

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Spring MVC和Struts2的	C++ partition 和stab
C++ STL map容器解说	C++ STL map容器迭代器