专栏首页腾讯IVWEB团队的专栏基于ThreeJs Heart animation 动画

基于ThreeJs Heart animation 动画

效果

https://bilibiliou.github.io/assets/download/animations/heart-animation.gif

思路

基于ThreeJs设置一个 PlaneGeometry ,加载图片 Texture,获取 PlaneGeometry 下的所有 vertices , 依照 心形函数

x = 16sin³(t)
y = 13Cos(t) - 5Cos(2t) - 2Cos(3t) - Cos(4t)
t ∈ [0,2π]

将原有Mesh内的点集均匀的排布在心形的轨迹上,渲染函数

间补动画通过位移差进行计算

坑 和 Caveats

加载Texture

加载Texture 一定要在服务器环境下(推荐Http-server)

心形轨迹计算

var vdeg = ((2 * Math.PI) / _obj._geo.vertices.length) * _id
var _tx = 11 * 16 * Math.pow( Math.sin(vdeg) , 3);
var _ty = 11 * (13 * Math.cos( vdeg ) - 5 * Math.cos( 2 * vdeg ) - 2 * Math.cos( 3 * vdeg ) - Math.cos( 4 * vdeg ));

众所周知,圆 === 2π 所以心形也是一样

这里将 2π除以点集数,等到每一份的度数,在根据公式计算出具体的位置(x,y)

注意,原有函数所绘制的心形太小,这里我给x和y都乘以了一个 11 的倍数

这个参数可以自行调整

速度算法

随机生成一个速度倍率 s

this._speedA = Math.random() * 18 * 0.01 + 0.08;  // 我们称为s
this._currentV.x = ( this._currentV.x * this._speedB ) + ( this._trgV.x * this._speedA );

新当前点位置 === 旧当前点位置 s + 目标点位置 (1 - s)

目标点 s > 旧当前位置 s

所以每次渲染实际上点的增量为 s * (目标点 - 当前旧位置)

原理

由于Three 的核心是 几何体(Geometry) + 材质(Material) => 网格模型(Mesh)

内置的 几何体模型 就包含了很多 Vector3 (三维向量) 本质就是点

这里我们可以在声明 Geometry 的时候通过设置 几何体分段来实现

this._geo = new THREE.PlaneGeometry( this._world._stageWidth, this._world._stageHeight, this._segW, this._segH );

// 这里的_segW 和 _segH 分别为 x轴的分段和y轴的分段
// 分别为 12 和 6
// 也就是说产生了 (12+1) * (6+1) 个 Vector3
// 我们所操控的 vertices 就是由这些 Vector3 来组成的 

Three 会自动将 Vector3 连起来, 这个我们可以通过 设置 wireframe: true 来看到

这样如果我们将 PlaneGeometry 的透明度调低,就能够看到这个互相连线心形点集

如果想要心画的更密集,可以增加分段数,但是过多的分段数将会影响性能体验

感谢

感谢 homunculus (https://homunculus.jp/ )株式会社的创意,有些东西,咱们真的暂时还没法超过人家

最后

本文章严禁用于商业行为,仅供学习参考

源码

https://github.com/NumerHero/animations

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] toJSON是个啥

    在JavaScript中, JSON.stringify()方法会寻找被序列化对象的toJSON方法. 如果对象中存在toJSON方法, 那么JSON.stri...

    腾讯IVWEB团队
  • V8是如何执行JavaScript代码的?

    众所周知,我们通过编程语言完成的程序是通过处理器运行的。但是处理器不能直接理解我们通过高级语言(如C++、Go、JavaScript等)编写的代码,只能理解机器...

    腾讯IVWEB团队
  • 腾讯云 Badjs 镜像使用入门

    “Badjs 前端脚本错误监控及跟踪解决方案” 可以有效的提升 web 前端业务质量,但部署和使用都有一定的门槛。现在我们把这个服务制作成了腾讯云镜像,使接入和...

    腾讯IVWEB团队
  • IDEA 报错Disconnected from the target VM, address:

    今天写了一个接口,运行Idea报错Disconnected from the target VM, address: '127.0.0.1:59995', tr...

    赵哥窟
  • Quartz.Net使用教程

    在项目的开发过程中,难免会遇见后需要后台处理的任务,例如定时发送邮件通知、后台处理耗时的数据处理等,这个时候你就需要Quartz.Net了。

    Edison.Ma
  • Quartz.Net使用教程

    在项目的开发过程中,难免会遇见后需要后台处理的任务,例如定时发送邮件通知、后台处理耗时的数据处理等,这个时候你就需要Quartz.Net了。

    thz
  • SpringCloud技术指南系列(七)服务注册发现之Zookeeper服务调用

    目前服务发现的解决方案有Eureka,Consul,Zookeeper等,这三个是SpringCloud官方支持的。

    品茗IT
  • SpringCloud技术指南系列(三)服务注册发现之Eureka服务调用

    目前服务发现的解决方案有Eureka,Consul,Zookeeper等,这三个是SpringCloud官方支持的。

    品茗IT
  • 【Chromium中文文档】安全浏览 -- Chrome中的警告都是怎么来的?

    安全浏览 浏览保护 启动安全浏览后,在允许内容开始加载前,所有的URL都会被检查。URL通过两个列表进行检查:恶意软件和钓鱼网站。根据匹配到的列表,我们会在一个...

    梦里茶
  • VestaCP与WHMCS整合教程-实现自助开通虚拟主机销售主机空间产品

    WHMCS与Cpanel其实一对,已经被各大主机商们用在了实践中,它们两者也是配合最好的。但是很多其它的主机面板也开发了WHMCS接口,可以实现像WHMCS+C...

    傲云

扫码关注云+社区

领取腾讯云代金券