Three.js 线的流动效果

效果图

干货

<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