three.js光带冲击波效果
three.js光带冲击波效果
效果如图所示,有三个效果,第一个是光带的高度一致,第二个光带高度不一致,第三个是冲击波效果。
shader代码如下,主要是一个阶梯函数。
vertexShader: ['varying vec3 vColor;','varying vec3 vVertexNormal;',"varying vec2 vUv;",'varying float v_pz; ','void main(){'," vUv = uv;",' v_pz = position.y; ',' vVertexNormal = normalize(normal);',' vColor = color;',' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);','}']
fragmentShader: ['uniform float boxH;','varying vec3 vVertexNormal;','varying vec3 vColor;',"varying vec2 vUv;",'varying float v_pz; ','float plot (vec2 st, float pct){','return smoothstep( pct-8.0, pct, v_pz) -','smoothstep( pct, pct+0.02, v_pz);','}','void main(){','float f1 = plot(vUv,boxH);','vec4 b1 = mix(vec4(1.0,1.0,1.0,1.0),vec4(f1,f1,f1,1.0),0.8);','gl_FragColor = mix(vec4(vColor,1.0),b1,f1);','gl_FragColor = vec4(gl_FragColor.r,gl_FragColor.g,gl_FragColor.b,0.9);',' if(vVertexNormal.y > 0.5){gl_FragColor = vec4(vColor, 1.0);}','}']
vertexShader: ['varying vec3 vColor;','varying vec3 vVertexNormal;',"varying vec2 vUv;",'varying float v_px; ','varying float v_py; ','void main(){'," vUv = uv;",' v_py = (modelViewMatrix * vec4(position, 1.0)).y; ',' v_px = (modelViewMatrix * vec4(position, 1.0)).x; ',' vVertexNormal = normalize(normal);',' vColor = color;',' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);','}']fragmentShader: ['uniform float boxH;','varying vec3 vVertexNormal;','varying vec3 vColor;',"varying vec2 vUv;",'varying float v_px; ','varying float v_py; ','float plot (float st, float pct){','return smoothstep( pct-8.0, pct, st) -','smoothstep( pct, pct+0.02, st);','}','void main(){','float d = length(vec2(v_px,v_py));',// 'float f1 = plot(d,boxH);','float f1 = plot(v_py,boxH);','vec4 b1 = mix(vec4(1.0,1.0,1.0,1.0),vec4(f1,f1,f1,1.0),0.8);','gl_FragColor = mix(vec4(vColor,1.0),b1,f1);','gl_FragColor = vec4(gl_FragColor.r,gl_FragColor.g,gl_FragColor.b,0.9);',' if(vVertexNormal.y > 0.5){gl_FragColor = vec4(vColor, 1.0);}','}']
var cubeGeo = new THREE.BoxBufferGeometry(1, h, 1);
cubeGeo.addAttribute('color', new THREE.BufferAttribute(new Float32Array(24 * 3), 3));
var colors1 = cubeGeo.attributes.color;
for (var i = 0; i < 24; i+=2) {var r = Math.random()*0.8,g=Math.random()*0.7,b=Math.random()*0.5;colors1.setXYZ(i, r, g, b);colors1.setXYZ(i+1,r, g, b);
}
var k = 2;
colors1.setXYZ(k * 4 + 0, .0, 1.0, 1.0);
colors1.setXYZ(k * 4 + 1, .0, 1.0, 1.0);
colors1.setXYZ(k * 4 + 2, .0, 1.0, 1.0);
colors1.setXYZ(k * 4 + 3, .0, 1.0, 1.0);
var material = new THREE.ShaderMaterial({uniforms: ShaderBar.uniforms,vertexShader: ShaderBar.vertexShader,fragmentShader: ShaderBar.fragmentShader,vertexColors: ShaderBar,
});
var cube = new THREE.Mesh(cubeGeo, material);
let ShaderBar = {uniforms: {boxH: { value: -25.0 },},vertexShader: ['varying vec3 vColor;','varying vec3 vVertexNormal;',"varying vec2 vUv;",'varying float v_px; ','varying float v_py; ','void main(){'," vUv = uv;",' v_py = (modelViewMatrix * vec4(position, 1.0)).y; ',' v_px = (modelViewMatrix * vec4(position, 1.0)).x; ',' vVertexNormal = normalize(normal);',' vColor = color;',' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);','}'].join('\n'),fragmentShader: ['uniform float boxH;','varying vec3 vVertexNormal;','varying vec3 vColor;',"varying vec2 vUv;",'varying float v_px; ','varying float v_py; ','float plot (float st, float pct){','return smoothstep( pct-8.0, pct, st) -','smoothstep( pct, pct+0.02, st);','}','void main(){','float d = length(vec2(v_px,v_py));',// 'float f1 = plot(d,boxH);','float f1 = plot(v_py,boxH);','vec4 b1 = mix(vec4(1.0,1.0,1.0,1.0),vec4(f1,f1,f1,1.0),0.8);','gl_FragColor = mix(vec4(vColor,1.0),b1,f1);','gl_FragColor = vec4(gl_FragColor.r,gl_FragColor.g,gl_FragColor.b,0.9);',' if(vVertexNormal.y > 0.5){gl_FragColor = vec4(vColor, 1.0);}','}'].join('\n'),
};
也可以做成立体的效果。
three.js光带冲击波效果相关推荐
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
- php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
- php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
- 《javaScript100例|04》自动播放——Js幻灯片缓冲效果
目录 效果图 示例 源码地址: 效果图 示例 <html> <head> <title>自动播放--幻灯片缓冲效果</title> <style& ...
- JS特效代码大全(十一)超炫的js图片展示效果(三)
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
- js 实现筋斗云效果(点击tab栏里面的某个地方,会有图片移动到此地方)
js 实现筋斗云效果 animate.js <!DOCTYPE html> <html lang="en"> <head><meta ch ...
- pixi.js 制作 流星雨效果
pixi.js 制作 流星雨效果 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的 ...
- 原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录 效果图 设计思路 基本架子 蒙版 放大效果图 逻辑设计 蒙版跟放大的图肯定要先隐藏 鼠标移入图片显示蒙版 鼠标移动蒙版跟着移动 处理边界情况 大图移动 小优 ...
- html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下 上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...
最新文章
- CVPR官网:仍将进行线下会议,网友:您老真在乎办会费
- Zend_Db_Table详解
- 成功的自动化测试实施的5大支柱(译)
- ASP.NET应用程序使用NLog记录日志
- Linux文件系统简介及常用命令
- ccie计算机网络英语,最新版CCIE Voice 语音方向 WOLF实验全套语音课程(含版本)...
- mysql convert报错_部署mysql版本项目问题记录
- python如何实现小车行走_[详细推导]基于EKF的小车运动模型的python编程实现
- 新编译的GDAL1.9 C/C++ C# Python版本
- 栈的链式存储框架搭建
- python读取数据库数据类型_从SQL数据库读取二进制数据(图像数据类型)并将其膨胀,Matlab vs.Python...
- C语言动态链表实现KTV点歌系统
- 微信 html avi视频无法播放,怎么把qlv格式转成mp4?腾讯视频qlv格式转换mp4方法
- 小试牛刀__GAN实战项目之mnist数据集(二)
- 统一检测和分割任务!港科大清华IDEA提出基于Transformer统一目标检测与分割框架Mask DINO,效果SOTA!...
- python中function takes exactly_Python error TypeError: function takes exactly 1 argument (5 given)
- 让图片动起来——Real_Time_Image_Animation
- 基于JavaSwing+MySQL实现的超市商品管理系统
- Android第三方开发包值高德地图SDK使用介绍,android面试基础
- java 构造方法能被继承吗_Java中构造函数可以被继承么
热门文章
- java 读取地磅读数,COM口.
- GOES-16数据下载(保姆级教程)
- div 不能占满整个页面
- 网上商城java实现毕业论文,毕业论文--基于Java的网上商城系统的设计与实现
- 130个资源网站,总有一个你用得着!!
- hw蓝队初级面试总结
- Flutter Widget原理(一)
- android apk程序,一个完整的Android应用程序(3)
- 计算机不能取代老师的英语作文,以电脑可否取代老师为题的论文
- windows Terminal显示语言修改@powershell_语言设置与update-help更新失败问题@English-US help content is available and ca