概述
使用Three.js来创建智慧城市场景中的道路流光动画,主要原理是使用贴图动画,效果图:
贴图素材:
代码
- 创建道路顶点数组
// 创建顶点数组
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生成曲线
CatmullRomCurve3(点:数组,闭合:布尔值,curveType:字符串,张力:浮点)
points – Vector3点数组
closed –该曲线是否闭合,替换为假
curveType –曲线的类型,交替变量向心。
张力–曲线的张力,交替为0.5。
let curve = new THREE.CatmullRomCurve3(points) // 曲线路径
- 使用TubeGeometry创建管道
TubeGeometry(路径:曲线,管状段:整数,半径:浮点,径向段:整数,封闭:布尔)
tubularSegments —整数-组成该管道的分段数,相互之间的距离为64。radius —浮点-管道的 截面,其大小为1。radialSegments—整数-- 路径-曲线-一个由基类曲线继承而来的路径。close —布尔型管道的交替是否闭合,替换为false。
// 创建管道
let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.1)
- 创建材质并在动画函数中使用贴图位移
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
})
- 创建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()