Three.js - 实现地图边界炫光路径效果

发表于 2年以前 | 总阅读数：1091 次

简介

本节主要使用多个粒子在地图边界，根据时间在不同的位置发光，实现一条发光的线在边界上移动。大家可以先看下效果：

light

实现思路

获取地图边界「GeoJSON数据」。
根据数据创建地图线框，在每个数据点上创建全透明粒子。
通过requestAnimationFrame()函数，修改不同位置粒子的透明度。

实现

基础模版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>学习</title>
  </head>
  <body>
    <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script type="module">
      import * as THREE from './file/three.js-dev/build/three.module.js'
      import { OrbitControls } from './file/three.js-dev/examples/jsm/controls/OrbitControls.js'

      const canvas = document.querySelector('#c2d')
      // 渲染器
      const renderer = new THREE.WebGLRenderer({ canvas })

      const fov = 40 // 视野范围
      const aspect = 2 // 相机默认值 画布的宽高比
      const near = 0.1 // 近平面
      const far = 10000 // 远平面
      // 透视投影相机
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
      camera.position.set(0, 100, 500)
      camera.lookAt(0, 0, 0)
      // 控制相机
      const controls = new OrbitControls(camera, canvas)
      controls.update()

      // 场景
      const scene = new THREE.Scene()

      // 渲染
      function render() {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
      }
      requestAnimationFrame(render)
    </script>
  </body>
</html>

加载地图数据，绘制地图、自定义几何体

绘制中国地图

  const lines = []
  const geometry = new THREE.BufferGeometry()
  let positions = null
  let opacitys = null
  // 以北京为中心 修改坐标
  const projection = d3.geoMercator().center([116.412318, 39.909843]).translate([0, 0])

创建变量lines保存边界点数据。
创建BufferGeometry()几何体，绘制透明点。

绘制线条公用方法，并把边界点信息放入lines中。

  let indexBol = true
  /**
   * 边框 图形绘制
   * @param polygon 多边形 点数组
   * @param color 材质颜色
   * */
  function lineDraw(polygon, color) {
    const lineGeometry = new THREE.BufferGeometry()
    const pointsArray = new Array()
    polygon.forEach((row) => {
      const [x, y] = projection(row)
      // 创建三维点
      pointsArray.push(new THREE.Vector3(x, -y, 0))

      if (indexBol) {
        lines.push([x, -y, 0])
      }
    })
    indexBol = false
    // 放入多个点
    lineGeometry.setFromPoints(pointsArray)

    const lineMaterial = new THREE.LineBasicMaterial({
      color: color
    })
    return new THREE.Line(lineGeometry, lineMaterial)
  }

这里使用indexBol变量，是因为我们只需要地图数据第一个数组中的边界点数据。

加载地图数据，并创建自定义几何体。

  const loader = new THREE.FileLoader()
  loader.load('./file/100000.json', (data) => {
    const jsondata = JSON.parse(data)

    // 中国边界
    const feature = jsondata.features[0]
    const province = new THREE.Object3D()
    province.properties = feature.properties.name
    // 点数据
    const coordinates = feature.geometry.coordinates

    coordinates.forEach((coordinate) => {
      // coordinate 多边形数据
      coordinate.forEach((rows) => {
        const line = lineDraw(rows, 0xffffff)
        province.add(line)
      })
    })

    positions = new Float32Array(lines.flat(1))
    // 设置顶点
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
    // 设置 粒子透明度为 0
    opacitys = new Float32Array(positions.length).map(() => 0)
    geometry.setAttribute('aOpacity', new THREE.BufferAttribute(opacitys, 1))

    scene.add(province)
  })

解析地图数据，使用lineDraw()函数绘制线条和保存边界信息。
添加几何体顶点信息(positions)和每个顶点的透明度信息(opacitys)

image.png

使用着色器材质和点网格绘制透明点

创建控制变量。

  // 控制 颜色和粒子大小
  const params = {
    pointSize: 2.0,
    pointColor: '#4ec0e9'
  }

定义顶点着色器

  const vertexShader = `
    attribute float aOpacity;
    uniform float uSize;
    varying float vOpacity;

    void main(){
        gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0);
        gl_PointSize = uSize;

        vOpacity=aOpacity;
    }
    `

three.js中的变量。projectionMatrix是投影变换矩阵，modelViewMatrix是相机坐标系的变换矩阵，position顶点坐标。
通过uniform全局变量获取外部设置uSize，设置粒子大小。
通过varying变量把顶点对应的透明度aOpacity传入片元着色器。

定义片元着色器

  const fragmentShader = `
    varying float vOpacity;
    uniform vec3 uColor;

    float invert(float n){
        return 1.-n;
    }

    void main(){
      if(vOpacity <=0.2){
          discard;
      }
      vec2 uv=vec2(gl_PointCoord.x,invert(gl_PointCoord.y));
      vec2 cUv=2.*uv-1.;
      vec4 color=vec4(1./length(cUv));
      color*=vOpacity;
      color.rgb*=uColor;

      gl_FragColor=color;
    }
    `

通过uniform全局变量获取外部设置uColor，基础颜色。
通过varying变量获取透明度vOpacity。
设置透明度小于0.2的片元不执行。
根据算法获取当前顶点要展示的颜色，这个算法是网上找的，实现发光效果。

创建着色器材质，放入点材质中绘制透明点。

  const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    transparent: true, // 设置透明
    uniforms: {
      uSize: {
        value: params.pointSize
      },
      uColor: {
        value: new THREE.Color(params.pointColor)
      }
    }
  })
  const points = new THREE.Points(geometry, material)
  scene.add(points)

放入顶点和片元着色器，设置uniforms全局变量。
创建Points()网格，绘制透明点，加入场景。

现在所有点都是透明的和上一张图无区别。

修改粒子透明度形成炫光效果

  let currentPos = 0
  let pointSpeed = 20 // 速度
  // 渲染
  function render() {
    if (points && geometry.attributes.position) {
      currentPos += pointSpeed
      for (let i = 0; i < pointSpeed; i++) {
        opacitys[(currentPos - i) % lines.length] = 0
      }

      for (let i = 0; i < 200; i++) {
        opacitys[(currentPos + i) % lines.length] = i / 50 > 2 ? 2 : i / 50
      }
      geometry.attributes.aOpacity.needsUpdate = true
    }

    renderer.render(scene, camera)
    requestAnimationFrame(render)
  }

两个循环，第一个清除上一次粒子透明度的修改。第二个设置炫光长度和修改粒子的透明度。
.needsUpdate必须设置，设置后着色器中的顶点信息才会修改。

1.gif

本文由哈喽比特于2年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/B9ywK-0I_WhU0SAG3C9uDg

刘强东夫妇：“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。

发布于：1年以前 | 808次阅读 | 详细内容 »

博主曝三大运营商，将集体采购百万台华为Mate60系列

日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于：1年以前 | 770次阅读 | 详细内容 »

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于：1年以前 | 756次阅读 | 详细内容 »

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。

发布于：1年以前 | 648次阅读 | 详细内容 »

威马CDO：中国每百户家庭仅17户有车

日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。

发布于：1年以前 | 589次阅读 | 详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。

发布于：1年以前 | 449次阅读 | 详细内容 »

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。

发布于：1年以前 | 446次阅读 | 详细内容 »

千万级抖音网红秀才账号被封禁

9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...

发布于：1年以前 | 445次阅读 | 详细内容 »