three.js显示中文字体与tween应用详析
今天郭先生说一下如何在three中显示中文字体,然后结合tween实现文字位置的动画。线案例请点击chinese-font,
1. 生成中文字体
我们都使用过three.js的FontLoader加载typeface.json实现font的使用,但是很多案例都是英文字体,那么如何来生成中文字体呢?现在我们可以通过Facetype.js实现ttf向typeface.json的转换。 首先我们在网上下载ttf中文字体(或者在电脑的C:\Windows\Fonts直接复制一份中文的ttf字体),然后我们登陆Facetype.js网站,选中准备好的ttf文件,点击convert即可。得到的json文件就可以使用FontLoader加载了,其实还是挺简单的,中文ttf一般都比较大,所以在选择喜欢字体的同时,也要考虑好文件的大小。
2. tween操作文字动画
之前也说过tween动画,不过我觉得挺有意思的,我们就拿百家姓来作文字素材。
效果就是这样的,我们让tween实现从图一到图二到图三再到图一的动画,每个汉字除了位置的变化还有朝向(lookAt)的变化。这里的lookAt方法就是设置物体的朝向。好了开始上代码。
1.设置点的位置和朝向
图一中点的位置可以在平面几何体中取点
let vertices1 = new THREE.PlaneGeometry(1400, 900, 13, 6).vertices;
他们的朝向相对于每个字来说都是Vector3(0, 0, 1),所以可以设置为
d.position.clone().add(Vector3(0, 0, 1)) //这里的d.position就是每个点的位置
图二中点的位置可以在球体中获取
let vertices2 = new THREE.SphereGeometry(500, 12, 9).vertices;
他们的朝向很容易找,就是朝向中心点就可以Vector3(0, 0, 0) 图三中的点可以通过计算得到,就是一组旋转上升的点
for(let i=0; i<98; i++) { let x = Math.sin(Math.PI / 12 * i) * 400; let y = (49 - i) * 8; let z = Math.cos(Math.PI / 12 * i) * 400; positions3.push(new THREE.Vector3(x,y,z)); }
他们的朝向可以设置为
new THREE.Vector3(0, d.position.y, 0) //d.position.y就是点的y坐标
这样就设置好了点,接下来就制作动画
2.tween动画
首先初始化三个动画
initTween() { var pos = { time: 0 }; tween1 = new TWEEN.Tween(pos).to({ time: 1 }, 1000); tween2 = new TWEEN.Tween(pos).to({ time: 2 }, 1000); tween3 = new TWEEN.Tween(pos).to({ time: 0 }, 1000); tween1.easing(TWEEN.Easing.Linear.None); tween2.easing(TWEEN.Easing.Linear.None); tween3.easing(TWEEN.Easing.Linear.None); tween1.onUpdate(onUpdate); tween2.onUpdate(onUpdate); tween3.onUpdate(onUpdate); }
这里的easing是动画的缓动效果里面有很多种,不妨打印出来看一下
然后就是onUpdate方法
function onUpdate() { let time = this._object.time; //动画时刻值 if(flag == 0) {//这里有三段动画flag判断是那一段动画 group.children.forEach((d, i) => {//group里面包含着所有文字网格 d.position.copy(positions3[i].clone().multiplyScalar(time / 2).add(positions1[i].clone().multiplyScalar(1 - time / 2))); d.lookAt((new THREE.Vector3(0, d.position.y, 0).multiplyScalar(time / 2)).add(d.position.clone().add(lookAt1).multiplyScalar(1 - time / 2))); }) } else if(flag == 1) { group.children.forEach((d, i) => { d.position.copy(positions1[i].clone().multiplyScalar(1 - time).add(positions2[i].clone().multiplyScalar(time))); d.lookAt((d.position.clone().add(lookAt1).multiplyScalar(1 - time)).add(lookAt2.multiplyScalar(time))); }) } else if(flag == 2) { group.children.forEach((d, i) => { d.position.copy(positions2[i].clone().multiplyScalar(2 - time).add(positions3[i].clone().multiplyScalar(time - 1))); d.lookAt((lookAt2.multiplyScalar(2 - time)).add(new THREE.Vector3(0, d.position.y, 0).multiplyScalar(time - 1))); }) } }
最后通过点击触发
click() { tween1.stop(); tween2.stop(); tween3.stop(); if(flag == 0) { tween1.start(); } else if(flag == 1) { tween2.start(); } else if(flag == 2) { tween3.start(); } flag = (flag + 1) % 3; },
这里注意,由于点击切换的时候动画上一个动画可能没有完成,所以先调用stop方法,让动画先停下来。别忘了在render函数中调用TWEEN.update(),不然动画是不会执行的。
总结
到此这篇关于three.js显示中文字体与tween应用的文章就介绍到这了,更多相关three.js显示中文字体与tween应用内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
版权声明:本文为郭志强的原创文章,原文链接:https://www.mrguo.link
相关文章
js URLdecode()与urlencode方法支持中文解码
下面来介绍在js中来利用urlencode对中文编码与接受到数据后利用URLdecode()对编码进行解码,有需要学习的机友可参考参考。 代码如下 复制代码 ...2016-09-20关于Mysql中文乱码问题该如何解决(乱码问题完美解决方案)
最近两天做项目总是被乱码问题困扰着,这不刚把mysql中文乱码问题解决了,下面小编把我的解决方案分享给大家,供大家参考,也方便以后自己查阅。首先:用show variables like “%colla%”;show varables like “%char%”;这两条...2015-11-24- 这篇文章主要介绍了C#读取中文文件出现乱码的解决方法,涉及C#中文编码的操作技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 在debian环境下,彻底解决mysql无法插入和显示中文的问题Linux下Mysql插入中文显示乱码解决方案mysql -uroot -p 回车输入密码进入mysql查看状态如下:默认的是客户端和服务器都用了latin1,所以会乱码。解决方案:mysql>use...2013-10-04
- 一.mysql默认不支持中文,它的server和db默认是latin1编码.所以我们要将其改变为utf-8编码,因为utf-8包含了地球上大部分语言的二进制编码 1.关闭mysql服务 sudo /etc/init.d/mysql stop 2.修改mysql配置文件 mysql配...2015-10-21
- 我们自己鼓捣mysql时,总免不了会遇到这个问题:插入中文字符出现乱码,虽然这是运维先给配好的环境,但是在自己机子上玩的时候咧,总得知道个一二吧,不然以后如何优雅的吹牛B。...2015-03-15
- 小编分享了一段简单的php中文转拼音的实现代码,代码简单易懂,适合初学php的同学参考学习。 代码如下 复制代码 <?phpfunction Pinyin($_String...2017-07-06
- 这篇文章主要介绍了Java连接数据库oracle中文乱码解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-16
- FlashFXP是一款常用的服务器客户连接软件了,我们可以通过FlashFXP来上传或下载文件,但有一些朋友使用FlashFXP时碰到中文目录或文件名乱码问题,那么要如何来解决呢?具体就...2016-10-10
- 小编在网上看到最多的就是汉字转换unicode编码了,今天我们看到一个反过来的操作就是把unicode转换成中文了,下面一起来看看 这两天帮别人开发微信平台好友板块,存...2016-11-25
- 复制代码 代码如下: $str='asb天水市12'; if (preg_match("/^[/x7f-/xff]+$/", $str)){ echo '全部是汉字'; }else { echo '不全是汉字'; } /** PHP自带的判断是否是中文, eregi('[^/x00-/x7F]', $str ) //中文 ereg...2013-10-04
- <?php教程 function cn2pinyin($_string, $_code='gb2312') { $_datakey = "a|ai|an|ang|ao|ba|bai|ban|bang|bao|bei|ben|beng|bi|bian|biao|bie|bin|bing|b...2016-11-25
- 这篇文章主要介绍了JavaScript过滤字符串中的中文与空格方法汇总 的相关资料,需要的朋友可以参考下...2016-03-09
- 这篇文章主要给大家介绍了关于three.js显示中文字体与tween应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-04
- 这篇文章主要介绍了three.js 实现露珠滴落动画效果的示例代码,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-01
- // 原是是根据用户输入的数字判断再转换成想要的大写数字,如果我们先把大小写存在一个数组,再判断进行转换就OK了。 $data = $_POST['rmb']; if (!ereg("^[0-9.]",$dat...2016-11-25
- 今天在做公司的项目的时候,遇到一个问题,群聊天记录存入数据库的时候把聊天记录及央视使用16进制转换,我在做将聊天记录导出为text文本的时候,需要将聊天记录先从16进制转...2016-11-25
- PHP代码:-------------------------------------------------------------------------------- function ccStrLen($str) #计算中英文混合字符串的长度 { $ccLe...2016-11-25
- InnoDB默认的全文索引parser非常合适于Latin,因为Latin是通过空格来分词的。但对于像中文,日文和韩文来说,没有这样的分隔符。一个词可以由多个字来组成,所以我们需要用不同的方式来处理。在MySQL 5.7.6中我们能使用一个新的全文索引插件来处理它们:n-gram parser。...2017-01-09
- 这篇文章主要介绍了JS验证逗号隔开可以是中文字母数字 的相关资料,需要的朋友可以参考下...2016-04-24