完成串口读取数据和处理

baoshiwei

5 天以前 2ad852ee08e21ee681950f1d6058499248baf88e

 src/components/ThreeDDisplay.vue

@@ -3,8 +3,6 @@
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { createDataReceiver } from '../utils/dataFetcher';


const containerRef = ref<HTMLElement | null>(null);
let scene: THREE.Scene | null = null;
let camera: THREE.PerspectiveCamera | null = null;
@@ -358,29 +356,22 @@



// 定时获取数据
let dataTimer: number | null = null;

onMounted(() => {
  initScene();
  animate();
  
  const receiveData = createDataReceiver( (forceData) => {
  // createDataReceiver 现在直接注册回调并返回一个清理函数
 createDataReceiver((forceData) => {
    updateVisualization(forceData);
  });
  
  // 每100ms获取一次数据
  dataTimer = window.setInterval(receiveData, 100);
  }); // 传递 isSerialPortConnected 函数
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 清理定时器和事件监听
  if (dataTimer !== null) {
    clearInterval(dataTimer);
  }

  
  window.removeEventListener('resize', handleResize);