Three特效-道路流光特效

Three特效-道路流光特效

• 概述
• 代码
• 完整代码

概述

使用Three.js来创建智慧城市场景中的道路流光动画，主要原理是使用贴图动画，效果图：

贴图素材：

代码

1. 创建道路顶点数组

// 创建顶点数组
  let points = [new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(10, 0, 0),
    new THREE.Vector3(10, 0, 10),
    new THREE.Vector3(0, 0, 10)
  ]

2. 使用CatmullRomCurve3生成曲线
   CatmullRomCurve3（点：数组，闭合：布尔值，curveType：字符串，张力：浮点）
   points – Vector3点数组
   closed –该曲线是否闭合，替换为假
   curveType –曲线的类型，交替变量向心。
   张力–曲线的张力，交替为0.5。

let curve = new THREE.CatmullRomCurve3(points) // 曲线路径

3. 使用TubeGeometry创建管道
   TubeGeometry（路径：曲线，管状段：整数，半径：浮点，径向段：整数，封闭：布尔）
   tubularSegments —整数-组成该管道的分段数，相互之间的距离为64。radius —浮点-管道的 截面，其大小为1。radialSegments—整数-- 路径-曲线-一个由基类曲线继承而来的路径。close —布尔型管道的交替是否闭合，替换为false。

// 创建管道
let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.1)

4. 创建材质并在动画函数中使用贴图位移

  let texture = new THREE.TextureLoader().load("line.png")
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
  texture.repeat.set(1, 1)
  texture.needsUpdate = true

  let material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide,
    transparent: true
  })

5. 创建mesh

let mesh = new THREE.Mesh(tubeGeometry, material);

scene.add(mesh)

完整代码

let texture = new THREE.TextureLoader().load("line.png")
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping; //每个都重复
  texture.repeat.set(1, 1)
  texture.needsUpdate = true

  let material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide,
    transparent: true
  })

  // 创建顶点数组
  let points = [new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(10, 0, 0),
    new THREE.Vector3(10, 0, 10),
    new THREE.Vector3(0, 0, 10)
  ]

  // CatmullRomCurve3创建一条平滑的三维样条曲线
  let curve = new THREE.CatmullRomCurve3(points) // 曲线路径

  // 创建管道
  let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.1)
  
  let mesh = new THREE.Mesh(tubeGeometry, material);

  scene.add(mesh)

  function animate() {
	// 一定要在此函数中调用
    if(texture) texture.offset.x -= 0.01
    requestAnimationFrame(animate)
  }

  animate()