这几天遇到一个需求,类似这个案例:http://www.hightopo.com/demo/FaultDetection/

就是这个透明渐变呼吸光柱,看到之后就想着写个shader材质实现透明度渐变,并随着时间微弱变化就好了,但是写完之后,透明部分的渲染却出了问题。

请先无视顶部纹理,因为这不是重点,我们可以看到同一物体在不同角度下,透明部分的渲染却不一样(某些角度下,透明部分渲染为白色)

由于刚开始百度的姿势不正确加上自己的一点小疏忽,折腾了半天,最后,还是在这篇文章中找到了答案。https://www.jianshu.com/p/5807b5f69480

答案就是为透明物体设置渲染层级。

//按层级进行先后渲染
this.renderer.sortObjects = true; //设置透明物体的渲染层级(默认是0)
cylinder.renderOrder = ;

最后奉上该呼吸效果的shader:

const Gradient = {
vs:`
varying vec3 iPosition;
void main(){
iPosition = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fs:`
varying vec3 iPosition;
uniform float time;
void main(){
vec3 color = vec3(./.,./.,./.);
float height = iPosition.y + .;
float white = (distance(vec2(iPosition.x,iPosition.z),vec2(0.0))-6.0)/(6.0 * (sqrt(2.0)-1.0));
float alphax = smoothstep(0.0,1.0,white );
float alphay = smoothstep(1.0,0.0,height/25.0 + sin(time) * 0.2 );
if(height<0.1||height>29.9){
discard;
}
gl_FragColor = vec4(color +vec3(.,.,.)* alphax * 0.0008,alphay*0.7);
}
`
}

注意:

alphax是为了给x轴添加红色权重,alphay是y轴的呼吸效果

three.js 之 透明物体不能正常显示的更多相关文章

  1. CSS控制XML与通过js解析xml然后通过html显示xml中的数据

    使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...

  2. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  3. js多个物体运动的问题1

    问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 ...

  4. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  5. 使用JS在页面进行数据处理时显示等待画面

    使用js在页面进行数据处理期间显示等待画面: 在页面选择执行函数进行数据处理期间,显示等待画面. <script> function fun(the,row_id) { //测试函数 // ...

  6. Highchar.js插件提示框千分位显示为空格而不是逗号 --(2018 08/06-08/12周总结)

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  7. 基于js原生封装的点击显示完整文字

    基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...

  8. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  9. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

随机推荐

  1. MyBatis-13-缓存

    13.缓存(了解) 13.1.简介 查询 : 连接数据库,耗资源! 一次查询的结果,给他暂存在一个可以直接取到的地方!--->内存 : 缓存 我们再次查询相同数据的时候,直接走缓存,就不用走数据 ...

  2. sentinel.conf 配置

    daemonize yes logfile "/home/data/redis/redis_sentinel.log" sentinel monitor mymaster 192. ...

  3. C语言Ⅰ|博客作业07

    这个作业属于哪个课程 C语言程序设计Ⅰ 这个作业要求在哪里 https://www.cnblogs.com/tongyingjun/p/11809219.html 我在这个课程的目标是 熟练掌握swi ...

  4. 12 canvas 画布 - 基础

    二.线条的绘制和填充 在canvas中,各个图像绘制代码可以通过beginPath()和closePath()这两个函数进行包裹,主要用于分割各个画图,表示开始和结束.线条的绘制主要调用方法是move ...

  5. 1、docker简介:课程定位、是什么、能干什么、下载

    1.前提知识和定位 2.是什么 1.为什么会有docker出现 环境配置如此麻烦,换一台机器,就要重来一次,费力费时.很多人想到,能不能从根本上解决问题,软件可以带环境安装? 也就是说,安装的时候,把 ...

  6. MySql大小写配置

    新安装mysql5.7版本后,linux环境下默认是大小写敏感的.可以在客户端执行以下命令: SHOW VARIABLES LIKE '%case%' 可以看到 lower_case_table_na ...

  7. [mysql]my.cnf在哪里

    linux mysql --help|grep my.cnf 查找顺序:/etc/my.cnf /etc/mysql/my.cnf /usr/local/mysql/etc/my.cnf ~/.my. ...

  8. AcWing:238. 银河英雄传说(带权并查集)

    有一个划分为N列的星际战场,各列依次编号为1,2,…,N. 有N艘战舰,也依次编号为1,2,…,N,其中第i号战舰处于第i列. 有T条指令,每条指令格式为以下两种之一: 1.M i j,表示让第i号战 ...

  9. UVA 12501 Bulky process of bulk reduction ——(线段树成段更新)

    和普通的线段树不同的是,查询x~y的话,给出的答案是第一个值的一倍加上第二个值的两倍一直到第n个值的n倍. 思路的话,就是关于query和pushup的方法.用一个新的变量sum记录一下这个区间里面按 ...

  10. Laravel 配置

    首页 问答社区 中文文档 API Composer Github 配置说明 框架下载好了,但是想要很好的使用,可能我们还有一些东西需要知道,这就是配置.和项目有关的配置是在 app/config 文件 ...