test

2025-04-19 13:42:24 +08:00
commit 686c30808e
8 changed files with 1144 additions and 0 deletions
--- a/ws/public/index.html
+++ b/ws/public/index.html
@@ -0,0 +1,41 @@
+<!-- public/index.html -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>3D 可视化</title>
+  <style>body { margin: 0; } canvas { display: block; }</style>
+</head>
+<body>
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+  <script>
+    // 初始化 Three.js
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+    
+    // 连接 WebSocket
+    const socket = io();
+    const updateScene = (data) => { 
+      // 从数据中获取 3D 数据 
+      // 例如：data = {x: 1, y: 2, z: 3}
+      // 通过 Three.js 创建一个 3D 对象
+      console.log(data);
+    }
+    // 接收 3D 数据
+    socket.on('frame', (data) => {
+      // 更新场景对象
+      updateScene(data);
+    });
+    
+    // 渲染循环
+    function animate() {
+      requestAnimationFrame(animate);
+      renderer.render(scene, camera);
+    }
+    animate();
+  </script>
+</body>
+</html>
--- a/ws/server.ts
+++ b/ws/server.ts
@@ -0,0 +1,54 @@
+// server.js
+import express from 'express';
+const app = express();
+import http from 'http';
+import { Server } from 'socket.io';
+// const http = require('http').createServer(app);
+const httpServer = http.createServer(app);
+const io = new Server(httpServer);
+
+// 提供静态网页
+app.use(express.static('public'));
+
+// 3D 数据生成逻辑
+function generate3DData() {
+  return {
+    vertices: [
+      /* 3D 顶点数据 */
+    ],
+    colors: [
+      /* 颜色数据 */
+    ],
+  };
+}
+function generate3DData2() {
+  // 创建一个包含 1000 个随机点的数组
+  const points: any = [];
+  for (let i = 0; i < 1000; i++) {
+    points.push([Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000]);
+  }
+  return {
+    vertices: points,
+    colors: points.map(() => [1, 1, 1, 1]),
+  };
+}
+
+// WebSocket 通信
+io.on('connection', (socket) => {
+  console.log('客户端已连接');
+
+  // 每帧发送数据 (60fps)
+  // const interval = setInterval(() => {
+  //   socket.emit('frame', generate3DData());
+  // }, 16);
+  const interval = setInterval(() => {
+    socket.emit('frame', generate3DData());
+  }, 2000);
+  socket.on('disconnect', () => {
+    clearInterval(interval);
+  });
+});
+
+httpServer.listen(3003, () => {
+  console.log('服务已启动: http://localhost:3003');
+});