收藏本站 关于我们

3D粒子效果在网页端实现分享(原创文章)

发布时间:2017-05-07 20:40:48   来源:PS教程   人气:0

前言:线上地址  在UP 2017预热站中,页面使用了粒子效果,点击UP2017预热站先看一下效果     KV的动画是裙边的效果,具体的表现就是

线上地址


在UP 2017预热站中,页面使用了粒子效果,点击 UP2017预热站 先看一下效果

 

\


KV的动画是裙边的效果,具体的表现就是,它有一个中心,离这个中心越远的地方,振幅越大。然后,又是周期平滑运动,正弦函数就是这种情况使用的啦,组装了一下,如下图的公式。


\


最后,分辨率,移动端本来按照习惯是要根据屏幕的devicePixelRatio来设定分辨率的


renderer.setPixelRatio(window.devicePixelRatio);


但是为了流畅度,这里舍弃了


上线


跨域的问题


原本计划周一上线,但是周五快下班的时候,遇到这个问题,很焦急。搜了一圈,在TextureLoader里面找到个选项,不为null即可,是的,即使是空字符串也OK


var loader = new THREE.TextureLoader();loader.crossOrigin='';


流畅度方面,如万技师大神所言,使用vertex shader性能可能更好,感觉好高深,有时间可以继续研究下。


by Bobs cript

本文来自PS教程网www.46PS.com,转载请注明!关键词:GUIGUI教程原创自译教程


PS教程