threejs路径流动效果

在网上看见这个地面的效果，想仿照做出来。

试了好久有两种方法。

可以看看两个效果对比图

两种方法都可以做但是第二种方法会有图片模糊效果。

第一种方法的主要思路：使用插件three.path

第二种方法是用的管道

最主要的是图片不要选有背景的图片，选背景透明的图片贴图才可以只显示箭头。

我的图片是：

可以下载使用。

第一种方法：

1、安装插件

npm install three.path@1.0.1 

2、主要代码

 var textureLoader = new THREE.TextureLoader();const texture = textureLoader.load('./bbb.jpeg'); //./ZS箭头.svg  ./arrow.jpg// 线路径var points = [new THREE.Vector3(-15, 0, 15),new THREE.Vector3(-15, 0, -15),new THREE.Vector3(15, 0, -15),new THREE.Vector3(15, 0, 15)]; //两种方法// 设定好的坐标//    const pointArr = [//         121.78093686863522, 0, -4.603376409073572,//         121.81339509799925, 0, -1.0333897782644268,//         88.18838269349277, 0, -1.0333897782644268,//         88.18838269349277, 0, 63.55900780432629,//         87.16531645200739, 0, 68.04794277498671,//         83.06620769318347, 0, 70.98695971872945,//         -1.130897005741467, 0, 70.34667258938468,//         -5.231039038271652, 0, 68.42613876317515,//         -7.758389327064392, 0, 64.62409029746112,//         -7.758389327064392, 0, 46.44123345882236,//         -114.62656106119152, 0, 46.44123345882236,//         -119.82497669490243, 0, 44.45968445743292,//         -121.94606515130032, 0, 39.4725534305143,//         -121.94606515130032, 0, -42.76532835182727,//         -120.11831411582477, 0, -48.53850237391983,//         -116.83579669695663, 0, -49.908124030849784,//         78.54313968215955, 0, -49.908124030849784,//         85.10694214192533, 0, -50.16532666595109,//         89.88557886450108, 0, -55.064547179368375,//         89.88557886450108, 0, -93.93831946321087,//         91.96632492268847, 0, -98.37744840781204,//         95.1920071430169, 0, -100.1746448114269,//         152.736779207395, 0, -100.1746448114269,//         157.30932898344975, 0, -96.64823157224308,//         160.4735065923067, 0, -99.846029526487,//         302.4743190232127, 0, -99.846029526487,//         307.28097694970387, 0, -98.29435216740127,//         309.4249527931002, 0, -93.79194193938966,//         317.1439029555364, 0, -10.678271186410282,//         322.7256435681537, 0, 64.82345541146658,//         321.948957384584, 0, 69.41475711676998,//         269.58743740380316, 0, 71.05051147709406,//         163.1264743368946, 0, 71.05051147709406,//         159.53952961773413, 0, 68.13337162416227,//         159.53952961773413, 0, -4.677615417615058,//         124.42066238999215, 0, -4.677615417615058,//     ];//     // 将数组转为坐标数组//    const points = [];//     // 每3个元素组成一个坐标//     for (let i = 0; i < pointArr.length; i += 3) {//         // 将数组中的三个元素，分别作为坐标的x, y, z//         points.push(new THREE.Vector3(pointArr[i], pointArr[i + 1], pointArr[i + 2]));//     }var up = new THREE.Vector3(0, 1, 0);// 创建路线点列表var pathPointList = new PathPointList();pathPointList.set(points, 0.5, 10, up, false);// 创建 geometryvar geometry = new PathGeometry();geometry.update(pathPointList, {width: 1,arrow: false});// 创建材质var material = new THREE.MeshPhongMaterial({color: 0xffffff,depthWrite: true,transparent: true,opacity: 1,side: THREE.DoubleSide,map: texture,});var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);// 动画循环
const animateRender = () => {if (texture) {texture.offset.x -= 0.03;texture.repeat.x = 0.4;}requestAnimationFrame(animateRender);renderer.value.render(scene, camera.value)
};

第二种方法不需要插件

主要代码

var texture = new THREE.TextureLoader().load('./bbb.jpeg', function (texture) {texture.wrapS = texture.wrapT = THREE.RepeatWrapping;texture.anisotropy = renderer.value.capabilities.getMaxAnisotropy();
});var pointsArr = [[42, 0, 10],[21, 0, 10],[21, 0, 1],[-3, 0, 1],[-3, 0, -18],[-10, 0, -18],[-10, 0, 5],[1, 0, 5],[1, 0, 24],[-27, 0, 24],[-27, 0, 18],[-46, 0, 19],[-46, 0, -4],[-25, 0, -6],[-25, 0, -19],[-35, 0, -20],[-35, 0, -26],[-30, 0, -30],[3, 0, -30]];var curve = createPath(pointsArr)var tubeGeometry = new THREE.TubeGeometry(curve, 1000, 0.8, 100, false);// console.log(tubeGeometry);// var tubeGeometry = new THREE.PlaneGeometry(curve, 2);// 设置阵列模式为 RepeatWrappingtexture.wrapS = THREE.RepeatWrappingtexture.wrapT = THREE.RepeatWrappingtexture.repeat.x = 50;texture.repeat.y = 1;texture.offset.y = 0.75;// texture.scale.y = 0var tubeMaterial = new THREE.MeshPhongMaterial({map: texture,transparent: true,color: 0x47d8fa,side: THREE.DoubleSide,// opacity: 0.4,});// 设置数组材质对象作为网格模型材质参数var mesh = new THREE.Mesh(tubeGeometry, tubeMaterial); //网格模型对象Mesh// mesh.position.y = 2;// mesh.rotateY(0);mesh.scale.y = 0.0000001;scene.add(mesh); //网格模型添加到场景中
// 动画循环
const animateRender = () => {texture.offset.x -= 0.01requestAnimationFrame(animateRender);renderer.value.render(scene, camera.value)
};

我相信已经入门的人可以看懂我的代码！！！