Three.js简单流光效果图

1、上代码

// 创建流光线的基本几何体
const geometry = new THREE.BufferGeometry();
// 创建材质
const material = new THREE.LineDashedMaterial({ 
    color: '#0fe7f2',
    // transparent: true, // 设置为透明
    // opacity: 0.5 // 设置透明度，范围 0-1
 });
const vertices = new Float32Array([
    0, -2, 0,
    0, 10, 0
  ]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// 创建线对象
const line = new THREE.Line(geometry, material);
scene.add(line);
// 将流光初始位置设置在原点（0, 0, 0）
line.position.set(0, 0, 0);

// 渲染循环
function render(time) {
    requestAnimationFrame(render);

    // 每一帧更新时，增加线在X轴上的位置
    line.position.y += 1.2; // 这里假设速度是每帧移动0.1单位
    // 如果立方体超出某个范围，则重新放置到起始位置
    if (line.position.y > 200 ) {
        line.position.y = -5; // 假设我们设定的最大边界是200，超过后重置到-5
    }

    renderer.render(scene, camera);
    controls.update(); // 更新控制器
    
  };
  render(performance.now());

2、效果