简介一套可直接运行的Unity 3D uGUI 3D旋转特效示例工程面向Unity初学者及UI交互开发者解决在Canvas与RectTransform体系下实现UI元素平滑三维旋转动画的问题效果简洁、易上手适合用于菜单、按钮、卡片等界面动态效果。压缩包共三百四十五个文件整体仅三点三三MB以Unity场景文件、C#脚本、asset资源文件为主辅以meta、info等工程配置元数据目录结构完整便于直接导入学习。已有四千三百零八人学习下载具有一定参考热度。包内含RotateEffect旋转控制脚本与UI交互调用示例覆盖通过修改RectTransform的Rotation或eulerAngles驱动旋转、利用Animator制作关键帧过渡动画等具体实现同时涉及Canvas渲染模式设置、锚点与偏移适配等关键处理思路并配有不同分辨率下的适配说明。整体资源小巧而结构完整既适合个人上手练习也可快速移植到实际项目中复用。1. uGUI做3D旋转特效不是给UI开Z轴是把3D画面当成一张贴图如果你在项目里接到一个需求UI 上放一个 3D 道具玩家能拖拽旋转而且要和按钮、弹窗混在同一个 Canvas 里。第一反应往往是给 RectTransform 开 Z 轴或者把 Canvas 改成 World Space。但 uGUI 本身没有透视相机靠 transform 硬转出来的东西始终是压扁的卡片。我常用的做法是反过来想把 3D 场景渲染进一张 RenderTexture当成贴图甩给 RawImage。3D 归相机管uGUI 只负责显示和交互。这套组合在项目里常被叫“unity3d 视频流”式 UI简单、好用也不容易翻车。风暴中心就一句话别让 UI 去做 3D 的活给它一张会变的画。2. 三种方案选型RenderTexture、伪3D 和 World Space 为什么我只推荐第一种2.1 伪3D 方案RectTransform 旋转的扁平感与适用边界很多人第一次尝试“3D 旋转特效”就是在 uGUI 上直接改RectTransform.rotation。比如把 x 或 y 轴改成 45°希望能看到一个倾斜的卡片。实际效果却像一块纸板被水平压缩——宽度收窄、内容变形完全没有近大远小的立体感。原因是 Screen Space - Overlay 模式下Canvas 没有透视相机顶点变换走的是正交逻辑所以绕着 y 轴转 90° 时卡片只剩一条线。这个方案不是不能用它的强项是卡牌翻转这类快速过渡不需要真实光照不需要模型贴图一个DOTween几十行就能写完。缺点是边缘永远没有透视感旋转角度大了之后看起来像“塌陷”。我一般只在正面是纯 UI 排版、背面也是纯 UI 排版时用比如设置面板的双面切换、扑克牌翻面。如果旋转目标是一个有金属质感的道具模型伪3D 方案一上来就露怯。2.2 World Space Canvas坐标换算麻烦只留给特定场景第三种做法是把 Canvas 的 Render Mode 改成 World Space然后将 RawImage 作为世界空间里的一块画布挂在场景模型旁边。这样 UI 确实能跟随世界坐标旋转、受相机投影影响看起来非常“3D”。但它最大的问题是事件系统屏幕坐标要先转成世界坐标再转成 Canvas 局部坐标点击判定要自己写射线检测。如果你做的是 VR 手柄上的悬浮面板、AR 里的标签World Space 是正解。但做手机游戏主界面里的道具展示它会让 UI 的适配和交互复杂一个量级。“简单好用”这五个字它一个都不沾所以我不推荐普通界面需求用它。2.3 RenderTexture 方案为什么它最贴合“简单好用”RenderTexture 方案的本质是把 3D 渲染结果变成一帧帧位图数据作为一张动态贴图交给 uGUI。uGUI 的Graphic类本来就有mainTexture的概念任何Texture都能作为 UI 渲染源。RawImage 内部做的就是texture直接映射 UV所以 RenderTexture 对 uGUI 来说是天然的输入。这带来的好处是3D 侧的光照、阴影、透视、抗锯齿全部由相机负责UI 侧只需要摆一张 RawImage 即可。你不需要修改 Canvas 的渲染模式不需要处理世界坐标和屏幕坐标的换算。而且从 uGUI 合批角度讲RawImage 和其他 Image 一起走 Canvas 的合批流程只要层级排布合理不会因为“嵌了 3D”就把批次打爆。这恰恰是它能“简单”的底层原因。三种方案的差异我用一张表总结方案UI 交互成本光照/透视适用场景主要风险RectTransform 旋转低无卡牌翻转、按钮动效旋转角度大时失真严重RenderTexture RawImage低完整道具展示、角色头像、游戏内视频流RT 内存、相机数量World Space Canvas高完整VR/AR、场景内拟物 UI坐标换算复杂、屏幕适配难如果需求只是“UI 上放个能转的 3D 模型”RenderTexture 方案是踩坑最少的一条路。我后面所有步骤都按这个方案写。3. 从零搭一个可拖拽旋转的3D道具展示场景、脚本与关键参数3.1 搭建 3D 侧独立相机、专属 Layer 与模型导入设置先做 3D 侧标准流程是给展示模型建一个独立 Layer比如叫UI3D然后把 RT 相机的 Culling Mask 只勾选这一层。这样 RT 相机不会把主场景的物体渲染进去主相机也不会渲染 UI3D 层里的模型互不干扰。模型从外部导入时有一件事必须先验单位。SolidWorks 类 CAD 软件导出 FBX 时默认可能是毫米Unity 默认单位是米。如果导出后模型在场景里巨大无比相机对不上视野旋转就完全没有效果。我一般会在 SolidWorks 里把导出单位切成米或者在 Unity 导入设置里把 Scale Factor 调成 0.001再勾选 Convert Units。这个坑不清掉后面调相机距离全是白费。3.2 搭建 UI 侧RenderTexture 与 RawImage 的连接Project 窗口右键创建 RenderTexture分配一个_RT_Model。不用急着把分辨率设很大先把 512×512 作为起点。创建一个 RawImage把它的 Texture 拖成刚才建的 RT。到这里如果 3D 场景里能看到模型RawImage 里就已经有画面了。接着在 RawImage 同级放一个全屏透明 Image 作为交互层或者直接让 RawImage 接收事件。注意透明 Image 的raycastTarget默认是勾选的它会把下方按钮的点击全部吃掉这个坑后面避坑章节专门说。事件入口建议直接挂在 RawImage 上uGUI 的事件系统只认GraphicraycastTargetRawImage 本身就能被射线打到。要让 RT 背景透明相机的Clear Flags设成 Solid ColorBackground Color的 Alpha 设为 0。这样 RawImage 四周不会出现黑块或白块。如果你的 UI 背景是卡片形状还可以在 RawImage 上加 Mask 做圆角裁剪。3.3 拖拽旋转脚本uGUI 事件接口与阻尼算法下面这段是我常用的拖拽旋转脚本挂载在 RawImage 上把要进行旋转的模型赋给 target。它直接利用 uGUI 的IDragHandler接口不需要自己写射线检测。using UnityEngine; using UnityEngine.EventSystems; public class DragRotate3D : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler { public Transform target; public float rotateSpeed 0.5f; public float damping 8f; public bool invertX true; private Vector2 lastPointerPosition; private float currentYaw; private float targetYaw; private float currentPitch; private float targetPitch; private bool isDragging; public void OnBeginDrag(PointerEventData eventData) { isDragging true; lastPointerPosition eventData.position; } public void OnDrag(PointerEventData eventData) { Vector2 delta eventData.position - lastPointerPosition; lastPointerPosition eventData.position; float direction invertX ? 1f : -1f; targetYaw delta.x * rotateSpeed * direction; targetPitch delta.y * rotateSpeed * 0.5f; targetPitch Mathf.Clamp(targetPitch, -30f, 30f); } public void OnEndDrag(PointerEventData eventData) { isDragging false; } void Update() { if (target null) return; currentYaw Mathf.LerpAngle(currentYaw, targetYaw, damping * Time.deltaTime); currentPitch Mathf.LerpAngle(currentPitch, targetPitch, damping * Time.deltaTime); target.rotation Quaternion.Euler(currentPitch, currentYaw, 0f); } }这段代码的关键在于它不直接改transform.rotation而是维护一组目标角度通过LerpAngle让当前角度慢慢逼近。如果直接在OnDrag里改 rotation手指松开的那一刻模型会有一帧跳变改用阻尼之后松开手模型会继续滑行一小段再稳定停在目标位置手感更像“转盘”。rotateSpeed控制灵敏度0.5 适合大部分屏幕拖拽距离长、想转快一点可以提到 0.8。damping控制在 5~10 之间值太小会有拖泥带水的感觉值太大又几乎等于没有阻尼。invertX决定你向左拖时模型是向左转还是向右转没有绝对正确以项目美术反馈为准。俯仰角限制在 30° 内是为了避免模型转过去之后露出背面、让 RT 相机拍到空背景。3.4 RT 相机的摆放用模型包围盒自动算距离RT 相机初始位置直接摆在模型前方朝向模型中心。手动调距离有一个很常见的翻车现场换了一个模型后距离没改模型在 RawImage 里变得巨大或极小。我的做法是写一个小工具或直接在 Start 里按包围盒算一版距离Renderer renderer target.GetComponentInChildrenRenderer(); if (renderer ! null) { Bounds bounds renderer.bounds; float objectSize bounds.size.magnitude; float requiredDistance objectSize / (2f * Mathf.Tan(rtCamera.fieldOfView * 0.5f * Mathf.Deg2Rad)); Vector3 direction (rtCamera.transform.position - bounds.center).normalized; rtCamera.transform.position bounds.center direction * requiredDistance * 1.4f; rtCamera.transform.LookAt(bounds.center); }这里1.4f是模型与画面边缘之间的留白系数。方形的模型可以留小一点细长的武器模型推荐留到 1.6 以上否则旋转长边时模型会冲出 RawImage 边界。RT 相机的fieldOfView建议设在 30~35 之间太大的话画面边缘会有明显的透视畸变旋转时会觉得模型“摆动”太小又会显得模型缺乏立体感。4. 让特效达到产品级RT 分辨率、相机参数与旋转手感调节4.1 RT 分辨率按 RawImage 显示尺寸倒推而不是越大越好RT 分辨率和 UI 清晰度之间的关系很多人理解成“越高越好”。如果做 3D 角色头像RawImage 最终只占屏幕 256×256你开一个 2048×2048 的 RT效果不会比 512 好多少内存却多了十几 MB。我推荐的倒推公式RT 分辨率 RawImage 在屏幕上的像素尺寸 × 1.2~1.5。比如 RawImage 占 400 物理像素RT 取 512占 700RT 取 1024。移动端要特别克制。一张 1024×1024 的 RT 大约占 8MB 到 16MB取决于是否开 Depth 与 MSAA背包界面如果有几十个道具槽位、每个都挂独立 RT内存立刻爆。常见的做法是只给当前选中的道具开 RT列表里的小图标用预先烘焙好的序列帧或者复用同一个 RT、切换模型后重新渲染。Filter Mode也影响观感RT 默认 Bilinear 会比较柔和如果你发现边缘发虚先查是不是 RawImage 被拉伸、RT 分辨率又太低而不是把 Filter Mode 改成 Point。Point 会让边缘锐利但旋转时锯齿也一览无余UI 上会很廉价。4.2 相机参数Field of View、Clipping Planes 与 HDRRT 相机和主场景相机是两套独立参数我一般这样配置参数推荐值说明Field of View30~35透视感适中旋转时变形小Near Clipping Plane0.1模型贴脸时不会裁掉Far Clipping Plane100道具展示足够Clear FlagsSolid Color配合 Alpha 为 0 的背景色实现透明底HDROff避免 HDR 输出导致 RawImage 泛白Allow MSAA按机型桌面开 4x移动端建议关掉HDR 这个点比较容易忽略。相机开着 HDR输出到 RT 时颜色值可能越过 1UI 拿到这张贴图后受颜色空间影响整个 RawImage 会泛白或偏灰。如果你发现模型在 RawImage 里颜色发闷先把相机 HDR 关掉再对比一次八成就是这里。光照方面我建议给 RT 相机单独放一盏灯不要让模型去吃主场景的光。这样主场景转场景、改天气都不会影响道具展示的亮度。4.3 旋转手感不是转速越大越跟手手感调优我通常分三步走。第一步定方向拖拽方向和模型转向是否一致交给策划或美术感受参数invertX来回试两次就知道。第二步定速度UI 拖拽距离是有限的一屏拖完最好能让模型转过 180°也就是 rotateSpeed 大约 0.4~0.6具体要按 RawImage 的宽度做等比缩放。第三步定松手后的表现这里有两种流派一种是立刻停适合道具快速看细节另一种是带惯性衰减适合抽卡展示那种“甩一下”的爽感。惯性衰减不建议在 Update 里自己写velocity衰减很容易写出反物理的顿挫感。我一般用DOTween的DOMove配合Ease.Inertia或者像上面脚本里那样用LerpAngle 阻尼。另外注意自动缓转和手动拖拽要互斥。很多需求是“待机时模型自己慢慢转玩家一摸就停”。常见错误是玩家松开后自动旋转又立刻接管造成两个旋转逻辑打架。处理方式是在OnBeginDrag里停止自动旋转在松手后 2 秒再恢复。5. 常见问题与避坑黑屏、透明底、点击穿透的排查顺序5.1 RawImage 黑屏先查相机输出链路再查层级遮挡现象3D 场景里模型看得到RawImage 一直是黑的。原因分三类按概率排序RT 相机 Culling Mask 没勾模型所在层RenderTexture 没有赋给 RawImage 的 Texture 或者赋错RT 相机被主相机的 depth 顺序影响导致渲染时模型还没就位。解决先点中 RT 相机看 Inspector 的Target Texture是否指向目标 RT再检查 Culling Mask。如果这两项都没问题就在相机上挂一个OnPreRender回调在里面 Log 一条信息确认相机这一帧确实渲染了。还有一个玄学点如果相机是enabledfalse即使指定了 RT 也不会渲染需要手动调用Render()或在脚本里设置enabled true。5.2 RT 背景不透明内置管线与 URP 的差异现象模型四周出现黑块或者整个 RawImage 是一块灰底。原因相机的Background ColorAlpha 虽然设了 0但在某些渲染管线或 HDR 开启的状态下RT 的 Alpha 通道会被填成 1。我看到最多的是 URP 项目踩这个坑——URP 对透明背景 RT 的默认行为不一样。解决最简单、最稳的处理是让 RawImage 放在一个有底色的卡片中间RT 背景直接设成和卡片背景同色用遮挡代替透明。如果一定要透明底内置管线里把背景设Color(0,0,0,0)和Clear Flags Solid Color基本能过URP 里建议查一下相机 Stack 和 PostProcessing 里是否开了 BloomBloom 会把背景 Alpha 一并处理掉。5.3 点击穿透与误触raycastTarget 和事件阈值现象在 RawImage 上拖拽模型时底下的按钮也被触发了或者整个页面点击无响应。原因uGUI 的事件系统会从上往下检测raycastTarget为 true 的 Graphic。RawImage 本身默认就是 true所以它能接收拖拽。但如果 RawImage 上面还叠了一个全屏透明 Image并且这个 Image 的raycastTarget没有关它就会先接住事件导致 RawImage 收不到任何输入。而最下面的按钮反而可能因为事件冒泡被误触。解决把所有非交互 Image 的raycastTarget全部设为 false只保留真正的按钮和 RawImage。另外拖拽和点击需要区分时在IEndDrag里判断累计位移小于 10 个像素视为点击不执行切换模型之类的逻辑。5.4 旋转方向反了与松开后跳一下现象手指向左拖模型向右转感觉像在拧螺丝或者松手一瞬间模型角度突然变一截。原因方向反了是invertX参数和屏幕坐标方向的关系没理清。在 Overlay 下手指向左滑delta.x为负yaw 减小模型往一个方向转如果相机朝向或模型自身轴向有差异就会出现反方向。跳变则是旋转逻辑直接改了目标角度、没有设置当前角度初值或者LerpAngle的目标被一下子改了 180°。解决方向问题不要在代码里硬绕先确认模型正面的朝向再调invertX一次到位。跳变问题要检查是否在Start时把currentYaw和targetYaw都初始化为模型的当前欧拉角否则第一帧阻尼会从 0 一直拉过去。我写脚本习惯在Start里做一次同步避免任何初始帧的跳变。5.5 移动端发热RT 分辨率、MSAA 与模型面数现象手机上放了两三个 RT 展示位开几分钟就发烫掉帧。原因RT 分辨率过高、相机开了 MSAA 4x、模型没有做 LOD。RT 相机会把整个渲染流程重新走一遍开 MSAA 等于把每个像素的采样次数翻几倍发热量非常大。Model 的面数如果来自 SolidWorks 导入的原生 CAD 模型动辄上百万三角面RT 相机每帧都在做大计算。解决移动端 RT 分辨率严格控制在 512 以下相机Allow MSAA关掉模型进入 Unity 前先做 Decimate 或拓扑重建。如果只是展示把相机的renderingPath设为Forward不要在 RT 相机上挂后处理。还有一个技巧模型不需要旋转时把 RT 相机从每帧渲染改成OnDemand只在角度变化时Render()能大幅降低发热和功耗。6. 进阶用法在 RawImage 上叠加交互把拖拽旋转变成卡牌翻转6.1 点击切换模型的干净实现当 RawImage 里是一个道具展示区旁边通常会有左右切换按钮。按钮放在 RawImage 之上层级即可但要注意事件冲突用户如果是在 RawImage 上拖拽旋转结束那一瞬间可能落到按钮上。我现在的做法是给按钮一个 12 像素的点击阈值。在按钮的OnPointerClick里判断“从按下到抬起”的移动距离是否超过 12超过就视为拖拽不触发切换没超过才执行切换。表层的接收者始终是按钮底层 RawImage 只接收拖拽互相不做抢占。6.2 把拖拽旋转扩展到卡牌翻转或双面模型如果你想让 RawImage 本身有“3D 翻转感”通常做法是给 RawImage 一个父节点让这个父节点的RectTransform做 y 轴旋转。但 Overlay 下没有透视会显得扁。我常用一个取巧的补救绕 y 轴转 θ 度时同时把父节点scale.x设为Mathf.Cos(θ * Mathf.Deg2Rad)模拟宽度压缩。在 θ 接近 90° 时切换正面和背面的图片然后继续转。下面是核心逻辑示意float targetAngle 0f; float currentAngle 0f; void UpdateFlip() { currentAngle Mathf.Lerp(currentAngle, targetAngle, Time.deltaTime * 8f); flipRect.localRotation Quaternion.Euler(0f, currentAngle, 0f); flipRect.localScale new Vector3(Mathf.Cos(currentAngle * Mathf.Deg2Rad), 1f, 1f); if (Mathf.Abs(currentAngle - 90f) 15f) { front.SetActive(currentAngle 90f); back.SetActive(currentAngle 90f); } }这个方案配合 RT 相机出的模型帧能做到“翻过去是一块 3D 道具”比单纯 UI 贴图旋转生动得多。验证这一套有没有做对我习惯开 Frame Debugger 数 draw call正常情况是一辆完整的 3D 车模在 RT 相机里渲染一次UI 上只多一个 RawImage 的 batch。如果发现 RawImage 的材质 batch 特别多就去查它是不是被 Canvas 拆到多个批次里了——通常和 RawImage 的层级拆分、Mask 嵌套有关。这个方案走到最后我对团队的要求只有一条遇到 UI 里的 3D 需求先别急着动 Canvas 渲染模式。试着把相机和 UI 的边界切开你会发现调试和排错都干净很多。每次看到同事改 Canvas 模式改到 UI 变形我都觉得我这条老路值得分享希望帮到你。本文还有配套的精品资源点击获取 Unity uGUI实现3D拖拽旋转：RenderTexture+RawImage方案
简介一套可直接运行的Unity 3D uGUI 3D旋转特效示例工程面向Unity初学者及UI交互开发者解决在Canvas与RectTransform体系下实现UI元素平滑三维旋转动画的问题效果简洁、易上手适合用于菜单、按钮、卡片等界面动态效果。压缩包共三百四十五个文件整体仅三点三三MB以Unity场景文件、C#脚本、asset资源文件为主辅以meta、info等工程配置元数据目录结构完整便于直接导入学习。已有四千三百零八人学习下载具有一定参考热度。包内含RotateEffect旋转控制脚本与UI交互调用示例覆盖通过修改RectTransform的Rotation或eulerAngles驱动旋转、利用Animator制作关键帧过渡动画等具体实现同时涉及Canvas渲染模式设置、锚点与偏移适配等关键处理思路并配有不同分辨率下的适配说明。整体资源小巧而结构完整既适合个人上手练习也可快速移植到实际项目中复用。1. uGUI做3D旋转特效不是给UI开Z轴是把3D画面当成一张贴图如果你在项目里接到一个需求UI 上放一个 3D 道具玩家能拖拽旋转而且要和按钮、弹窗混在同一个 Canvas 里。第一反应往往是给 RectTransform 开 Z 轴或者把 Canvas 改成 World Space。但 uGUI 本身没有透视相机靠 transform 硬转出来的东西始终是压扁的卡片。我常用的做法是反过来想把 3D 场景渲染进一张 RenderTexture当成贴图甩给 RawImage。3D 归相机管uGUI 只负责显示和交互。这套组合在项目里常被叫“unity3d 视频流”式 UI简单、好用也不容易翻车。风暴中心就一句话别让 UI 去做 3D 的活给它一张会变的画。2. 三种方案选型RenderTexture、伪3D 和 World Space 为什么我只推荐第一种2.1 伪3D 方案RectTransform 旋转的扁平感与适用边界很多人第一次尝试“3D 旋转特效”就是在 uGUI 上直接改RectTransform.rotation。比如把 x 或 y 轴改成 45°希望能看到一个倾斜的卡片。实际效果却像一块纸板被水平压缩——宽度收窄、内容变形完全没有近大远小的立体感。原因是 Screen Space - Overlay 模式下Canvas 没有透视相机顶点变换走的是正交逻辑所以绕着 y 轴转 90° 时卡片只剩一条线。这个方案不是不能用它的强项是卡牌翻转这类快速过渡不需要真实光照不需要模型贴图一个DOTween几十行就能写完。缺点是边缘永远没有透视感旋转角度大了之后看起来像“塌陷”。我一般只在正面是纯 UI 排版、背面也是纯 UI 排版时用比如设置面板的双面切换、扑克牌翻面。如果旋转目标是一个有金属质感的道具模型伪3D 方案一上来就露怯。2.2 World Space Canvas坐标换算麻烦只留给特定场景第三种做法是把 Canvas 的 Render Mode 改成 World Space然后将 RawImage 作为世界空间里的一块画布挂在场景模型旁边。这样 UI 确实能跟随世界坐标旋转、受相机投影影响看起来非常“3D”。但它最大的问题是事件系统屏幕坐标要先转成世界坐标再转成 Canvas 局部坐标点击判定要自己写射线检测。如果你做的是 VR 手柄上的悬浮面板、AR 里的标签World Space 是正解。但做手机游戏主界面里的道具展示它会让 UI 的适配和交互复杂一个量级。“简单好用”这五个字它一个都不沾所以我不推荐普通界面需求用它。2.3 RenderTexture 方案为什么它最贴合“简单好用”RenderTexture 方案的本质是把 3D 渲染结果变成一帧帧位图数据作为一张动态贴图交给 uGUI。uGUI 的Graphic类本来就有mainTexture的概念任何Texture都能作为 UI 渲染源。RawImage 内部做的就是texture直接映射 UV所以 RenderTexture 对 uGUI 来说是天然的输入。这带来的好处是3D 侧的光照、阴影、透视、抗锯齿全部由相机负责UI 侧只需要摆一张 RawImage 即可。你不需要修改 Canvas 的渲染模式不需要处理世界坐标和屏幕坐标的换算。而且从 uGUI 合批角度讲RawImage 和其他 Image 一起走 Canvas 的合批流程只要层级排布合理不会因为“嵌了 3D”就把批次打爆。这恰恰是它能“简单”的底层原因。三种方案的差异我用一张表总结方案UI 交互成本光照/透视适用场景主要风险RectTransform 旋转低无卡牌翻转、按钮动效旋转角度大时失真严重RenderTexture RawImage低完整道具展示、角色头像、游戏内视频流RT 内存、相机数量World Space Canvas高完整VR/AR、场景内拟物 UI坐标换算复杂、屏幕适配难如果需求只是“UI 上放个能转的 3D 模型”RenderTexture 方案是踩坑最少的一条路。我后面所有步骤都按这个方案写。3. 从零搭一个可拖拽旋转的3D道具展示场景、脚本与关键参数3.1 搭建 3D 侧独立相机、专属 Layer 与模型导入设置先做 3D 侧标准流程是给展示模型建一个独立 Layer比如叫UI3D然后把 RT 相机的 Culling Mask 只勾选这一层。这样 RT 相机不会把主场景的物体渲染进去主相机也不会渲染 UI3D 层里的模型互不干扰。模型从外部导入时有一件事必须先验单位。SolidWorks 类 CAD 软件导出 FBX 时默认可能是毫米Unity 默认单位是米。如果导出后模型在场景里巨大无比相机对不上视野旋转就完全没有效果。我一般会在 SolidWorks 里把导出单位切成米或者在 Unity 导入设置里把 Scale Factor 调成 0.001再勾选 Convert Units。这个坑不清掉后面调相机距离全是白费。3.2 搭建 UI 侧RenderTexture 与 RawImage 的连接Project 窗口右键创建 RenderTexture分配一个_RT_Model。不用急着把分辨率设很大先把 512×512 作为起点。创建一个 RawImage把它的 Texture 拖成刚才建的 RT。到这里如果 3D 场景里能看到模型RawImage 里就已经有画面了。接着在 RawImage 同级放一个全屏透明 Image 作为交互层或者直接让 RawImage 接收事件。注意透明 Image 的raycastTarget默认是勾选的它会把下方按钮的点击全部吃掉这个坑后面避坑章节专门说。事件入口建议直接挂在 RawImage 上uGUI 的事件系统只认GraphicraycastTargetRawImage 本身就能被射线打到。要让 RT 背景透明相机的Clear Flags设成 Solid ColorBackground Color的 Alpha 设为 0。这样 RawImage 四周不会出现黑块或白块。如果你的 UI 背景是卡片形状还可以在 RawImage 上加 Mask 做圆角裁剪。3.3 拖拽旋转脚本uGUI 事件接口与阻尼算法下面这段是我常用的拖拽旋转脚本挂载在 RawImage 上把要进行旋转的模型赋给 target。它直接利用 uGUI 的IDragHandler接口不需要自己写射线检测。using UnityEngine; using UnityEngine.EventSystems; public class DragRotate3D : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler { public Transform target; public float rotateSpeed 0.5f; public float damping 8f; public bool invertX true; private Vector2 lastPointerPosition; private float currentYaw; private float targetYaw; private float currentPitch; private float targetPitch; private bool isDragging; public void OnBeginDrag(PointerEventData eventData) { isDragging true; lastPointerPosition eventData.position; } public void OnDrag(PointerEventData eventData) { Vector2 delta eventData.position - lastPointerPosition; lastPointerPosition eventData.position; float direction invertX ? 1f : -1f; targetYaw delta.x * rotateSpeed * direction; targetPitch delta.y * rotateSpeed * 0.5f; targetPitch Mathf.Clamp(targetPitch, -30f, 30f); } public void OnEndDrag(PointerEventData eventData) { isDragging false; } void Update() { if (target null) return; currentYaw Mathf.LerpAngle(currentYaw, targetYaw, damping * Time.deltaTime); currentPitch Mathf.LerpAngle(currentPitch, targetPitch, damping * Time.deltaTime); target.rotation Quaternion.Euler(currentPitch, currentYaw, 0f); } }这段代码的关键在于它不直接改transform.rotation而是维护一组目标角度通过LerpAngle让当前角度慢慢逼近。如果直接在OnDrag里改 rotation手指松开的那一刻模型会有一帧跳变改用阻尼之后松开手模型会继续滑行一小段再稳定停在目标位置手感更像“转盘”。rotateSpeed控制灵敏度0.5 适合大部分屏幕拖拽距离长、想转快一点可以提到 0.8。damping控制在 5~10 之间值太小会有拖泥带水的感觉值太大又几乎等于没有阻尼。invertX决定你向左拖时模型是向左转还是向右转没有绝对正确以项目美术反馈为准。俯仰角限制在 30° 内是为了避免模型转过去之后露出背面、让 RT 相机拍到空背景。3.4 RT 相机的摆放用模型包围盒自动算距离RT 相机初始位置直接摆在模型前方朝向模型中心。手动调距离有一个很常见的翻车现场换了一个模型后距离没改模型在 RawImage 里变得巨大或极小。我的做法是写一个小工具或直接在 Start 里按包围盒算一版距离Renderer renderer target.GetComponentInChildrenRenderer(); if (renderer ! null) { Bounds bounds renderer.bounds; float objectSize bounds.size.magnitude; float requiredDistance objectSize / (2f * Mathf.Tan(rtCamera.fieldOfView * 0.5f * Mathf.Deg2Rad)); Vector3 direction (rtCamera.transform.position - bounds.center).normalized; rtCamera.transform.position bounds.center direction * requiredDistance * 1.4f; rtCamera.transform.LookAt(bounds.center); }这里1.4f是模型与画面边缘之间的留白系数。方形的模型可以留小一点细长的武器模型推荐留到 1.6 以上否则旋转长边时模型会冲出 RawImage 边界。RT 相机的fieldOfView建议设在 30~35 之间太大的话画面边缘会有明显的透视畸变旋转时会觉得模型“摆动”太小又会显得模型缺乏立体感。4. 让特效达到产品级RT 分辨率、相机参数与旋转手感调节4.1 RT 分辨率按 RawImage 显示尺寸倒推而不是越大越好RT 分辨率和 UI 清晰度之间的关系很多人理解成“越高越好”。如果做 3D 角色头像RawImage 最终只占屏幕 256×256你开一个 2048×2048 的 RT效果不会比 512 好多少内存却多了十几 MB。我推荐的倒推公式RT 分辨率 RawImage 在屏幕上的像素尺寸 × 1.2~1.5。比如 RawImage 占 400 物理像素RT 取 512占 700RT 取 1024。移动端要特别克制。一张 1024×1024 的 RT 大约占 8MB 到 16MB取决于是否开 Depth 与 MSAA背包界面如果有几十个道具槽位、每个都挂独立 RT内存立刻爆。常见的做法是只给当前选中的道具开 RT列表里的小图标用预先烘焙好的序列帧或者复用同一个 RT、切换模型后重新渲染。Filter Mode也影响观感RT 默认 Bilinear 会比较柔和如果你发现边缘发虚先查是不是 RawImage 被拉伸、RT 分辨率又太低而不是把 Filter Mode 改成 Point。Point 会让边缘锐利但旋转时锯齿也一览无余UI 上会很廉价。4.2 相机参数Field of View、Clipping Planes 与 HDRRT 相机和主场景相机是两套独立参数我一般这样配置参数推荐值说明Field of View30~35透视感适中旋转时变形小Near Clipping Plane0.1模型贴脸时不会裁掉Far Clipping Plane100道具展示足够Clear FlagsSolid Color配合 Alpha 为 0 的背景色实现透明底HDROff避免 HDR 输出导致 RawImage 泛白Allow MSAA按机型桌面开 4x移动端建议关掉HDR 这个点比较容易忽略。相机开着 HDR输出到 RT 时颜色值可能越过 1UI 拿到这张贴图后受颜色空间影响整个 RawImage 会泛白或偏灰。如果你发现模型在 RawImage 里颜色发闷先把相机 HDR 关掉再对比一次八成就是这里。光照方面我建议给 RT 相机单独放一盏灯不要让模型去吃主场景的光。这样主场景转场景、改天气都不会影响道具展示的亮度。4.3 旋转手感不是转速越大越跟手手感调优我通常分三步走。第一步定方向拖拽方向和模型转向是否一致交给策划或美术感受参数invertX来回试两次就知道。第二步定速度UI 拖拽距离是有限的一屏拖完最好能让模型转过 180°也就是 rotateSpeed 大约 0.4~0.6具体要按 RawImage 的宽度做等比缩放。第三步定松手后的表现这里有两种流派一种是立刻停适合道具快速看细节另一种是带惯性衰减适合抽卡展示那种“甩一下”的爽感。惯性衰减不建议在 Update 里自己写velocity衰减很容易写出反物理的顿挫感。我一般用DOTween的DOMove配合Ease.Inertia或者像上面脚本里那样用LerpAngle 阻尼。另外注意自动缓转和手动拖拽要互斥。很多需求是“待机时模型自己慢慢转玩家一摸就停”。常见错误是玩家松开后自动旋转又立刻接管造成两个旋转逻辑打架。处理方式是在OnBeginDrag里停止自动旋转在松手后 2 秒再恢复。5. 常见问题与避坑黑屏、透明底、点击穿透的排查顺序5.1 RawImage 黑屏先查相机输出链路再查层级遮挡现象3D 场景里模型看得到RawImage 一直是黑的。原因分三类按概率排序RT 相机 Culling Mask 没勾模型所在层RenderTexture 没有赋给 RawImage 的 Texture 或者赋错RT 相机被主相机的 depth 顺序影响导致渲染时模型还没就位。解决先点中 RT 相机看 Inspector 的Target Texture是否指向目标 RT再检查 Culling Mask。如果这两项都没问题就在相机上挂一个OnPreRender回调在里面 Log 一条信息确认相机这一帧确实渲染了。还有一个玄学点如果相机是enabledfalse即使指定了 RT 也不会渲染需要手动调用Render()或在脚本里设置enabled true。5.2 RT 背景不透明内置管线与 URP 的差异现象模型四周出现黑块或者整个 RawImage 是一块灰底。原因相机的Background ColorAlpha 虽然设了 0但在某些渲染管线或 HDR 开启的状态下RT 的 Alpha 通道会被填成 1。我看到最多的是 URP 项目踩这个坑——URP 对透明背景 RT 的默认行为不一样。解决最简单、最稳的处理是让 RawImage 放在一个有底色的卡片中间RT 背景直接设成和卡片背景同色用遮挡代替透明。如果一定要透明底内置管线里把背景设Color(0,0,0,0)和Clear Flags Solid Color基本能过URP 里建议查一下相机 Stack 和 PostProcessing 里是否开了 BloomBloom 会把背景 Alpha 一并处理掉。5.3 点击穿透与误触raycastTarget 和事件阈值现象在 RawImage 上拖拽模型时底下的按钮也被触发了或者整个页面点击无响应。原因uGUI 的事件系统会从上往下检测raycastTarget为 true 的 Graphic。RawImage 本身默认就是 true所以它能接收拖拽。但如果 RawImage 上面还叠了一个全屏透明 Image并且这个 Image 的raycastTarget没有关它就会先接住事件导致 RawImage 收不到任何输入。而最下面的按钮反而可能因为事件冒泡被误触。解决把所有非交互 Image 的raycastTarget全部设为 false只保留真正的按钮和 RawImage。另外拖拽和点击需要区分时在IEndDrag里判断累计位移小于 10 个像素视为点击不执行切换模型之类的逻辑。5.4 旋转方向反了与松开后跳一下现象手指向左拖模型向右转感觉像在拧螺丝或者松手一瞬间模型角度突然变一截。原因方向反了是invertX参数和屏幕坐标方向的关系没理清。在 Overlay 下手指向左滑delta.x为负yaw 减小模型往一个方向转如果相机朝向或模型自身轴向有差异就会出现反方向。跳变则是旋转逻辑直接改了目标角度、没有设置当前角度初值或者LerpAngle的目标被一下子改了 180°。解决方向问题不要在代码里硬绕先确认模型正面的朝向再调invertX一次到位。跳变问题要检查是否在Start时把currentYaw和targetYaw都初始化为模型的当前欧拉角否则第一帧阻尼会从 0 一直拉过去。我写脚本习惯在Start里做一次同步避免任何初始帧的跳变。5.5 移动端发热RT 分辨率、MSAA 与模型面数现象手机上放了两三个 RT 展示位开几分钟就发烫掉帧。原因RT 分辨率过高、相机开了 MSAA 4x、模型没有做 LOD。RT 相机会把整个渲染流程重新走一遍开 MSAA 等于把每个像素的采样次数翻几倍发热量非常大。Model 的面数如果来自 SolidWorks 导入的原生 CAD 模型动辄上百万三角面RT 相机每帧都在做大计算。解决移动端 RT 分辨率严格控制在 512 以下相机Allow MSAA关掉模型进入 Unity 前先做 Decimate 或拓扑重建。如果只是展示把相机的renderingPath设为Forward不要在 RT 相机上挂后处理。还有一个技巧模型不需要旋转时把 RT 相机从每帧渲染改成OnDemand只在角度变化时Render()能大幅降低发热和功耗。6. 进阶用法在 RawImage 上叠加交互把拖拽旋转变成卡牌翻转6.1 点击切换模型的干净实现当 RawImage 里是一个道具展示区旁边通常会有左右切换按钮。按钮放在 RawImage 之上层级即可但要注意事件冲突用户如果是在 RawImage 上拖拽旋转结束那一瞬间可能落到按钮上。我现在的做法是给按钮一个 12 像素的点击阈值。在按钮的OnPointerClick里判断“从按下到抬起”的移动距离是否超过 12超过就视为拖拽不触发切换没超过才执行切换。表层的接收者始终是按钮底层 RawImage 只接收拖拽互相不做抢占。6.2 把拖拽旋转扩展到卡牌翻转或双面模型如果你想让 RawImage 本身有“3D 翻转感”通常做法是给 RawImage 一个父节点让这个父节点的RectTransform做 y 轴旋转。但 Overlay 下没有透视会显得扁。我常用一个取巧的补救绕 y 轴转 θ 度时同时把父节点scale.x设为Mathf.Cos(θ * Mathf.Deg2Rad)模拟宽度压缩。在 θ 接近 90° 时切换正面和背面的图片然后继续转。下面是核心逻辑示意float targetAngle 0f; float currentAngle 0f; void UpdateFlip() { currentAngle Mathf.Lerp(currentAngle, targetAngle, Time.deltaTime * 8f); flipRect.localRotation Quaternion.Euler(0f, currentAngle, 0f); flipRect.localScale new Vector3(Mathf.Cos(currentAngle * Mathf.Deg2Rad), 1f, 1f); if (Mathf.Abs(currentAngle - 90f) 15f) { front.SetActive(currentAngle 90f); back.SetActive(currentAngle 90f); } }这个方案配合 RT 相机出的模型帧能做到“翻过去是一块 3D 道具”比单纯 UI 贴图旋转生动得多。验证这一套有没有做对我习惯开 Frame Debugger 数 draw call正常情况是一辆完整的 3D 车模在 RT 相机里渲染一次UI 上只多一个 RawImage 的 batch。如果发现 RawImage 的材质 batch 特别多就去查它是不是被 Canvas 拆到多个批次里了——通常和 RawImage 的层级拆分、Mask 嵌套有关。这个方案走到最后我对团队的要求只有一条遇到 UI 里的 3D 需求先别急着动 Canvas 渲染模式。试着把相机和 UI 的边界切开你会发现调试和排错都干净很多。每次看到同事改 Canvas 模式改到 UI 变形我都觉得我这条老路值得分享希望帮到你。本文还有配套的精品资源点击获取