41 lines
1.2 KiB
HTML
41 lines
1.2 KiB
HTML
<!-- 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> |