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开发之可视化大数据地图,更多特效尽在里面,限时折扣哦

相关推荐
gis分享者7 天前
学习threejs,打造交互式花卉生成器
交互·threejs·生成·shadermaterial·花卉·planegeometry
患得患失94910 天前
【ThreeJs】【性能优化】从渲染底层到业务逻辑的系统性提速方案
优化·threejs
接着奏乐接着舞。13 天前
3D地球可视化教程 - 第3篇:地球动画与相机控制
前端·vue.js·3d·threejs
gis分享者13 天前
学习threejs,实现粒子化交互文字
threejs·文字·shadermaterial·粒子化·icosahedron
患得患失9491 个月前
【Threejs】【工具类】Raycaster实现 3D 交互(如鼠标拾取、碰撞检测)的核心工具
3d·交互·threejs·raycaster
gis分享者1 个月前
学习threejs,使用自定义GLSL 着色器,实现水面、粒子特效
threejs·着色器·glsl·粒子·shadermaterial·unrealbloompass·水面
陶甜也1 个月前
threeJS 实现开花的效果
前端·vue·blender·threejs
二川bro2 个月前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
哈哈地图2 个月前
three.js手机端的4种旋转方式
threejs·手机交互
咔咔一顿操作2 个月前
第五章 vue3 + Three.js 实现高级镜面反射效果案例解析
前端·javascript·vue.js·人工智能·信息可视化·threejs