拓扑线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓扑线</title>
    <style>
        * { 
            margin: 0; 
            padding: 0; 
        }
    </style>
</head>
<body>
    <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
    <script type="module">

const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);
        camera.position.set(0, 0, 10);
        
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement); 
        
        // ==================== 创建拓扑线路径 ====================        
        // 定义5个节点的位置坐标
        const positions = [
            new THREE.Vector3(-6, 0, 0),  // 节点1：左端
            new THREE.Vector3(-3, 2, 0),  // 节点2：左上
            new THREE.Vector3(0, 0, 0),   // 节点3：中心
            new THREE.Vector3(3, -1, 0),  // 节点4：右下
            new THREE.Vector3(6, 1, 0)    // 节点5：右端
        ];
        
        // 创建曲线路径容器 - 用于连接多个线段形成连续路径
        const curvePath = new THREE.CurvePath();
        
        // 将相邻节点连接成连续的线段
        for (let i = 0; i < positions.length - 1; i++) {
            // 创建每两个节点之间的直线段
            const lineCurve = new THREE.LineCurve3(positions[i], positions[i + 1]);
            curvePath.curves.push(lineCurve); // 添加到路径中
        }
        
        // ==================== 拓扑线可视化 ====================
        
        // 创建线条几何体
        const geometry = new THREE.BufferGeometry();
        
        // 从路径中获取100个均匀分布的点（用于平滑渲染）
        const pathPoints = curvePath.getPoints(100);
        
        // 将这些点设置为几何体的顶点
        geometry.setFromPoints(pathPoints);
        
        // 创建线条材质 - 设置颜色为青色
        const material = new THREE.LineBasicMaterial({ 
            color: 0x4fc3f7 
        });
        
        // 创建线条对象并添加到场景
        const line = new THREE.Line(geometry, material);
        scene.add(line);
        
        // ==================== 创建移动光点 ====================
        // 创建光点球体几何体
        const light = new THREE.Mesh(
            new THREE.SphereGeometry(0.15), // 球体半径0.15
            new THREE.MeshBasicMaterial({ 
                color: 0x4fc3f7 // 与线条相同颜色
            })
        );
        // 设置光点初始位置为路径起点
        light.position.copy(curvePath.getPointAt(0));
        scene.add(light);

let t = 0; // 动画进度（0到1，表示路径上的位置比例）
        function animate() {
            // 请求下一帧动画
            requestAnimationFrame(animate);
            
            // 控制光点移动进度
            t += 0.005;
            
            // 当进度超过1时重置为0（实现循环）
            if (t >= 1) {
                t = 0;
            }
            // 根据当前进度在路径上获取对应位置
            light.position.copy(curvePath.getPointAt(t));
            
            // 渲染场景
            renderer.render(scene, camera);
        }
        animate() ;
        window.addEventListener('resize', () => {
            // 更新相机宽高比
            camera.aspect = window.innerWidth / window.innerHeight;
            
            // 更新相机投影矩阵
            camera.updateProjectionMatrix();
            
            // 更新渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
    </script>
</body>
</html>