效果图

干货
<template>
<div id="container"></div>
</template>
<script>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
let textureTest = new THREE.TextureLoader().load('./static/img.png'); // 流动材质 找一个酷炫点的图~
export default {
name: 'lineFloating',
data() {
return {}
},
mounted() {
var container = document.getElementById('container');
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, .1, 1000);
camera.position.set(10, 10, 10);
var gridHelper = new THREE.GridHelper(20);
scene.add(gridHelper);
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
var controls = new OrbitControls(camera, renderer.domElement);
// 光源
scene.add(new THREE.AmbientLight(0xffffff));
// 流动线
let arr = [[[0, 0, 8], [8, 8, 8]], [[10, 10, 0], [1, 1, 0], [7, 5, 0]]];
setCurve(arr, 0.2, textureTest);
function setCurve(arr, radius = 3, texture = textureTest) {
let curveObj = {}, points;
let tubeMaterial, tubeGeometry, tubeArr = [];
for (let i = 0; i < arr.length; i++) {
points = [];
for (let j = 0; j < arr[i].length; j++) {
points.push(new THREE.Vector3(arr[i][j][0], arr[i][j][1], arr[i][j][2]));
}
let curve = curveObj['curve-' + i];
curve = new THREE.CatmullRomCurve3(points, false); /* 是否闭合 */
tubeGeometry = new THREE.TubeGeometry(curve, 10, radius, 3, false); // path, tubularSegments, radius, radiusSegments, closed
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
tubeMaterial = new THREE.MeshPhongMaterial({
map: texture,
transparent: true
});
tubeArr[i] = new THREE.Mesh(tubeGeometry, tubeMaterial);
}
scene.add(...tubeArr);
}
render();
function render() {
textureTest.offset.x -= 0.06; // 设置偏移
controls.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
}
}
</script>
<style lang="less">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
font-family: Lato, sans-serif;
width: 100%;
height: 100%;
background-color: #dedede;
color: #202020;
padding: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
#container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border: 1px solid #ff0000;
}
</style>
另外一个流动线效果的库
https://github.com/spite/THREE.MeshLine