苏绣这门手艺隔着玻璃柜看是远远不够的。针脚的走向、丝线的反光、双面绣翻面时那种两面都成立的巧劲只有在近距离、多角度、能自由走近走远的时候才看得清楚。我做这个虚拟展馆的出发点很简单线下展馆受限于场地、开放时间和保护要求很多绣品只能远观于是我打算用Unity 3D加C#搭一套可以自由漫游、走近细看、点击读解说、能切换楼层看全貌的苏绣文化主题虚拟展馆交互漫游系统。这套东西适合游戏开发入门不久、想找一个完整可交付项目练手的人也适合做数字文博、展厅展示方向、手里有展品资源但缺技术落地思路的同行参考。整篇我会把方案选型、场景搭建、交互代码、数据驱动、性能排序和踩过的坑一次说透代码都是能直接抄进工程里跑起来的写法。1. 项目整体构思与方案选型拆解动手之前最忌讳的就是打开Unity先摆两个方块。我一般会先把这个系统到底要满足谁、用在哪、跑在什么机器上这三件事定下来再决定技术路线否则后期返工的时间成本远大于前期想清楚的那点投入。这一节我把整个项目的顶层设计思路摊开讲包括主题定位、技术栈搭配和系统分层后面所有具体实现都是从这里长出来的。1.1 为什么挑苏绣做虚拟展馆的主题苏绣这个题材有个别的非遗项目不太具备的优势——它的观赏价值高度依赖距离感。远看是一幅画走近了才能看到一根丝线被劈成几十份甚至更细的劈丝工艺看到乱针绣里线的堆叠方向。这种越近越有内容的特性恰好是虚拟漫游最擅长表达的东西玩家可以贴着展品看细节也可以退后一步看整体构图这是实体展柜很难提供的自由。另一个考虑是展品的分类结构天然清晰。苏绣大致可以按针法平针、乱针、打籽、盘金等、题材花鸟、山水、人物、走兽、形态单面绣、双面绣、双面异色绣几个维度去组织这意味着展馆的楼层和展区划分有现成的逻辑可以套不用我硬编一个分类体系。我最后定的是三层结构一层按针法流派布展二层按题材分区三层做双面绣和互动体验专区。这个划分后面在数据表里会体现成楼层的枚举字段。还有一点是素材可得性的问题。苏绣的公开图片资料相对丰富做教学演示或者个人作品集的时候不用承担过重的版权压力当然正式商用还是得逐个确认授权这点后面会细说。综合下来苏绣在文化厚度和可数字化程度之间找到了一个很舒服的平衡点。1.2 Unity 3D C# 这套组合的取舍逻辑为什么用Unity而不是虚幻或者干脆做个网页端的Three.js展厅我把当时的决策依据列一下方便你判断自己的项目是不是也适合这套路线。对比维度Unity 3D C#虚幻引擎纯Web方案学习曲线平缓C#语法友好蓝图C较陡前端栈但3D性能受限中小展馆性能足够URP优化空间大画质强但吃配置移动端卡顿明显打包发布PC/移动/WebGL都能出主要面向PC主机天然跨平台但体验受限美术工作流导入fbx/贴图流程成熟材质系统更强需大量手工调优就业与资料极多遇到问题好查相对少前端生态大但3D偏门选Unity的核心原因是这个项目的复杂度其实集中在交互逻辑和内容管理上而不是极致画质。苏绣展品的真实感靠的是高清贴图和恰当的光照不需要虚幻那套Lumen级别的实时全局光。URP管线在保证画面不拉胯的同时能让我在中端笔记本上稳定跑到60帧这对一个要拿去演示、甚至想在平板上跑的系统来说太重要了。C#这边我建议至少掌握到面向对象委托协程这三块。这个项目里展品点击事件的分发用到了委托漫游相机的平滑、展品信息面板的淡入淡出用到了协程展品数据的结构用到了类和序列化。不用一上来啃什么高级编程把这个三件套吃透项目就写得动了。1.3 交互漫游系统的功能分区我把整个系统拆成五块边界划清楚之后写代码时思路会清爽很多。漫游控制模块负责相机移动、转向、碰撞、模式切换第一人称/轨道观察交互触发模块负责射线检测、展品选中、触发信息面板内容数据模块负责展品数据表、楼层信息、解说的加载与查询UI与导航模块负责小地图、楼层切换、操作提示、返回按钮氛围表现模块负责光照、音效、展品高亮、导览动线这五块之间尽量解耦比如内容数据模块只对外暴露查询接口谁来调都行这样以后要加语音导览、加多语言改的只是数据层不会牵一发动全身。这种提前把接口想好的习惯是我在几个项目返工之后才养成的真的能省命。2. 场景搭建与苏绣展品的美术处理要点技术方案定完接下来就是最花时间的部分——把展馆这个壳和里面的苏绣展品做出来。这一步看着是美术活其实处处是技术决策管线选哪个、贴图用什么格式、光照怎么摆才既好看又不卡。我按自己实际操作的顺序讲中间那些为什么这么干的理由都会点出来。2.1 URP管线的创建与关键参数设置现在新建工程我基本都是选3D (URP)模板原因很直接内置管线在新项目上已经不太推荐了URP在移动端和WebGL上的表现也明显更稳。如果你是老项目升级或者从模板里没找到URP选项可以在Package Manager里装Universal RP包然后创建管线资产并在Project Settings的Graphics里指定。这里有个新手经常卡住的点创建URP Asset的时候要同时生成一个Renderer两者要配对如果只指定了Asset没配Renderer画面会直接变粉或者黑屏。我踩过这个坑在Project面板右键Create Rendering URP Asset (with Universal Renderer)一次把两个都生成好省事。关键参数我一般这么调抗锯齿Anti Aliasing选2x或4x MSAA。展品边缘的丝线如果锯齿明显观感会很廉价这个开销值得花。阴影距离Shadow Distance压到30到50之间。展馆室内场景太远的阴影根本看不见白白浪费性能。HDR开启。苏绣丝线的反光有高光细节开HDR能让这部分层次更自然。Render Scale桌面端保持1.0移动端视情况降到0.8肉眼几乎看不出区别帧率能提一截。注意URP下材质必须用URP兼容的Shader用内置管线的Standard Shader会出现品红色报错材质。导入老资源包后如果一片粉先检查材质Shader。2.2 苏绣展品的模型与贴图处理苏绣展品的建模有个原则平面绣品不要建太厚的几何体。我见过有人把一幅绣品做成一个厚实的立方体看着像砖头完全没了布的质感。正确做法是做一个极薄的平面Plane或薄Box把绣品的高清图作为基础色贴图贴上去靠法线贴图去模拟丝线起伏。贴图这块是重点也是画质和性能的平衡点。我的处理流程是这样的原图采集如果拿得到高清拍摄图尽量用4000像素以上宽度的原图细节是虚拟展馆最大的卖点。压缩格式桌面端用BC7质量高移动端用ASTC。不要用默认的无压缩显存会爆。Mipmap开启漫游时展品会从远到近变化不开Mipmap远处会闪烁摩尔纹这是室内漫游最影响观感的细节之一。法线贴图从原图的灰度生成一张强度调到0.3到0.5之间。太强会像浮雕太弱又没质感这个值我是试了好几版才定下来的。如果原图分辨率不够别硬拉伸拉伸只会糊。可以接受的做法是降低该展品在馆内的主推等级把它放在稍远的位置用构图掩盖分辨率不足而不是怼在玩家脸上。2.3 展馆空间布局与光照设计展馆的动线设计直接决定玩家会不会迷路。我采用的是中庭环形展区结构入口进来是一个挑空中庭两侧是环形走廊展品沿墙布置中间留出走动空间。这样玩家无论走到哪抬头都能看到中庭方向感不会丢。光照我分了三个层次环境光Ambient调到偏冷的低强度灰蓝色模拟展馆的漫反射底光避免暗处全黑。主光Directional Light一盏模拟顶部天窗的日光角度压低一点让展品有方向性的明暗变化。重点光Spot Light每件主推展品配一盏聚光灯从上方斜打突出丝线反光。聚光灯数量要控制超过十五盏就要考虑合并或改用烘焙。这里有个性能上的关键选择静态展品和静态光照尽量烘焙。用Baked或Mixed模式把光照烘进Lightmap运行时就不用实时光计算帧率会稳很多。动态的只有玩家相机和少量特效负担很轻。苏绣展厅是静态场景烘焙几乎是必选项。烘焙前记得把展馆模型标记为Static否则不会进烘焙。3. 交互漫游核心功能的C#实现前面都是准备这一节进入真正写代码的部分。我把漫游控制、展品交互、小地图导航、音效氛围这几个核心功能逐个拆开每个都给出可运行的代码思路和关键参数。代码都是简化后的核心逻辑你可以直接在此基础上扩展。3.1 双模式漫游控制器的设计漫游体验我做了两种模式第一人称自由行走贴近展品细看和轨道观察模式围绕单件展品旋转。为什么要两种因为第一人称适合空间探索但看单件展品时轨道旋转才能让人360度端详。用户在两者之间用右键或按钮切换。第一人称的核心是相机跟随与碰撞。我用CharacterController组件而不是Rigidbody原因是CharacterController移动更跟手、不会因为物理反弹而抖动适合室内漫游这种走地面的场景。using UnityEngine; public class FirstPersonWalker : MonoBehaviour { public float walkSpeed 3.0f; // 正常行走速度 public float runSpeed 6.0f; // 加速跑 public float mouseSensitivity 2.0f; public float gravity -9.81f; private CharacterController controller; private Transform cam; private float verticalVelocity; private float xRotation 0f; void Start() { controller GetComponentCharacterController(); cam Camera.main.transform; Cursor.lockState CursorLockMode.Locked; // 锁定鼠标 } void Update() { // 鼠标转向 float mx Input.GetAxis(Mouse X) * mouseSensitivity; float my Input.GetAxis(Mouse Y) * mouseSensitivity; xRotation - my; xRotation Mathf.Clamp(xRotation, -80f, 80f); // 限制上下视角 cam.localRotation Quaternion.Euler(xRotation, 0f, 0f); transform.Rotate(Vector3.up * mx); // 键盘移动 float h Input.GetAxis(Horizontal); float v Input.GetAxis(Vertical); Vector3 move transform.right * h transform.forward * v; float speed Input.GetKey(KeyCode.LeftShift) ? runSpeed : walkSpeed; // 重力处理保证贴地 if (controller.isGrounded verticalVelocity 0) verticalVelocity -2f; verticalVelocity gravity * Time.deltaTime; controller.Move(move * speed * Time.deltaTime Vector3.up * verticalVelocity * Time.deltaTime); } }这段代码里有两个我特意处理的地方。第一是xRotation用Mathf.Clamp限制在正负80度防止玩家把视角翻到背后导致眩晕第二是isGrounded时把verticalVelocity压到-2而不是0这样能保证角色持续贴着地面避免在楼梯或斜坡上飘浮。这些细节在文档里不会写但你在实际测试时一定碰到。轨道模式就简单多了用Transform.RotateAround围绕目标点旋转即可切换时把相机位置插值过去用协程做平滑过渡IEnumerator SwitchToOrbit(Transform target) { Vector3 startPos cam.position; Quaternion startRot cam.rotation; Vector3 endPos target.position target.forward * 2.5f; // 展品前方2.5米 Quaternion endRot Quaternion.LookRotation(target.position - endPos); float t 0f; while (t 1f) { t Time.deltaTime / 0.6f; // 0.6秒过渡 float e Mathf.SmoothStep(0f, 1f, t); // 缓入缓出 cam.position Vector3.Lerp(startPos, endPos, e); cam.rotation Quaternion.Slerp(startRot, endRot, e); yield return null; } }用SmoothStep而不是线性插值是因为线性过渡会显得生硬缓入缓出更接近人自然的注意力转移。3.2 展品射线检测与信息面板触发展品交互的核心是射线检测。玩家视线指向哪件展品那件展品就该有反馈比如轻微高亮点击则弹出信息面板。这里我用的是每帧从相机中心发一条射线而不是挂一堆Collider的OnMouse事件因为前者更可控、性能也更集中。using UnityEngine; using UnityEngine.UI; public class ExhibitInteractor : MonoBehaviour { public float maxDistance 8f; // 最远可交互距离 public LayerMask exhibitLayer; // 只检测展品层 public GameObject infoPanel; // 信息面板 public Text titleText; public Text descText; private ExhibitData currentData; void Update() { Ray ray new Ray(Camera.main.transform.position, Camera.main.transform.forward); RaycastHit hit; if (Physics.Raycast(ray, out hit, maxDistance, exhibitLayer)) { var exhibit hit.collider.GetComponentExhibitItem(); if (exhibit ! null exhibit ! currentData?.owner) { currentData exhibit.data; Highlight(hit.collider); // 高亮 // 显示交互提示 if (Input.GetMouseButtonDown(0)) ShowInfo(exhibit.data); } } } void ShowInfo(ExhibitData data) { infoPanel.SetActive(true); titleText.text data.exhibitName; descText.text data.description; Cursor.lockState CursorLockMode.None; // 弹出面板时解锁鼠标 Cursor.visible true; } }这里有两点经验。第一是LayerMask一定要单独设一层给展品不要用Default否则射线会打到墙壁、地面交互判定就乱了。第二是弹出信息面板时记得解锁鼠标否则玩家没法点面板上的关闭按钮这是很多新手第一次做展馆系统时必踩的坑。高亮效果我用的是材质属性块MaterialPropertyBlock去改Emission而不是直接改材质这样不会产生材质实例、不会影响其他共用同一材质的展品性能更友好void Highlight(Collider col) { var renderer col.GetComponentRenderer(); var block new MaterialPropertyBlock(); renderer.GetPropertyBlock(block); block.SetColor(_EmissionColor, new Color(0.15f, 0.2f, 0.1f)); renderer.SetPropertyBlock(block); }3.3 楼层小地图与导航系统展馆分三层玩家容易迷失小地图几乎是刚需。我的做法是用正交相机俯拍每层渲染成RenderTexture然后在小地图UI上显示玩家相对位置的一个图标。具体实现思路在每层楼正上方放一个正交相机orthographicSize调到能覆盖整层输出到一张RenderTexture。小地图UI用一个RawImage显示这张图玩家图标的位置根据玩家世界坐标映射到这张图的UV坐标上public class MinimapIcon : MonoBehaviour { public Transform player; public RectTransform iconRect; public RectTransform mapRect; public Vector2 worldMin; // 该层左下角世界坐标 public Vector2 worldMax; // 该层右上角世界坐标 void Update() { Vector2 p new Vector2(player.position.x, player.position.z); // 归一化到0~1 float u Mathf.InverseLerp(worldMin.x, worldMax.x, p.x); float v Mathf.InverseLerp(worldMin.y, worldMax.y, p.y); // 映射到地图Rect Vector2 size mapRect.rect.size; iconRect.anchoredPosition new Vector2( (u - 0.5f) * size.x, (v - 0.5f) * size.y ); // 图标旋转跟随玩家朝向 iconRect.localRotation Quaternion.Euler(0, 0, -player.eulerAngles.y); } }这个映射逻辑的关键在于worldMin和worldMax要跟你那层楼的俯拍范围严格对应。我一开始没对齐图标总是偏到地图外面后来在每个楼层根节点上挂了个记录包围盒的脚本用Renderer.bounds自动算出这两个值才彻底稳了。同理楼层切换时要同时切换RenderTexture和玩家所在的坐标范围否则一换层图标就乱飞。3.4 氛围音效与脚步声控制漫游最考验沉浸感的往往是声音。我做了三处音效环境底噪展馆里轻微的回响、脚步声随地面材质变化、交互音点击展品时的轻微提示音。脚步声我用的是一个很实用的技巧——按移动距离累积触发而不是按时间。因为走路速度是变化的按时间的话加速跑时脚步会显得太稀疏。按距离累积则无论快慢步频都自然public class FootstepPlayer : MonoBehaviour { public AudioClip[] stepClips; public float stepInterval 2.2f; // 每走2.2米一步 private float accumulated 0f; private Vector3 lastPos; private AudioSource source; void Start() { source GetComponentAudioSource(); lastPos transform.position; } void Update() { float dist Vector3.Distance(transform.position, lastPos); accumulated dist; lastPos transform.position; if (accumulated stepInterval) { accumulated 0f; var clip stepClips[Random.Range(0, stepClips.Length)]; source.pitch Random.Range(0.95f, 1.05f); // 音高随机避免机械感 source.PlayOneShot(clip); } } }让每个脚步的音高随机波动是让脚步声不假的秘诀同一个音效反复播会非常出戏。这个值是随机±5%多了会怪。环境音我用两个AudioSource循环播放一个放低频底噪一个放高频细节比如远处的人声、翻页声两层叠起来空间感就有了。4. 展品数据管理与内容扩展方案一个可持续使用的虚拟展馆不能把展品信息写死在场景里那样改一句话都要重新摆。我把所有展品信息抽到数据层场景里只放一个壳具体内容从数据表读。这一节讲数据怎么组织、面板怎么动态生成、以后怎么扩展。4.1 ScriptableObject 与 JSON 的取舍展品数据用什么存我对比了两种方案最后用了两者结合的方式你也许会好奇为什么不选一个。方案优点缺点适用场景ScriptableObject编辑器内可视编辑类型安全引用方便内容修改要重新打包展品数量固定、编辑期确定JSON/文本可热更、可外部编辑需自写解析、无类型提示内容频繁变动、需远程更新我的做法是展品基础数据用ScriptableObject可以动态更新的部分用JSON覆盖。比如展品的编号、楼层、关联模型路径写在SO里而解说文字、语音导览路径这类可能后续想改的内容允许用JSON覆盖。这样开发期用SO爽快上线后想改文案又不用重新打包。展品数据结构大概长这样[CreateAssetMenu(fileName ExhibitData, menuName 苏绣展馆/展品数据)] public class ExhibitData : ScriptableObject { public string exhibitId; // 唯一编号如 SX-A-001 public string exhibitName; // 展品名 public int floor; // 所在楼层 public NeedleType needleType; // 针法枚举 public string theme; // 题材分类 public Sprite thumbnail; // 缩略图 public string description; // 解说文字 public AudioClip guideAudio; // 语音导览 public GameObject modelPrefab; // 展品模型 } public enum NeedleType { PingZhen, LuanZhen, DaZiZhen, PanJinZhen, Other }用枚举比用字符串省心编辑器里是下拉框不会手滑打错字代码里做筛选也快。4.2 展品信息面板的动态渲染信息面板不是为每件展品单独做一个而是一个通用模板数据变了内容就变。面板上有缩略图、标题、针法标签、解说文字、语音播放按钮。打开时用协程做淡入关闭时淡出。IEnumerator FadeIn(CanvasGroup panel) { panel.alpha 0f; while (panel.alpha 1f) { panel.alpha Time.deltaTime * 4f; yield return null; } }面板打开时顺带做两件事暂停漫游输入不然玩家一边看面板一边还在走会穿墙和切换鼠标解锁。关闭时反向操作。这个打开面板就冻结移动的逻辑我最初漏了测试时一开面板角色就往前飘撞进展品里非常尴尬。4.3 展馆内容的批量导入与校验展品多了以后一个个手填SO效率太低也容易填错。我写了一个编辑器扩展从CSV批量生成SO资产同时做基础校验。#if UNITY_EDITOR using UnityEditor; using UnityEngine; using System.IO; public class ExhibitImporter { [MenuItem(苏绣展馆/从CSV导入展品)] static void ImportFromCSV() { string path EditorUtility.OpenFilePanel(选择展品CSV, , csv); if (string.IsNullOrEmpty(path)) return; string[] lines File.ReadAllLines(path); for (int i 1; i lines.Length; i) // 跳过表头 { string[] cols lines[i].Split(,); var data ScriptableObject.CreateInstanceExhibitData(); data.exhibitId cols[0]; data.exhibitName cols[1]; data.floor int.Parse(cols[2]); data.description cols[3]; // 校验ID重复 if (AssetDatabase.FindAssets($t:ExhibitData {data.exhibitId}).Length 0) { Debug.LogWarning($展品ID重复{data.exhibitId}); continue; } AssetDatabase.CreateAsset(data, $Assets/Exhibits/{data.exhibitId}.asset); } AssetDatabase.SaveAssets(); AssetDatabase.Refresh(); } } #endif这个导入器里我加了一个ID重复校验因为这种批量工具最容易出问题的就是编号撞车。ID重复会导致后续按ID查找时永远只查得到第一件排查起来很头疼不如在导入阶段就拦掉。这类防呆设计做内容管理工具时一定要有。5. 常见问题排查与性能优化实录前面讲的都是正确怎么做但真实开发里大部分时间花在为什么不对。这一节我把这个项目实际遇到过的典型问题、性能瓶颈和优化手段整理出来做成能查的速查表也分享几个优化上的取舍经验。5.1 交互漫游系统的典型问题速查下面这张表是我踩过或见我朋友踩过的坑按现象、原因、解决整理方便你对照排查。现象可能原因解决方案展品一片品红材质用了内置Shader换成URP Lit材质玩家能穿墙CharacterController未挂碰撞体或墙无Collider检查墙体碰撞体和控制器半径点击展品没反应LayerMask没设对射线打到墙给展品单独设Layer开信息面板还能走未冻结输入打开面板时禁用移动脚本小地图图标乱飞worldMin/Max与楼层范围不对应用包围盒自动计算范围相机切换后抖动插值未缓动用SmoothStep替代Lerp远处展品闪烁未开Mipmap贴图开启Mipmap帧率只有30出头实时光阴影距离过大烘焙光照压缩阴影距离脚步声忽快忽慢按时间触发改为按移动距离累积触发打包后文字变方块字体未包含检查字体图集和fallback这张表你要是能在开发前先看一遍能省掉至少一半的调试时间。我特别想强调点击展品没反应这个十有八九是Layer的问题而不是代码写错了。排查时先打日志确认射线有没有命中命中了再查Layer是否正确一步步收敛比盲目改代码快得多。5.2 移动端与低配设备的优化清单如果这个展馆要跑在平板或者中端笔记本上下面这些优化我建议逐条过一遍光照烘焙运行时零实时光。这是收益最大的一条把Static物体全部烘焙Directional光设Mixed场景里的实时阴影基本消失帧率能翻倍。贴图分级。主推展品用2048普通展品用1024远景装饰用512。不要所有贴图都4096显存和带宽撑不住。URP Render Scale降到0.8。画质损失很小但能显著降GPU负担。合批优化。场景里材质相同的物体尽量共用材质比如展馆墙面的统一材质这样Unity的SRP Batcher能发挥效果。用Frame Debugger能看到Draw Call数量超过150就要警惕。剔除设置。给展区加Occlusion Culling让背对玩家的展区不渲染。烘焙Occlusion后玩家在中庭时走廊里的展品会被剔掉省下不少开销。声音压缩。环境音用Vorbis压缩脚步音用短wav音效不要用未压缩的大文件。注意Occlusion Culling烘焙前所有参与剔除的物体要标记为Occluder Static或Occludee Static否则烘焙出来是空的。这个标记和光照的Static是两套掩码别搞混。5.3 打包发布与部署踩坑记录最后说打包。PC端直接Build就行没什么坑。移动端和WebGL就有讲究了。移动端打包Audio不要用Decompress On Load会瞬间占满内存改成Compressed In Memory。纹理压缩选ASTC压缩质量在Project Settings里可调中端设备建议用6x6块大小兼顾质量和体积。WebGL打包是坑最多的一类。首先音频会延迟加载导致第一声脚步有延迟其次线程限制会让一些异步代码表现异常再就是压缩格式要选对Brotli压缩能大幅减小包体但服务器要配对应支持。如果你选择WebGL部署建议把大贴图适当降级并且给加载过程做个进度条不然用户会以为页面卡死了。我个人的经验是演示用途优先出Windows包最稳、性能最好。WebGL留给扫码即看的轻量场景别指望在它上面跑满画质。聊到最后分享两个我觉得最值得记住的点。一个是数据与场景分离展品信息一定抽到SO或JSON场景只负责位置和外观这样内容迭代起来才不会一动就散。另一个是先做动线再堆细节展馆漫游最忌讳一开始就拼命堆贴图先把从入口到各展区的行走路线跑顺、把交互闭环打通画质永远是最后一步的事。我在这个项目上返工最狠的一次就是一开始把光打得很满结果加展区时帧率崩了回头全拆重烘。真实做项目顺序比技巧重要。后续这套系统还能往下长接上语音识别做口令导览或者把展品数据从本地SO换成远程JSON配合后台管理做在线更新就变成一个能持续运营的数字展厅了。这些方向留给有需要的人继续折腾吧。