💡 Tips：需要对threejs 的基础知识有一定了解，一些公共函数封装可以看以前文章或者代码仓库：https://github.com/Gzx97/umi-three-demo 使用了TS类型规范以及中文注释。 实现效果 裁剪实现简要原理： 筛选出模型的每部结构和外部结构，把外部结构的材质属性设置为可裁剪，通过Three.js数学模块的API平面Plane对Three.js的网格模型对象进行剪裁。 零件分解效果简要原理： 通过配置模型每个模块位置信息的config文件，遍历模型控制每一部分的轻微位移，使用动画过度实现零件拆解特效。 核心功能实现： 首先把场景初始化出来，并且把模型加载到场...

前言 为了确保UI的响应性和避免复杂的同步问题，JavaScript被设计为单线程。然而在Web Worker标准中提供了浏览器运行多线程的能力。不过Web Worker运行在全局作用域之外，它们无法访问Window对象和Document对象，和主线程之间通信也只能通过异步消息传递机制实现。 由于原生的Web Worker写法比较复杂，这里我们使用useWorker，一个以React Hooks的方式简单使用Web Worker API的库。 useWorker的Github https://github.com/alewin/useWorker 安装 npm install --save @...

1 前言 指标（Metric）、日志（Log）、调用链（Trace）是运维领域产生的三种最基础的数据类型，而指标数据中时序数据又占据了主体地位，它是构建运维观测能力的基础。在AIOps中，时序数据主要有以下两个应用： 异常检测 指标预测 下面介绍一种时序数据预测算法，叫做Prophet。Prophet是一种用于时间序列预测的算法，由Facebook开发并开源。它基于加法模型，可以自动检测数据中的趋势和季节性，并将它们组合在一起以获得预测值。 2 算法介绍 2.1 算法原理 Prophet算法使用了一个可分解的时间序列模型，该模型主要有三个模型组成部分：trend，seasonality，以及h...

之前主要实现的对Three的相关功能做了封装以及基础的使用，接下来继续新功能的开发： https://github.com/Gzx97/umi-three-demo/tree/dev 实现选中某部位，视角切换的模型交互 通过threejs的基础概念可知，视角切换的主要原理就是改变相机camera的摆放位置，但是突然变更相机的位置视角切换的会很突兀，这个时候我们就需要来补足切换视角的动画效果（补间动画）。针对这个效果，可以使用一个库 tweenjs ，是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。 这...

前言 目前浏览器不支持rtsp协议，常规的解决方案是将rtsp流转成其他浏览器支持的格式才能在Web页面中播放。这些方案因为多一层解码转码会产生一定的延迟，在一些实时性要求比较高的场景下并不适用。而通过Webassembly技术，我们可以将一部分工作分担到浏览器来减少延迟。 方案设计 后端拉取rtsp流，获取原始数据包，通过websocket将数据包传给前端，在前端通过webassembly技术来进行解码，最后通过webgl来播放。其实就是把解码的工作放在前端来做，目前方案是能走通的，就是效果还在优化中。。。 目前实现的效果图 WASM部分 ps: 本文编译wasm环境 ubuntu22.04...

概述 Gin是一个轻量级的Golang Web框架 特性 给我的感觉，Gin就是轻便，不笨重，因为是基于Golang语言编写的，占用的资源以及启动速度上也会很快，Gin本身其实很简单，所以可以很方便的支持第三方中间件的使用，另外Gin支持针对JSON字段的验证，组织路由方面引入了路由组的概念，可以方便的进行授权集成 要求 Go 1.13 or above 示例 启动一个Gin Web服务也很简单。 创建项目 这步不用说了吧 下载依赖 go get github.com/gin-gonic/gin 创建主函数 根目录创建一个main.go文件： package main import ( "...

SSE概述 Server-Sent Events就是HTML5 服务器发送事件。 传统方式是网页必须向服务器发送接收新数据的请求，服务器才能向网页响应数据。使用Server-Sent Events，服务器可以随时通过将消息推送到网页的方式来向网页发送新数据。 SSE通信协议 SSE是基于HTTP协议实现的一种推送数据的技术。SSE是单向的，它只支持从服务端向客户端发送消息，不支持客户端向服务端发送消息，与WebSocket这种全双工通信方式有本质区别。 主要特点 简单易用：SSE使用起来很简单，支持中断重连的机制，另外只支持文本格式内容的传输。 单向通信：只支持服务端向客户端主动推送数据 适用...

前言 flink 1.14之后，就提供了新的source架构，并且将在2.0之后抛弃之前的SourceFunction和InputFormat。官方地址 https://nightlies.apache.org/flink/flink-docs-release-1.18/zh/docs/dev/datastream/sources/ 。 很多资料都是介绍新架构的优点，运行机制等，但是目前还没找到介绍如何开发自定义Source的案例。大部分工具官方都会开发的connector应该都会跟进升级到新架构，一般来说，我们不需要自己开发，但是对于很多私有化场景总归免不了会遇到需要自定义Source的情况...

开始 💡 Tips：需要对threejs 的基础知识有一定了解，代码中尽量使用ts以及中文注释了。 使用umi4+antd快速搭建项目框架。Umi是可扩展的企业级前端应用框架，也是蚂蚁集团的底层前端框架,Umi 以路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 参考开源项目对threejs的api进行基本的封装。建模并不是 Three.js 最核心和擅长的，Three.js 最核心功能是进行 浏览器 3D 场景渲染和交互。 项目地址：https://githu...

相信很多前端的小伙伴对npm并不陌生，也有很多小伙想将自己的组件或者插件也发布到npm上。小编本篇教程将以Vue3为🌰教会你如何轻松发布自己的组件。 step1 初始化项目 初始化一个Vue3项目，执行下面命令按照提示一步一步next就可以创建完成啦，这里不熟悉的小伙伴可以参考Vue官网手册 $ yarn create vue@latest step2 封装组件 执行完上一步后就得到一个简单的Vue脚手架工程，在这里创建一些属于自己的组件。在本次的🌰中，我在📁components中创建了两个简单的组件，分别是app-toolbar和layout, 对于组件的功能并没有做过多的丰富，够用即...