纯shader实现移动的箭头(three.js实战15)

最新推荐文章于 2024-04-17 15:21:58 发布
最新推荐文章于 2024-04-17 15:21:58 发布
阅读量1.7k 收藏 8
点赞数 4
分类专栏： three.js实战 文章标签： three.js ShaderMaterial 三维web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw8704149/article/details/120984047
版权

纯shader实现移动的箭头

1. demo效果

2. 实现要点

2.1 绘制箭头

首先绘制矩形，然后将两个矩形合并生成一个箭头，然后循环生成五个箭头作为底色，单独绘制一个白色箭头作为当前高亮元素，使白色箭头不断切换到底色中的位置，模拟流动效果

 float band(float t,float start,float end,float blur){
   float step1 = smoothstep(start-blur,start+blur,t);
   float step2 = 1.- smoothstep(end-blur,end+blur,t);
   return step1*step2;
 }

 //绘制矩形
 float rect(vec2 uv,float left,float right,float bottom,float top,float blur){
   float band1 = band(uv.x,left,right,blur);
   float band2 = band(uv.y,bottom,top,blur);  
   return  band1*band2;
 }

 //绘制单个箭头
 vec3 oneArrow(vec2 st,vec3 lineColor,float width,float blur){
   vec3 color = vec3(0.0);
   vec2 uv = st;
   float diff = 0.01;
   st = rotate2d( -PI/4.0) * st;
   st.y += sin(PI/4.0)*width + diff;
   float pct = rect(st,-0.3,0.0,-width,width,blur);
   color += lineColor*pct;

   uv = rotate2d( PI/4.0) * uv;
   uv.y -= sin(PI/4.0)*width + diff;
   pct = rect(uv,-0.3,0.0,-width,width,blur);
   color = max(color,lineColor*pct);
   return color;
 }

 //绘制底色箭头5个
 vec3 drawArrows(vec2 st){
   vec3 color = vec3(0.0);
   vec3 lineColor = vec3(0.17,0.97,1.0);
   st.x += 0.4;
   for(float i = 0.0;i < 5.0;i++){
     st.x -= 0.2;
     color += oneArrow(st,lineColor,0.04,0.004);
   }

   return color;
 }

 //绘制白色流动箭头
 vec3 drawLightArrows(vec2 st,float speed){
   vec3 color = vec3(0.0);
   vec3 lineColor = vec3(1.0);
   st.x += 0.2;

   // 依据时间取模5,5个数据一个循环
   float flag = floor(mod(u_time*speed,5.0));
   //坐标右移[1~5]个单位
   st.x -= flag*0.2;
   color += oneArrow(st,lineColor,0.04,0.009);
   return color;
 }

2.2 绘制不同方向流动箭头

已经制作了向右流动的箭头，使用within函数将屏幕坐标分为四块，每一块重新映射为-1到1，在使用旋转函数分别绘制其他三个方向的流动箭头即可

//绘制不同方向流动箭头：使用type匹配，默认-向右;2.0-向上;3.0-向下;4.0-向左
vec3 flowingArrows(vec2 st,float type,float speed){

  if(type==2.0){
    st = rotate2d( PI/2.0) * st;
  }
  if(type==3.0){
    st = rotate2d( -PI/2.0) * st;
  }
  if(type==4.0){
    st = rotate2d( PI) * st;
  }
  
  vec3 color = vec3(0.0);

  color += drawArrows(st);
  color = max(color,drawLightArrows(st,speed));

  return color;
}

// 将a-b范围的t重新映射到c-d范围
float remap(float a, float b, float c, float d, float t)
{
  return sat(((t-a)/(b-a))*(d-c) + c);  
}

//将leftBottom和rightTop框定的范围重新映射到-1,1
vec2 within(vec2 uv,vec2 leftBottom,vec2 rightTop){
  uv.x = remap(leftBottom.x, rightTop.x, -1.0, 1.0, uv.x);
  uv.y = remap(leftBottom.y, rightTop.y, -1.0, 1.0, uv.y);
  return uv;
}


void main( void ) {

  //转换为窗口坐标[0,1],坐标原点在屏幕左下角
  //vec2 st = gl_FragCoord.xy/u_resolution.y;
  //窗口坐标调整为[-1,1],坐标原点在屏幕中心
  vec2 st = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;
  vec2 uv = st;
  vec3 color = vec3(1.0);


 uv = within(st,vec2(-1.0,-1.0),vec2(0.0,0.0));
 color *=flowingArrows(uv,4.0,3.0);

 uv = within(st,vec2(-1.0,-0.0),vec2(0.0,1.0));
 color = max(color,flowingArrows(uv,2.0,1.0));

 uv = within(st,vec2(-0.0,-0.0),vec2(1.0,1.0));
 color = max(color,flowingArrows(uv,3.0,5.0));


 uv = within(st,vec2(0.0,-1.0),vec2(1.0,0.0));
 color = max(color,flowingArrows(uv,1.0,8.0));

  gl_FragColor = vec4(color,1.0);
}

3. demo代码

<body>
  <div id="container"></div>
  <script type="text/javascript" src="../three/build/three.js"></script>

  <script>
    var container;
    var camera, scene, planeMesh, renderer;
    var clock = new THREE.Clock(); // 创建THREE.Clock对象
    var uniforms = {
      u_resolution: {
        type: "v2",
        value: new THREE.Vector2()
      },
      radius: {
        type: "f",
        value: 0.5
      },
      u_time: {
        type: "f",
        value: 0.5
      }
    };
    var vertexShader = `
    attribute vec3 position;
    void main() {
      gl_Position = vec4( position, 1.0 );
    }
    `
    var fragmentShader = `
    #define PI 3.1415926535897932384626433832795
    #define sat(x) clamp(x, -1., 1.)
    #ifdef GL_ES
    precision mediump float;
    #endif
    uniform vec2 u_resolution;
    uniform float u_time;

    //二维旋转矩阵
    mat2 rotate2d(float _angle){
      return mat2(cos(_angle),-sin(_angle),sin(_angle),cos(_angle));
    }
    
    float band(float t,float start,float end,float blur){
      float step1 = smoothstep(start-blur,start+blur,t);
      float step2 = 1.- smoothstep(end-blur,end+blur,t);
      return step1*step2;
    }

    //绘制矩形
    float rect(vec2 uv,float left,float right,float bottom,float top,float blur){
      float band1 = band(uv.x,left,right,blur);
      float band2 = band(uv.y,bottom,top,blur);  
      return  band1*band2;
    }

    //绘制单个箭头
    vec3 oneArrow(vec2 st,vec3 lineColor,float width,float blur){
      vec3 color = vec3(0.0);
      vec2 uv = st;
      float diff = 0.01;
      st = rotate2d( -PI/4.0) * st;
      st.y += sin(PI/4.0)*width + diff;
      float pct = rect(st,-0.3,0.0,-width,width,blur);
      color += lineColor*pct;

      uv = rotate2d( PI/4.0) * uv;
      uv.y -= sin(PI/4.0)*width + diff;
      pct = rect(uv,-0.3,0.0,-width,width,blur);
      color = max(color,lineColor*pct);
      return color;
    }

    //绘制底色箭头5个
    vec3 drawArrows(vec2 st){
      vec3 color = vec3(0.0);
      vec3 lineColor = vec3(0.17,0.97,1.0);
      st.x += 0.4;
      for(float i = 0.0;i < 5.0;i++){
        st.x -= 0.2;
        color += oneArrow(st,lineColor,0.04,0.004);
      }

      return color;
    }

    //绘制白色流动箭头
    vec3 drawLightArrows(vec2 st,float speed){
      vec3 color = vec3(0.0);
      vec3 lineColor = vec3(1.0);
      st.x += 0.2;

      // 依据时间取模5,5个数据一个循环
      float flag = floor(mod(u_time*speed,5.0));
      //坐标右移[1~5]个单位
      st.x -= flag*0.2;
      color += oneArrow(st,lineColor,0.04,0.009);
      return color;
    }

    //绘制不同方向流动箭头：使用type匹配，默认-向右;2.0-向上;3.0-向下;4.0-向左
    vec3 flowingArrows(vec2 st,float type,float speed){
 
      if(type==2.0){
        st = rotate2d( PI/2.0) * st;
      }
      if(type==3.0){
        st = rotate2d( -PI/2.0) * st;
      }
      if(type==4.0){
        st = rotate2d( PI) * st;
      }
      
      vec3 color = vec3(0.0);

      color += drawArrows(st);
      color = max(color,drawLightArrows(st,speed));

      return color;
    }

    // 将a-b范围的t重新映射到c-d范围
    float remap(float a, float b, float c, float d, float t)
    {
      return sat(((t-a)/(b-a))*(d-c) + c);  
    }

    //将leftBottom和rightTop框定的范围重新映射到-1,1
    vec2 within(vec2 uv,vec2 leftBottom,vec2 rightTop){
      uv.x = remap(leftBottom.x, rightTop.x, -1.0, 1.0, uv.x);
      uv.y = remap(leftBottom.y, rightTop.y, -1.0, 1.0, uv.y);
      return uv;
    }


    void main( void ) {

      //转换为窗口坐标[0,1],坐标原点在屏幕左下角
      //vec2 st = gl_FragCoord.xy/u_resolution.y;
      //窗口坐标调整为[-1,1],坐标原点在屏幕中心
      vec2 st = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;
      vec2 uv = st;
      vec3 color = vec3(1.0);
 

     uv = within(st,vec2(-1.0,-1.0),vec2(0.0,0.0));
     color *=flowingArrows(uv,4.0,3.0);

     uv = within(st,vec2(-1.0,-0.0),vec2(0.0,1.0));
     color = max(color,flowingArrows(uv,2.0,1.0));

     uv = within(st,vec2(-0.0,-0.0),vec2(1.0,1.0));
     color = max(color,flowingArrows(uv,3.0,5.0));


     uv = within(st,vec2(0.0,-1.0),vec2(1.0,0.0));
     color = max(color,flowingArrows(uv,1.0,8.0));

      gl_FragColor = vec4(color,1.0);
    }
    `
    init();
    animate();

    function init() {
      container = document.getElementById('container');

      camera = new THREE.Camera();

      scene = new THREE.Scene();


      var geometry = new THREE.PlaneBufferGeometry(2, 2);

      var material = new THREE.RawShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
      });

      planeMesh = new THREE.Mesh(geometry, material);


      scene.add(planeMesh);


      renderer = new THREE.WebGLRenderer();
      renderer.setSize(1000, 800); //设置窗口大小800px*800px

      container.appendChild(renderer.domElement);
      uniforms.u_resolution.value.x = renderer.domElement.width;
      uniforms.u_resolution.value.y = renderer.domElement.height;

    }


    function animate() {
      requestAnimationFrame(animate);

      const elapsed = clock.getElapsedTime();

      planeMesh.material.uniforms.u_time.value = clock.getElapsedTime();

      renderer.render(scene, camera);
    }
  </script>
</body>
点燃火柴
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js - 设置纹理offset偏移模拟箭头线性流动
ithanmang
10-30 7271
1、效果 通过循环 texture的offset属性值，可以实现，类似字幕的运动，以及箭头的线性流动等效果 2、示例地址 https://ithanmang.gitee.io/threejs/home/201810/20181030/01-texture-offset偏移.html 3、相关属性 该示例使用的是平面网格，然后加上材质贴图，设置纹理重复覆盖THREE.RepeatWrapping 然...
既有方向又会动的线，包你学会制作按箭头方向流动的线(three.js实战3)
点燃火柴的博客
06-13 5470
制作按箭头方向流动的线1.demo效果2. 实现思路3. 实现要点3.1 创建箭头流动线3.2 创建流动线3.3 更新纹理偏移4. demo代码 1.demo效果 2. 实现思路 实现思路比较简单，使用纹理材质创建网格对象，然后在render函数中改变纹理的偏移量（texture.offset.x），实现流动的效果 3. 实现要点 3.1 创建箭头流动线 创建长条状平面 使用THREE.PlaneGeometry类创建一个长条状平面，用来填充箭头纹理 创建纹理材质 使用TextureLoade
threejs 根据两个向量创建箭头
最新发布
qq_40596257的博客
04-17 208
threejs 根据两个向量创建箭头
Threejs透明管道及流动液体效果
05-10
使用相同的路径创建两条管道，一条用于透明管道，一条作为管道内流动的液体。 需要注意的是，透明管道材质需要设置depthWrite=false;否则内部流动的液体会被遮挡无法显示。  
ThreeJs技术交流（2）——箭头、标语等流动特效
homula123的博客
11-16 6788
ThreeJs闲暇论——箭头、标语等流动特效写在前面效果演示如何实现结束语 写在前面 好久没写文章了，最近趁休息在家无聊有时间再来写点东西。前段时间有朋友问我一个效果怎么做。他也是看了CSDN上一位大神发的3D智能机房的示例，其中有一个演示如下： 图片来源于https://blog.csdn.net/ALLENJIAO/article/details/77775043。原作中展示的是空调风向的流...
Three.js使用shader根据高度渐变染色
wz122330的博客
08-30 3365
在项目中遇到一个对地形图染色的需求，根据高度对地形进行染色。以下测试代码为学习痕迹。
Three.js - 实现地图边界炫光路径效果
程序员成长指北
02-27 3399
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群简介本节主要使用多个粒子在地图边界，根据时间在不同的位置发光，实现一条发光的线在边界上...
Three.js实战常用技巧课程
03-31
课程分享——Three.js实战常用技巧，完整版视频课程下载。 课程概述 一、适合有一定的three.js基础学员学习。 二、每节课都有对应的案例源码(有注释) 三、本课程主要针对three.js实际开发中常用的一些技巧进行讲解...
Three.js shader 城市 雷达 扫描 波动 扩散效果
11-05
总结来说，要实现"Three.js shader 城市 雷达 扫描 波动 扩散效果"，你需要掌握Shader编程、Three.js库的使用、WebGL基础知识，以及理解3D空间中的运动和视觉效果的模拟。通过不断实践和实验，你可以创造出令人惊叹...
跳动的心（three.js,shader）
01-23
标题中的“跳动的心（three.js,shader）”是一个基于WebGL图形库three.js和着色器(shader)技术实现的互动艺术项目。这个项目的核心是创建一个视觉上呈现出心脏跳动效果的3D模型，利用了JavaScript编程语言以及webGL...
html5+three.js彩色液态流动背景动画特效
06-11
html5+three.js制作一款漂亮的彩色液态流动背景动画特效，流动的液体动画效果，看上去很有潮流时尚感。
js画直线带箭头哦
10-11
js画直线带箭头哦，有演示，不满意可以留言我再写哦
使用THREE.JS开发的下雨效果
07-05
THREE.JS是一个基于WebGL的JavaScript库，用于在浏览器中创建三维图形和动画。它提供了丰富的API，使得开发者能够方便地构建复杂的3D场景，包括光照、材质、几何体等元素。在这个“使用THREE.JS开发的下雨效果”项目...
three.js的shader应用
07-14
**标题解析：** "three.js的shader应用" 这个标题明确指出了我们要探讨的是如何在three.js这个JavaScript 3D库中运用shader技术。Shader是计算机图形学中用于处理图形渲染的重要部分，它们允许我们在GPU上执行自定义...
Threejs——Helper
淡定九号的博客
12-07 1258
threejs helper
基于ThreeJS实现箭头单向移动
知屋安砖
09-11 3136
基于ThreeJS实现箭头单向移动示例描述与操作指南示例效果展示实现方式 示例描述与操作指南 当前示例用于展示在三维界面中如何设置箭头沿某一特定方向移动。 示例效果展示 实现方式 箭头沿y轴移动 // 箭头移动函数 const moveArrows = () => { let posSrc = {pos: 0}; // 初始化一个动画需要更新的值，tweenjs使用 // 每次更新...
threejs 生成加宽度线和动态箭头线
weixin_39481659的博客
06-10 5547
threejs 生成加宽度线和动态箭头线
threejs+shader 曲线点运动,飞线运动
榴莲不好吃的专栏
08-04 2368
threejs+shader 曲线点运动,飞线运动
three.js烟雾shader
09-12
### 回答1： 下面是一个简单的 three.js 烟雾 shader 示例，可以作为参考： ``` const smokeVertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`; const smokeFragmentShader = ` uniform vec3 color; uniform float opacity; varying vec3 vWorldPosition; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep(100.0, 300.0, depth); gl_FragColor = vec4(color, opacity) * fogFactor; }`; const smokeMaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(0xaaaaaa) }, opacity: { value: 0.5 } }, vertexShader: smokeVertexShader, fragmentShader: smokeFragmentShader, transparent: true }); const smokeGeometry = new THREE.PlaneGeometry(1000, 1000); const smokeMesh = new THREE.Mesh(smokeGeometry, smokeMaterial); smokeMesh.position.set(0, 0, -500); scene.add(smokeMesh); ``` 这个 shader 通过计算深度值来模拟烟雾效果。在顶点着色器中，我们通过将顶点位置乘以模型矩阵得到世界坐标系下的位置，然后将它传递给片元着色器。在片元着色器中，我们计算每个像素的深度值，并根据深度值计算烟雾因子，最后将它乘以颜色和不透明度来得到最终的颜色。 你可以根据需要调整烟雾的颜色、不透明度、大小和位置。 ### 回答2： three.js是一个功能强大的JavaScript库，它提供了一套易于使用的工具和功能，用于在Web上创建交互式的3D图形。其中一个功能是烟雾shader，它允许我们在我们的场景中添加逼真的烟雾效果。 three.js的烟雾shader通过在场景中创建一个气体云层，并向其应用特定的效果来实现。这个效果通常是通过使用Perlin噪声来模拟烟雾的动态外观的。这种噪声会根据时间和空间的变化来生成一个连续的、无缝的云状图案。 通过使用three.js的ShaderMaterial和自定义着色器，我们可以将烟雾效果应用于物体或整个场景。使用这个材质，我们可以设置烟雾的颜色、透明度、密度等参数，以实现我们想要的效果。 烟雾shader可以使我们的场景更加生动和逼真。它可以在火焰、蒸汽机、爆炸等各种场景中添加真实的烟雾效果。在游戏开发、虚拟现实和建筑可视化等领域，烟雾shader都可以发挥重要的作用，提高用户体验和视觉效果。 尽管实现烟雾shader可能需要一些编程和图形学的知识，但由于three.js库已经提供了许多封装好的功能和模块，我们可以轻松地集成和使用它们。此外，three.js的官方文档和社区也提供了大量的教程和示例代码，帮助我们快速上手和理解相关概念。 总的来说，three.js的烟雾shader是一个强大的工具，它为我们提供了在Web上创建逼真烟雾效果的能力。它可以为我们的场景增加动态和真实感，提高用户体验和视觉效果。对于对3D图形感兴趣的开发者来说，three.js的烟雾shader是一个不可忽视的资源。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值