🪐 星球轨道动画原理模拟太阳系行星公转效果。 运动方程行星位置由以下公式计算： 12const px = cx + Math.cos(p.angle) * p.orbitR;const py = cy + Math.sin(p.angle) * p.orbitR * 0.5; 椭圆轨道使用 Math.PI * 2 控制角度，实现周期性运动。 鼠标交互行星会响应鼠标位置产生轻微偏移： 1234if (dist < 120) { p.x = px + dx * 0.12; p.y = py + dy * 0.12;} 光晕效果使用径向渐变 createRadialGradient 实现行星发光效果。

🌍 3D 点云处理点云是三维重建和机器人感知的重要数据形式。 点云来源 结构光相机 - 梅卡曼德 ToF 相机 - 深度感应 激光扫描 - 高精度测量 常用算法 点云滤波 - 去除噪声 降采样 - 减少计算量 配准 - 多视角融合 应用场景 工件识别定位 乱料堆叠抓取 尺寸检测

🤖 机器人视觉抓取结合视觉系统引导机械手完成抓取任务。 流程概述 相机拍照获取目标位置 计算目标坐标 通讯发送坐标给机械手 机械手执行抓取 坐标系转换需要将像素坐标转换为机械手坐标系： 像素坐标 → 世界坐标 世界坐标 → 机械手坐标 精度影响因素 相机标定精度 机械手重复定位精度 目标物摆放位置误差

🔌 Vision Master 通讯配置Vision Master 支持多种通讯方式与外部设备交互。 通讯类型TCP/IP 通讯 用于与 PC 程序通讯 支持自定义协议 PLC 通讯 支持西门子 S7 协议 支持三菱 MC 协议 变量映射通过寄存器地址进行数据交换： Q - 输出寄存器 I - 输入寄存器 实战应用结合视觉定位与机械手抓取，实现自动化上下料。

👁️ Vision Master 入门Vision Master 是海康机器人推出的机器视觉软件平台。 软件特点 图形化流程设计 丰富的视觉工具集 支持多种相机品牌 常用工具 Blob 分析 - 检测目标区域 边缘定位 - 精确边缘定位 模板匹配 - 快速产品定位 应用场景 引导机械手抓取 产品缺陷检测 尺寸测量

📐 CSS 瀑布流布局瀑布流是一种常见的图片展示布局方式。 columns 属性使用 CSS 的 columns 属性可以轻松实现瀑布流： 1234.cat-waterfall { columns: 200px 3; column-gap: 16px;} 关键点 columns: 200px 3 表示每列最小 200px，最多 3 列 break-inside: avoid 防止卡片被截断 响应式配合 auto-fit 和 minmax 可以实现自适应列数。

✨ 粒子与鼠标交互粒子系统最大的魅力在于交互性。 鼠标追踪每个粒子都会响应鼠标位置，产生有趣的排斥效果： 123456789const dx = sx - mouse.x;const dy = sy - mouse.y;const dist = Math.sqrt(dx * dx + dy * dy);if (dist < 120) { const f = (120 - dist) / 120; this.baseX += dx * f * 0.04; this.baseY += dy * f * 0.04;} 颜色渐变粒子使用随机颜色，通过 opacity 和 scale 产生纵深感。

🎨 Canvas 粒子动画粒子系统是 Web 开发中非常有趣的效果之一。 什么是粒子系统粒子系统由大量独立的小元素组成，每个元素都有自己的属性： 位置 (x, y, z) 速度 颜色 大小 透明度 3D 粒子连线通过矩阵旋转实现 3D 效果，粒子之间根据距离连线，营造出深邃的空间感。 1234567891011// 粒子类核心代码update() { // 更新角度 this.angleX += this.rotSpeedX; this.angleY += this.rotSpeedY; // 3D 旋转矩阵 let x = this.baseX, y = this.baseY, z = this.baseZ; // ... 旋转计算 this.x = x; this.y = y; this.z = z;} 鼠标靠近时粒子会被推开，产生互动感。

视觉分类下的测试文章。

前端分类下的测试文章。