企业官网建设流程全解析

1. 从零拆解一个水平仪模拟系统：为什么值得做

水平仪这个东西，看起来简单到不能再简单——不就是中间一个气泡，偏了就说明不平嘛。但真要在 Unity 里把它模拟得"像那么回事"，尤其是要能跟真实设备传感器联动、还要在视觉上让人一眼看懂，里面的门道其实不少。我最近花了大概两周时间，完整做了一套 Unity 模拟水平仪系统，从 UI 搭建、气泡物理逻辑、到移动端陀螺仪接入、再到精度校准和性能优化，踩了一圈坑，今天把整个思路和实现过程完整梳理一遍。

这套系统能做什么？简单说，它可以在 Unity 里模拟一个真实水平仪的行为：设备倾斜时，气泡在圆形刻度盘内移动，气泡居中代表水平，偏离代表倾斜方向和角度。它可以用在建筑测量类 App 的辅助校准、AR 场景中的平面检测提示、游戏里的解谜机关、甚至工业仿真培训中。适合谁看？有 Unity 基础、想做一个跟传感器交互的实用小工具的开发者；或者你正在做 AR/VR 项目，需要一个直观的水平参考 UI，这套方案可以直接抄。

核心关键词就几个：Unity 水平仪、气泡移动、陀螺仪接入、倾斜角度计算、UI 校准。下面我按"设计思路 → 核心细节 → 实操实现 → 问题排查"的顺序展开，每一块都会说清楚为什么这么做，以及我实际踩过的坑。

2. 整体设计与方案选型：为什么不用物理引擎

2.1 需求拆解与核心模块划分

先别急着写代码，把需求拆清楚。一个水平仪模拟系统，本质上要解决四件事：

第一，数据来源。倾斜角度从哪来？桌面端可以用鼠标模拟，移动端用加速度计或陀螺仪，也可以两者融合。第二，角度计算。原始传感器数据是三维向量，要转换成气泡在二维平面上的偏移量。第三，视觉呈现。气泡怎么画、刻度盘怎么画、怎么让用户一眼看出偏了多少度。第四，校准与容错。传感器有噪声、有零漂，怎么让气泡不抖、怎么让"水平"是真的水平。

我把这四块分别对应到四个模块：InputProvider（数据源抽象）、TiltCalculator（角度解算）、LevelView（UI 渲染）、CalibrationManager（校准管理）。模块之间用事件或接口通信，方便替换。比如桌面调试时用鼠标模拟输入，真机上换成传感器输入，上层逻辑完全不用改。

2.2 为什么不用 Unity 物理引擎

很多人第一反应是：气泡不就是个小球吗，给它加个 Rigidbody，用重力让它自然滚动不就行了？我一开始也是这么想的，试了半天发现不行。原因有三个：

一是物理引擎的阻尼和摩擦很难调。气泡需要的是"平滑跟随"，不是"真实滚动"。用物理引擎，气泡会有惯性、会过冲、会来回震荡，看起来像在晃，而不是像水平仪那样稳稳地指。二是性能开销。一个 UI 元素没必要走物理模拟，尤其在移动端，每帧的物理计算都是浪费。三是可控性差。水平仪的气泡位置应该严格由倾斜角度决定，是一个确定性的映射关系，而不是一个动力学过程。

所以最终方案是：纯数学映射。倾斜角度 → 归一化偏移量 → 气泡位置，中间加一层平滑滤波。这样气泡位置完全可控，想让它多灵敏就多灵敏，想让它多稳就多稳。

2.3 坐标系与角度定义的坑

这里有个特别容易搞混的地方：Unity 的坐标系和传感器坐标系不是一回事。Unity 是左手坐标系，Y 轴向上，Z 轴向前。而移动设备的加速度计通常返回的是设备坐标系下的重力分量，不同平台（iOS/Android）的轴向定义还不一样。

我的做法是：统一在"屏幕平面"上做文章。不管底层数据怎么来，最终都转换成两个值——tiltX（左右倾斜）和tiltY（前后倾斜），单位是度。气泡的偏移量就是这两个值的线性映射。这样上层逻辑只认这两个值，跟平台无关。

具体转换时，我用的是重力向量在设备平面上的投影。设备水平时，重力向量垂直于屏幕，投影为零；设备倾斜时，重力向量在屏幕平面上产生分量，分量大小就对应倾斜角度。这个思路比直接用欧拉角稳，因为欧拉角有万向锁问题，而且抖动大。

3. 核心细节解析：气泡移动的数学原理

3.1 从重力向量到倾斜角度

假设设备坐标系下重力向量是g = (gx, gy, gz)，归一化后长度为 1。设备水平时，gz ≈ -1（或 1，取决于平台），gx和gy接近 0。设备倾斜时，gx和gy就不为零了。

倾斜角度的计算：

• 左右倾斜角tiltX = atan2(gx, -gz) * Rad2Deg
• 前后倾斜角tiltY = atan2(gy, -gz) * Rad2Deg

用atan2而不是asin，是因为atan2在整个范围内都稳定，不会在接近 90 度时出现数值问题。Rad2Deg是弧度转角度，Unity 里是Mathf.Rad2Deg。

算出来的角度范围大概是 -90 到 90 度。但水平仪通常只需要显示 -30 到 30 度这个范围，超出就没意义了。所以我会做一个Clamp，把角度限制在 ±30 度，然后映射到气泡的最大偏移半径。

3.2 气泡偏移量的映射与灵敏度设计

气泡的偏移量怎么算？假设刻度盘半径是R像素，最大显示角度是maxAngle（比如 30 度），那么：

offsetX = (tiltX / maxAngle) * R offsetY = (tiltY / maxAngle) * R

但这样有个问题：当倾斜角度接近maxAngle时，气泡会跑到边缘，再倾斜就出界了。所以实际做的时候，我会把气泡限制在一个比刻度盘略小的圆内，留一点边距，视觉上更舒服。

灵敏度这块，我试过两种方案。一种是线性映射，角度和偏移成正比，简单直观。另一种是非线性映射，小角度时灵敏、大角度时迟钝，用tanh或sin曲线。实测下来，线性映射对大多数场景够用，但如果你想让"接近水平"时更精确，可以用非线性。我最后用的是sin曲线：offset = sin(angle / maxAngle * PI/2) * R，这样小角度时变化快，大角度时变化慢，手感更接近真实水平仪。

3.3 平滑滤波：让气泡不抖

传感器数据一定有噪声，直接映射到气泡位置，气泡会疯狂抖动，根本没法看。所以必须加滤波。我试过三种：

我最后用的是低通滤波，因为它在延迟和平滑之间平衡得最好。公式很简单：

smoothedValue = Mathf.Lerp(smoothedValue, rawValue, alpha);

alpha是关键参数。alpha越大，跟随越快但越抖；alpha越小，越平滑但越迟钝。我实测下来，alpha = 0.15到0.25之间比较合适，具体看你的传感器采样率。如果采样率是 60Hz，alpha = 0.2大概对应 0.1 秒左右的时间常数，手感很跟手又不抖。

注意：滤波要在角度层面做，不要在气泡位置层面做。因为角度是线性变化的，气泡位置经过非线性映射后，滤波效果会打折扣。

4. 实操过程：从 UI 搭建到传感器接入

4.1 刻度盘与气泡的 UI 搭建

UI 部分我用的是 Unity 的 UGUI，因为简单、跨平台、性能也够。层级结构是这样的：

• LevelCanvas（Canvas，Screen Space - Overlay）
  • DialBackground（Image，圆形刻度盘底图）
  • TickMarks（Image，刻度线，可以用一张图搞定）
  • Bubble（Image，气泡）
  • CenterRing（Image，中心圆环，表示"水平"区域）
  • AngleText（Text，显示当前角度）

刻度盘底图我是在外部工具里画好的，一张 512x512 的 PNG，带刻度和数字。气泡就是一张圆形渐变图，中间亮边缘暗，看起来有立体感。中心圆环是半透明的，表示"水平容差范围"，比如 ±2 度以内算水平。

气泡的移动范围要限制在刻度盘内。我在LevelView脚本里算了一个maxRadius，等于刻度盘半径减去气泡半径再减一点边距。这样气泡永远不会跑出刻度盘。

4.2 输入源抽象与桌面调试

为了能在桌面调试，我定义了一个接口：

public interface ITiltProvider { Vector2 GetTilt(); // 返回 (tiltX, tiltY)，单位度 }

然后实现两个类：MouseTiltProvider和SensorTiltProvider。桌面调试时用鼠标位置模拟倾斜，鼠标在屏幕中心时倾斜为 0，偏离中心时按比例映射到角度。这样不用真机也能调 UI 和手感。

MouseTiltProvider的实现很简单：

public class MouseTiltProvider : ITiltProvider { public float maxAngle = 30f; public Vector2 GetTilt() { Vector2 mousePos = Input.mousePosition; float screenCenterX = Screen.width * 0.5f; float screenCenterY = Screen.height * 0.5f; float tiltX = (mousePos.x - screenCenterX) / screenCenterX * maxAngle; float tiltY = (mousePos.y - screenCenterY) / screenCenterY * maxAngle; return new Vector2( Mathf.Clamp(tiltX, -maxAngle, maxAngle), Mathf.Clamp(tiltY, -maxAngle, maxAngle) ); } }

这个类在编辑器里特别好用，你可以直接用鼠标"推"气泡，快速验证 UI 和滤波效果。

4.3 移动端传感器接入

移动端我用的是Input.acceleration，这是 Unity 封装好的加速度计接口，跨平台，不用自己写原生插件。Input.acceleration返回的是一个Vector3，表示设备坐标系下的加速度方向，归一化后就是重力方向。

但这里有个坑：不同平台的轴向定义不一样。iOS 和 Android 的Input.acceleration在屏幕方向变化时，返回值会跟着变。所以必须根据Screen.orientation做转换。我写了一个SensorTiltProvider：

public class SensorTiltProvider : ITiltProvider { private Vector2 smoothedTilt; public float alpha = 0.2f; public Vector2 GetTilt() { Vector3 accel = Input.acceleration; // 根据屏幕方向调整轴向 switch (Screen.orientation) { case ScreenOrientation.Portrait: // 默认轴向 break; case ScreenOrientation.LandscapeLeft: accel = new Vector3(-accel.y, accel.x, accel.z); break; case ScreenOrientation.LandscapeRight: accel = new Vector3(accel.y, -accel.x, accel.z); break; case ScreenOrientation.PortraitUpsideDown: accel = new Vector3(-accel.x, -accel.y, accel.z); break; } float tiltX = Mathf.Atan2(accel.x, -accel.z) * Mathf.Rad2Deg; float tiltY = Mathf.Atan2(accel.y, -accel.z) * Mathf.Rad2Deg; Vector2 rawTilt = new Vector2(tiltX, tiltY); smoothedTilt = Vector2.Lerp(smoothedTilt, rawTilt, alpha); return smoothedTilt; } }

这段代码里，Screen.orientation的判断是关键。如果你不做这个转换，横屏时气泡方向就反了，用户会一脸懵。

4.4 校准功能的实现

校准是水平仪的灵魂。用户不可能每次都把设备放得绝对水平，所以需要一个"设为水平"的按钮。点一下，把当前角度记为零点，之后所有角度都减去这个零点。

实现很简单，在CalibrationManager里存一个offset：

public class CalibrationManager { private Vector2 offset = Vector2.zero; public void Calibrate(Vector2 currentTilt) { offset = currentTilt; } public Vector2 ApplyCalibration(Vector2 rawTilt) { return rawTilt - offset; } }

但这里有个细节：校准值要不要持久化？如果用户每次打开 App 都要重新校准，体验很差。所以我会用PlayerPrefs把 offset 存下来，下次打开直接读取。不过要注意，如果用户换了设备或者设备方向变了，旧的校准值可能不准，所以我会在检测到屏幕方向变化时提示重新校准。

实操心得：校准的时候，最好让用户把设备放在一个已知水平的面上，比如桌面。如果只是随便点一下，校准出来的零点可能偏差很大。我一般会在 UI 上加一行提示文字："请将设备放置在水平面上后点击校准"。

4.5 角度显示与视觉反馈

除了气泡，我还加了一个角度文字显示，实时显示当前倾斜角度，精确到 0.1 度。这样用户不仅能看到气泡偏了，还能知道偏了多少。

视觉反馈方面，我做了三档颜色：气泡在中心圆环内时，圆环变绿，表示"水平"；偏离 2 到 5 度时变黄，表示"接近水平"；超过 5 度变红，表示"明显倾斜"。这个颜色阈值可以根据场景调整，比如建筑测量可能需要更严格，游戏解谜可以宽松一点。

颜色变化用Image.color直接改就行，配合Mathf.Lerp做平滑过渡，避免颜色突变。

5. 常见问题与排查技巧实录

5.1 气泡抖动严重怎么办

这是最常见的问题。原因通常有三个：传感器噪声、滤波参数不对、或者每帧多次调用GetTilt()导致数据不一致。

排查顺序：先看alpha是不是太大，试试调到 0.1 以下；如果还抖，检查是不是在Update和FixedUpdate里都调用了，导致一帧内数据被更新两次；最后检查传感器采样率，如果设备本身采样率低（比如 30Hz），那再怎么滤波也有限，只能加大平滑力度。

我遇到过一个特殊情况：某些 Android 设备的加速度计在静止时也有明显噪声，alpha = 0.2都不够。最后我用了一个动态 alpha：当角度变化小于 0.5 度时，用更小的 alpha（更平滑）；变化大时，用更大的 alpha（更跟手）。这样静止时稳如磐石，移动时又不迟钝。

5.2 横竖屏切换后方向错乱

前面提到过，Input.acceleration的轴向会随屏幕方向变化。如果你没做转换，横屏时左右倾斜会变成前后倾斜，气泡方向完全乱套。

解决办法就是在GetTilt()里根据Screen.orientation做轴向旋转。但要注意，Screen.orientation在某些设备上返回的是AutoRotation，这时候你需要用Input.deviceOrientation来判断实际方向。我一般两个都判断，优先用Input.deviceOrientation，因为它更准确。

还有一个坑：屏幕旋转有动画过程，在动画期间Screen.orientation可能已经变了，但实际画面还没转完，这时候做轴向转换会导致气泡跳一下。我的做法是加一个短暂的延迟，等旋转动画结束后再更新轴向。

5.3 校准后仍然不准

校准不准的原因通常是：校准时的设备姿态和实际使用时的姿态不一致。比如校准的时候设备是竖着拿的，使用的时候是平放的，那零点就完全不对。

所以校准逻辑要跟使用场景匹配。如果水平仪是平放使用的，校准的时候也要平放；如果是竖着贴在墙上用的，校准的时候也要竖着。我一般会在校准按钮旁边加一个图标，提示用户当前的使用姿态。

另一个原因是零漂。有些设备的加速度计会随时间缓慢漂移，校准一次管不了多久。解决办法是定期自动校准：当检测到设备长时间静止且角度变化很小时，自动把当前角度设为新的零点。这个功能要做得隐蔽，不能干扰用户正常使用。

5.4 性能问题与优化

水平仪本身计算量很小，但如果 UI 元素多、每帧都重建 Mesh，也会有性能问题。我做过一次 profiling，发现主要开销在 UGUI 的Canvas.BuildBatch上，因为气泡位置每帧都在变，导致 Canvas 重建。

优化方法有两个：一是把气泡单独放在一个子 Canvas 里，这样只有子 Canvas 重建，不影响其他 UI；二是用RectTransform.anchoredPosition直接改位置，而不是改transform.position，减少不必要的布局计算。

还有一个容易被忽略的点：Input.acceleration的调用频率。如果你在多个脚本里都调用它，会有额外开销。我一般用一个单例InputManager统一读取，其他脚本从单例拿数据。

5.5 常见问题速查表

避坑技巧：在真机测试前，一定要在编辑器里用鼠标模拟把所有逻辑跑通。真机调试成本高，而且传感器问题很难在编辑器里复现。我一般会写一个DebugTiltProvider，可以手动输入角度值，方便测试边界情况。

6. 进阶扩展：让水平仪更实用

6.1 双轴与单轴模式切换

有些场景只需要单轴水平（比如只关心左右倾斜），这时候可以做一个模式切换。单轴模式下，只显示一个方向的气泡偏移，另一个方向锁定。实现上就是在TiltCalculator里加一个axisMask，把不需要的轴置零。

6.2 历史轨迹与趋势显示

我加了一个小功能：在刻度盘上画一条淡淡的轨迹线，显示最近几秒气泡的移动路径。这样用户能看出设备是不是在稳定下来，还是还在晃。实现上用TrailRenderer或者自己画线都行，注意轨迹要淡出，不然会糊成一团。

6.3 与 AR 场景结合

如果你在做 AR 项目，可以把水平仪的气泡映射到 AR 平面检测的提示上。当检测到平面时，显示一个水平仪，告诉用户"这个平面是水平的"。这个结合点很自然，而且实用。我试过在 AR 家具摆放场景里加这个，用户反馈很好，因为能直观看到地面平不平。

6.4 数据记录与导出

对于工业仿真培训场景，可能需要记录倾斜数据。我加了一个简单的记录功能：按一下按钮，开始记录角度数据，每秒采样一次，存成 CSV。培训结束后可以导出分析。这个功能实现不难，但很实用。

7. 我个人的一些实操体会

这套系统我前前后后改了好几版，最大的体会是：水平仪的难点不在数学，在体验。角度计算就那么几个公式，但怎么让气泡看起来"舒服"、怎么让校准"无感"、怎么让不同设备上表现一致，这些才是真正花时间的地方。

另一个体会是：不要过度依赖传感器。传感器数据永远有噪声，永远有延迟，永远有设备差异。所以系统设计上一定要留出"手动模式"和"模拟模式"，方便调试和降级。我在项目里就保留了鼠标模拟输入，真机出问题时可以快速切回桌面排查。

最后分享一个小技巧：如果你觉得气泡的移动手感不对，先别调代码，拿一个真实的水平仪放在旁边，对比着调。真实水平仪的气泡移动是有阻尼的，不是瞬间跟手的。我在LevelView里加了一个bubbleDamping参数，让气泡位置用Vector2.Lerp慢慢逼近目标位置，而不是直接赋值。这样气泡移动会有一点"惯性感"，更像真实水平仪。这个参数我调了大概十几次才找到合适值，你可以从 0.3 开始试。

这套方案后续还可以扩展成三维水平仪（用两个气泡表示两个轴），或者结合陀螺仪做更精确的姿态估计。但核心思路是一样的：数据源抽象、角度解算、平滑滤波、视觉映射，把这四块做好，水平仪就稳了。