分享react+three.js展示温湿度采集终端

原创

已于 2024-09-16 22:00:21 修改 · 1.5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

于 2024-03-28 23:24:47 首次发布

前言

气象站将采集到的相关气象数据通过GPRS/3G/4G无线网络发送到气象站监测中心，摆脱了地理空间的限制。

前端：气象站主机将采集好的气象数据存储到本地，通过RS485等线路与GPRS/3G/4G无线设备相连。

通信：GPRS/3G/4G无线设备通过互联网与物联网云平台相连，气象站有计划的将收集到的气象信息通过无线设备发送到监控数据中心。

后台：气象监控中心通过互联网实现了对前端所有的自动气象站数据的采集和整合。

1、摆脱了地理空间的限制，可以在有无线信号的任何地方架设自动气象站点。

2、高规格工业级无线通信设备，有力的保证了气象数据的稳定可靠。

3、体积小巧、安装方便，使得现场安装调试人员轻松高效。

4、费用低廉，降低了运用成本。

温度、湿度等环境数据整合，趋势模拟。

温湿度采集终端

Pt100 就是说它的阻值在 0 度时为 100 欧姆， PT100 温度传感器。是一种以铂(Pt) 作成的电阻式温度传感器，属于正电阻系数, 其电阻和温度变化的关系式如下： R=Ro(1+α T)。广泛应用于实验室及工业环境。

技术参数

存储温度：-10 ~ +55 °C、湿度 0~85%RH

测量精度：温度： ±0.5°C ~ ±0.7°C

显示分辨率: 0.1 C

记录时间间隔：2秒~24小时

存储：数据存储量 65000组数据

电池电量：电池类型 1颗 2600mA 18650锂电池

电池寿命：3 年(测量速率在10秒/刷新 300秒/记录)

尺寸：135mm×125mm×36mm

材料/外壳： ABS工程塑料

PLC版

web简版

react+three.js，无三维建模软件，web三维展现温湿度采集器

应用程序的模块化理念，使用模块来构建你的代码。通过将实现隐藏在一个简单的接口后面，您可以使您的应用程序万无一失且易于使用。它只做它应该做的，没有别的。 通过隐藏实现，我们对使用我们代码的人实施了良好的编码风格。您可以访问的实现越多，它就越有可能成为您以后必须处理的复杂的半生不熟的“修复”。创建3D场景时，唯一的限制是您的想象力 - 以及您的技术知识深度。要点是如何描述3D空间的坐标系和用于在坐标系内移动对象。场景图是一种用于描述构成我们场景的对象层次结构的结构，向量是用于描述3D空间中的位置（以及许多其他事物），还有不少于两种描述旋转的方式：欧拉角Euler angles和四元数quaternions。

依赖

"react": "^18.2.0",

"three": "^0.162.0",

app.tsx

import React, { useEffect, useRef, useState } from 'react'
import './App.css';
import { World } from './World/World.js';

interface appProps {
  style?: Record<string, unknown>;
  [key: string]: unknown;
}

function App(props: appProps) {

  const { style, ...pros} = props;

  const renderRef = useRef(null);

  let  world: World;

  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
    if (renderRef && renderRef.current) {
      // Get a reference to the container element
      //const container = document.querySelector('#scene-container');
      //const container = document.getElementById('scene-container')
      // 1. Create an instance of the World app
      //world = new World(container);
      wo