Threejs利用着色器编写动态飞线特效

一、导语

动态飞线特效是可视化数据地图中常见的需求之一,鼠标点击的区块作为终点,从其他区块飞线至点击区块,附带颜色变换或者结合粒子动画

二、分析

  1. 利用创建3点来构成贝塞尔曲线,形成线段
  2. 利用着色器材质来按照线段以及时间点变化来变化线段的颜色形成动画

三、上基础代码

复制代码
 // 贝塞尔曲线
    const curve = new THREE.QuadraticBezierCurve3(source, center, target)

    // 创建曲线
    const geometry = new THREE.TubeGeometry(curve, 64, 0.03)
    const tubeLineMaterial = new THREE.ShaderMaterial({
      transparent:true,
      uniforms: {
        baseColor: {
          value: new THREE.Color(baseColor)
        },
        finallyColor: {
          value: new THREE.Color(finallyColor)
        },
        time: this.lineTime
      },
      vertexShader: `
        ***
        `,
      fragmentShader: `
       ***
      `
    })

四、利用着色器来形成颜色变化的动画

具体动态效果实现可以关注课程ThreejsWeb3D开发之可视化大数据地图,更多特效尽在里面,限时折扣哦

相关推荐
DragonBallSuper8 天前
在Cesium中使用ThreeJs材质(不是场景融合哦)
webgl·材质·threejs·cesium·可视化渲染
gis分享者18 天前
学习threejs,使用MeshFaceMaterial面材质容器
threejs·facematerial·面材质容器·不同面不同材质·替代方案
gis分享者18 天前
学习threejs,使用MeshLambertMaterial漫反射材质
材质·threejs·漫反射·lambertmaterial
gis分享者1 个月前
学习threejs,Animation、Core、CustomBlendingEquation、Renderer常量汇总
threejs·core·animation·常量·renderer·equation
gis分享者1 个月前
学习threejs,使用LineBasicMaterial基础线材质
threejs·line·basicmaterial·线材质·gosper·高斯帕曲线
gis分享者1 个月前
学习threejs,使用ShaderMaterial自定义着色器材质
材质·threejs·着色器·shadermaterial
资深前端之路1 个月前
threejs 安装教程
vue.js·threejs