geometry.attributes.position

index101
let canvas, scene, camera, renderer, controls;

const background = `#${new THREE.Color().setHSL(Math.random(), 0.5, 0.8).getHexString()}`;

function createEnvironment() {
    canvas = document.querySelector("canvas");

    // scene
    scene = new THREE.Scene();
    scene.fog = new THREE.Fog(background, 0.0025, 200);

    // camera
    camera = new THREE.PerspectiveCamera(40,canvas.clientWidth / canvas.clientHeight,0.1,10000);
    camera.position.set(0, 0, 60);
    camera.lookAt(scene.position);

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        canvas
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    renderer.setClearColor(background);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    // controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.2;
    controls.autoRotate = true;

    // lihgt
    const ambientLight = new THREE.AmbientLight("#ffffff", 0.1);
    scene.add(ambientLight);

    const light = new THREE.SpotLight(0xffffff, 2, 80, Math.PI * 0.25, 1, 2);
    light.position.set(0, 40, 0);
    light.castShadow = true;
    light.shadow.mapSize.width = 1024;
    light.shadow.mapSize.height = 1024;
    light.shadow.camera.near = 0.5;
    light.shadow.camera.far = 31;
    scene.add(light);
}

function g(value) {
    const floor = -value;
    return floor + Math.random() * value * 2;
}

function r() {
    return new THREE.Vector3(g(10), g(10), g(10));
}

function animateLine(i) {
    const mesh = meshes[i];
    const offset = 12;
    var o = {
        t: -offset
    };
    anime({
        targets: o,
        t: mesh.geometry.attributes.position.count + offset,
        duration: 4000,
        easing: "easeInOutQuad",
        update: function () {
            let s = o.t.toFixed(0) * 4;
            s = s - s % 12;
            mesh.geometry.setDrawRange(s, s + offset);
        }
    });
}

function render() {
    renderer.render(scene, camera);
    controls.update();
    requestAnimationFrame(render);
}

createEnvironment();

const meshes = [];
for (let i = 0; i < 100; i += 1) {
    const curve = new THREE.CatmullRomCurve3([r(), r(), r(), r()]);

    const size = 2;
    const geometry = new THREE.TubeBufferGeometry(curve, 400, 0.25, size, false);
    const material = new THREE.MeshPhongMaterial({
        emissive: new THREE.Color().setHSL(Math.random(), 0.6, 0.7),
        flatShading: false
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.castShadow = true;
    mesh.geometry.setDrawRange(0, 2);
    scene.add(mesh);
    meshes.push(mesh);
}

render();

let i = 0;
setInterval(() => {
    animateLine(i);
    i += i === meshes.length - 1 ? -meshes.length + 1 : 1;
    console.log(i);
}, 60);

window.addEventListener(
    "resize",
    () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    },
    false
);