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>