1. 项目概述一张图一个世界最近几年VR看房几乎成了房产中介和家装公司的标配。你肯定在朋友圈或者一些App里见过那种可以360度无死角旋转还能点一点切换房间的看房页面。很多人觉得这技术门槛很高得用专业的全景相机或者复杂的3D建模。其实如果你手头有一张现成的全景图无论是用手机全景模式拍的还是用3D软件渲染出来的用Unity在一天之内你就能把它变成一个可以在电脑和手机上自由探索、交互的简易VR看房场景。这不仅仅是“看”而是“走进”那张图里。这个教程就是带你走通这个完整的流程。我们不谈深奥的图形学原理也不写复杂的底层代码而是聚焦于如何利用Unity强大的可视化编辑器和一些现成的脚本逻辑像搭积木一样把静态的全景图变成动态的、可交互的虚拟空间。无论你是想给自己的作品集增加一个亮眼的交互项目还是作为美术或策划人员需要快速搭建一个演示原型这套方法都能让你快速上手。整个过程的核心思路非常直观把全景图“贴”在一个球体的内表面然后把摄像机放在球心这样无论你怎么旋转摄像机看到的都是球体内壁的图片从而模拟出身处全景环境中的感觉。剩下的就是围绕这个核心添加上旋转、缩放、热点跳转这些让体验“活”起来的交互功能。2. 核心原理与前期准备2.1 全景图与“天球”模型为什么一张平面的全景图能变成360度的场景这背后的原理基于一个简单的几何模型——天球。想象一下你站在一个完全中空、内壁贴满了世界地图的巨大球体正中心。无论你朝哪个方向看你看到的都是球体内壁的图案。Unity实现全景浏览就是对这个物理模型的数字化模拟。我们需要的全景图通常是一种名为“等距柱状投影”的图片。这种图片的特点是宽高比为2:1例如4096x2048它把整个球面的信息“展开”成一张矩形图。水平方向经度覆盖360度垂直方向纬度覆盖180度。在Unity中我们会创建一个球体Sphere将这张图片作为材质Material的纹理Texture赋予它但关键步骤是将球体的法线翻转。因为默认球体的外表面是正面我们需要看到的是内表面。翻转法线后摄像机置于球心渲染的就是球体内壁的纹理从而形成全景视野。注意并非所有名为“全景图”的图片都直接可用。手机拍摄的“全景模式”照片通常是长条形的水平拼接并非完整的360x180度球面投影无法直接用于此方法。你需要的是真正的360度全景图通常由专业全景相机如Insta360、理光Theta拍摄或由3D渲染软件如3ds Max, Blender, V-Ray渲染输出。2.2 工具与资源准备清单在开始动手之前我们需要把“厨房”准备好。以下是你会用到的所有工具和资源Unity编辑器建议使用长期支持版本如2021.3 LTS或2022.3 LTS。它们稳定性高社区资源丰富。直接从Unity Hub下载安装即可。全景图资源至少准备一张2:1比例的360度全景图。为了制作多房间切换的演示最好能准备2-3张不同空间如客厅、卧室、厨房的全景图。图片格式推荐JPG节省空间或PNG保证质量尺寸建议在4096x2048以上以获得清晰的细节。开发环境配置新建项目打开Unity Hub创建一个新的3D项目Core或URP模板均可本教程以标准Core模板为例兼容性最广。导入必要资源除了你的全景图可能还需要一些UI素材如按钮图标、箭头图标等。你可以使用Unity自带的UI系统绘制也可以提前用PS等工具制作好。脚本准备我们将一步步编写核心交互脚本。你需要对C#脚本有最基本的了解比如如何创建脚本、将其挂载到游戏对象上。别担心代码都会提供并详细解释。3. 构建基础全景观察器3.1 创建场景与天空球首先我们搭建最基础的、能看的全景环境。新建场景与摄像机在Unity中新建一个场景File - New Scene。场景中默认会有一个主摄像机Main Camera和方向光Directional Light。将主摄像机的位置重置为原点0 0 0。创建天空球在Hierarchy面板右键 - 3D Object - Sphere创建一个球体。将其重命名为“SkySphere”。调整球体属性选中SkySphere在Inspector面板中将Scale设置为-1 1 1。这是翻转法线最直接有效的方法通过将X轴缩放设为负值相当于将球体“内外翻转”我们就能看到内表面了。你也可以通过创建一个反转法线的材质着色器来实现但缩放为负是最快捷的。将Position设置为0 0 0确保摄像机在球心。创建并应用全景材质在Project面板右键 - Create - Material创建一个新材质命名为“PanoramaMat”。选中这个材质在Inspector中将Shader改为“Unlit/Texture”。全景图不需要光照计算使用无光照着色器效率更高且能完全还原图片色彩。将你的全景图纹理拖拽到材质的“Texture”属性槽中。最后将这个材质拖拽到场景中的SkySphere对象上。现在运行游戏你应该已经可以通过拖动Game视图看到一个静态的全景环境了。但这还不够我们需要用鼠标或触摸来控制观察方向。3.2 实现鼠标拖拽旋转观察静态的全景就像一张被钉死的壁画交互的核心是让摄像机“环顾四周”。我们将编写一个脚本让用户通过拖拽鼠标来旋转摄像机。创建控制脚本在Project面板右键 - Create - C# Script命名为“PanoramaLook”。编写旋转逻辑双击打开脚本编写以下代码using UnityEngine; public class PanoramaLook : MonoBehaviour { [Header(旋转控制)] public float rotationSpeed 2.0f; // 旋转灵敏度 public bool invertVertical false; // 是否反转垂直方向 private Vector3 _lastMousePosition; private float _rotationX 0f; private float _rotationY 0f; void Update() { // 当用户按下鼠标左键时开始记录 if (Input.GetMouseButtonDown(0)) { _lastMousePosition Input.mousePosition; } // 当用户按住鼠标左键拖拽时进行旋转 if (Input.GetMouseButton(0)) { Vector3 delta Input.mousePosition - _lastMousePosition; _lastMousePosition Input.mousePosition; // 计算旋转量。delta.x控制左右看绕Y轴旋转delta.y控制上下看绕X轴旋转 float invertFlag invertVertical ? -1f : 1f; _rotationY delta.x * rotationSpeed * Time.deltaTime; _rotationX delta.y * rotationSpeed * Time.deltaTime * invertFlag; // 限制上下看的幅度避免脖子“折断”超过±90度 _rotationX Mathf.Clamp(_rotationX, -90f, 90f); // 应用旋转到摄像机。注意旋转顺序先绕Y轴水平再绕X轴垂直 transform.rotation Quaternion.Euler(_rotationX, _rotationY, 0); } } }挂载脚本并测试将这个脚本拖拽到Hierarchy中的Main Camera对象上。运行游戏在Game视图中按住鼠标左键并拖拽你应该可以看到全景视角随着鼠标移动而流畅旋转了。实操心得rotationSpeed参数需要根据你的项目感觉来调整。在PC上2.0可能比较合适在手机WebGL上由于触屏操作更精细可能需要调到3.0或更高。Mathf.Clamp限制上下视角非常重要否则用户可能会看到天空球扭曲的顶部和底部极点破坏沉浸感。4. 增强交互缩放、UI与房间切换基础观察有了现在我们来添加更实用的功能让它像一个真正的看房应用。4.1 实现视野缩放模拟走近看细节在真实看房时我们常常想凑近看看墙上的画或者家具的细节。在VR全景中我们可以通过改变摄像机的视野Field of View FOV来模拟这个效果。FOV越大看到的范围越广但单个物体显得越小像广角镜头FOV越小看到的范围越窄但物体显得越大像长焦镜头。创建缩放脚本新建一个C#脚本命名为“PanoramaZoom”。编写缩放逻辑我们将使用鼠标滚轮来控制FOV。using UnityEngine; public class PanoramaZoom : MonoBehaviour { [Header(缩放控制)] public float zoomSpeed 10.0f; // 缩放速度 public float minFOV 20f; // 最小视野放大极限 public float maxFOV 90f; // 最大视野默认视野 private Camera _camera; void Start() { _camera GetComponentCamera(); if (_camera null) { Debug.LogError(PanoramaZoom脚本需要挂载在带有Camera组件的对象上); } // 初始化FOV为最大值 _camera.fieldOfView maxFOV; } void Update() { float scroll Input.GetAxis(Mouse ScrollWheel); if (scroll ! 0) { // 滚轮向上是正值对应缩小FOV放大物体 float targetFOV _camera.fieldOfView - scroll * zoomSpeed; targetFOV Mathf.Clamp(targetFOV, minFOV, maxFOV); _camera.fieldOfView targetFOV; } } }挂载与测试将此脚本也挂载到Main Camera上。运行游戏滚动鼠标滚轮你应该能看到视野的放大和缩小效果。4.2 构建用户界面小地图与方位指针一个友好的UI能极大提升用户体验。我们将添加两个经典元素一个缩略图小地图和一个指示当前朝向的方位指针。创建UI Canvas在Hierarchy面板右键 - UI - Canvas。这会创建一个渲染UI的画布。将其渲染模式Render Mode设置为“Screen Space - Overlay”。制作小地图在Canvas下创建一个Image右键Canvas - UI - Image重命名为“MiniMap”。调整其锚点Anchor到右上角并设置合适的偏移PosX PosY为负值将其放在屏幕右上角。为其Source Image赋予一个圆形或方形的Sprite作为底图。你可以导入一张图片或将Texture Type设置为“Sprite (2D and UI)”。在小地图Image下再创建一个子Image重命名为“DirectionIndicator”作为方向指针。将其设置为一个三角形箭头Sprite。我们需要一个脚本来根据摄像机的水平旋转Y轴旋转来同步旋转这个箭头。编写小地图指针同步脚本创建一个脚本“MiniMapController”。using UnityEngine; using UnityEngine.UI; public class MiniMapController : MonoBehaviour { public Transform playerCamera; // 主摄像机 public RectTransform directionIndicator; // UI中的方向指针 void Update() { if (playerCamera ! null directionIndicator ! null) { // 获取摄像机的Y轴旋转角度水平方向 float cameraYRotation playerCamera.eulerAngles.y; // 将旋转角度应用到UI指针上注意UI旋转是绕Z轴 directionIndicator.localRotation Quaternion.Euler(0, 0, -cameraYRotation); } } }关联与测试将脚本挂载到Canvas或任意活动对象上。在Inspector中将Main Camera拖拽到playerCamera槽将UI中的箭头对象拖拽到directionIndicator槽。运行游戏旋转摄像机你会发现右上角小地图上的箭头会同步转动始终指向你观看的方位。4.3 实现多房间热点跳转这是让场景“可交互”的关键。我们将在全景图中设定一些热点比如门、箭头图标点击后可以切换到另一个房间的全景图。准备多张全景图确保你有多个房间的全景图素材。创建热点触发器在场景中创建3D物体作为热点比如一个Cube或一个Quad平面。将其缩放并放置到天空球内部的大致位置例如在门口处。为其添加一个Collider碰撞器和以下脚本“RoomHotspot”。using UnityEngine; public class RoomHotspot : MonoBehaviour { public Texture nextRoomTexture; // 在Inspector中指定下一张全景图 public GameObject skySphere; // 对SkySphere对象的引用 void OnMouseDown() // 当鼠标点击此碰撞器时触发 { if (skySphere ! null nextRoomTexture ! null) { Renderer renderer skySphere.GetComponentRenderer(); if (renderer ! null) { // 更换天空球材质的主纹理 renderer.material.mainTexture nextRoomTexture; Debug.Log(切换到下一个房间); } } } }配置热点将脚本挂载到作为热点的3D物体上。在Inspector中将SkySphere对象拖入skySphere槽将另一张全景图纹理拖入nextRoomTexture槽。优化与视觉反馈直接使用Cube作为热点不美观。我们可以将其渲染器Renderer组件禁用使其在游戏中不可见但碰撞器依然有效。同时可以添加一个子物体比如一个发光的UI图标或3D模型作为可见的热点提示。当鼠标悬停时还可以改变光标形状或触发高亮动画提供更好的交互反馈。注意事项这种方法切换房间是“硬切”即瞬间更换纹理。在商业项目中为了体验更平滑通常会加入淡入淡出Fade过渡效果。你可以创建两个摄像机一个渲染当前房间一个渲染下一个房间通过调整它们的透明度和一个全屏的UI遮罩来实现渐变动画。5. 适配移动端与WebGL发布我们的目标是让这个看房体验能在网页和手机上运行。Unity的WebGL构建选项正是为此而生。5.1 触屏交互适配鼠标的拖拽和滚轮在手机上不适用我们需要为触屏操作添加支持。修改之前的PanoramaLook和PanoramaZoom脚本。增强旋转脚本以支持触屏修改PanoramaLook.cs的Update方法。void Update() { // 鼠标控制PC端 #if !UNITY_IOS !UNITY_ANDROID if (Input.GetMouseButtonDown(0)) { _lastMousePosition Input.mousePosition; } if (Input.GetMouseButton(0)) { HandleRotation(Input.mousePosition); } #else // 触摸控制移动端 if (Input.touchCount 1) { Touch touch Input.GetTouch(0); if (touch.phase TouchPhase.Began) { _lastMousePosition touch.position; } else if (touch.phase TouchPhase.Moved) { HandleRotation(touch.position); } } #endif } private void HandleRotation(Vector3 currentPosition) { Vector3 delta currentPosition - _lastMousePosition; _lastMousePosition currentPosition; float invertFlag invertVertical ? -1f : 1f; _rotationY delta.x * rotationSpeed * Time.deltaTime; _rotationX delta.y * rotationSpeed * Time.deltaTime * invertFlag; _rotationX Mathf.Clamp(_rotationX, -90f, 90f); transform.rotation Quaternion.Euler(_rotationX, _rotationY, 0); }增强缩放脚本以支持双指捏合修改PanoramaZoom.cs。void Update() { // 鼠标滚轮缩放 float scroll Input.GetAxis(Mouse ScrollWheel); if (scroll ! 0) { Zoom(scroll); } // 移动端双指捏合缩放 if (Input.touchCount 2) { Touch touchZero Input.GetTouch(0); Touch touchOne Input.GetTouch(1); Vector2 touchZeroPrevPos touchZero.position - touchZero.deltaPosition; Vector2 touchOnePrevPos touchOne.position - touchOne.deltaPosition; float prevMagnitude (touchZeroPrevPos - touchOnePrevPos).magnitude; float currentMagnitude (touchZero.position - touchOne.position).magnitude; float difference currentMagnitude - prevMagnitude; // 将距离差转换为一个缩放因子需要根据手感调整除数 Zoom(difference * 0.01f); } } private void Zoom(float delta) { float targetFOV _camera.fieldOfView - delta * zoomSpeed; targetFOV Mathf.Clamp(targetFOV, minFOV, maxFOV); _camera.fieldOfView targetFOV; }5.2 WebGL发布设置与优化将项目发布为WebGL使其能在浏览器中运行。构建设置点击 File - Build Settings。在Platform列表中选择“WebGL”点击“Switch Platform”。Player Settings优化在Project Settings - Player中找到Resolution and Presentation。建议将“WebGL Template”改为一个更简洁的模板如“Minimal”。在Other Settings中Color Space如果项目简单使用Gamma以获得更好的性能如果需要更真实的色彩用Linear但注意兼容性。Auto Graphics API取消勾选并确保只保留“WebGL 2.0”如果目标浏览器支持。这可以避免不必要的API回退。Compression Format选择“Brotli”这是目前WebGL最佳的压缩格式能显著减小加载文件大小。Enable Exceptions建议设置为“None”或“Explicitly Thrown Exceptions”以减小构建体积。处理中文显示问题WebGL默认可能不包含中文字体导致UI文字显示为方块。解决方案是在UI Text组件的Font属性中使用“Arial”等浏览器安全字体或者将中文字体文件.ttf导入Unity并将其Texture Type设置为“Dynamic Font”然后指定给Text组件。构建与测试点击Build Settings窗口中的“Build”按钮选择一个输出文件夹。构建完成后你会得到一个包含.html、.js和.data等文件的文件夹。用浏览器直接打开.html文件进行本地测试。注意由于浏览器安全限制直接双击打开可能无法加载文件建议使用本地服务器如Live Server插件或上传到网络服务器后测试。6. 常见问题与性能调优实录在实际操作中你几乎一定会遇到下面这些问题。这里是我踩过坑后总结的解决方案。6.1 画面扭曲与接缝问题问题描述在全景球体的极点正上方和正下方或边缘画面出现严重拉伸、扭曲或可见接缝。排查与解决检查全景图确保你的全景图是标准的等距柱状投影Equirectangular Projection且宽高比严格为2:1。用图片编辑软件检查其尺寸。检查材质球设置确保用于天空球的材质球其Shader是“Unlit/Texture”。标准着色器Standard Shader可能会因为光照和法线计算导致渲染异常。检查球体缩放确认球体的Scale是否为-1 1 1。这是翻转法线、正确显示内表面的关键。接缝问题如果全景图本身在渲染或拍摄时存在接缝即0度经度和360度经度处内容不连续在Unity中就会看到一条明显的裂缝。这需要在全景图制作阶段解决确保图片左右边缘可以完美拼接。6.2 交互响应迟钝或卡顿问题描述在网页端特别是移动端旋转或缩放操作不跟手有延迟感。排查与解决纹理尺寸过大4096x2048的全景图对于WebGL来说已经很大。如果性能吃紧可以尝试压缩纹理。在Project面板选中全景图在Inspector中将Max Size设置为2048Format设置为压缩格式如ASTC。脚本效率确保Update函数中的计算尽可能轻量。我们的脚本只处理输入和简单的数学运算开销很小。避免在每帧进行复杂的查找或字符串操作。垂直同步VSync在菜单栏 Edit - Project Settings - Quality 中找到对应平台的设置将VSync Count设置为“Don‘t Sync”。这可以避免帧率被锁定在显示器刷新率但可能引起画面撕裂。对于交互应用通常关闭VSync能获得更快的响应。目标帧率在脚本的Start函数中可以添加Application.targetFrameRate 60;来设定一个合理的目标帧率。6.3 WebGL加载缓慢或失败问题描述生成的网页打开后加载进度条走得很慢或者卡在某个百分比。排查与解决构建体积首次构建的WebGL包体积可能很大几十MB。使用Brotli压缩后能减少很多。检查构建日志看哪些资源占用了大部分空间。资源拆分与Addressables如果项目有多个全景图或大量UI资源可以考虑使用Unity的Addressables系统进行资源分包和按需加载而不是全部打包进初始包。服务器配置上传到服务器后需要确保服务器正确配置了.data和.wasm等文件的MIME类型否则浏览器可能无法正确下载。通常需要配置.data-application/octet-stream.wasm-application/wasm.js-application/javascript本地测试限制如前所述使用本地服务器而非直接双击打开html文件。6.4 移动端UI适配与点击问题问题描述在手机上UI元素大小不合适或者热点点击不灵敏。排查与解决Canvas Scaler为Canvas添加Canvas Scaler组件。将UI Scale Mode设置为“Scale With Screen Size”并设定一个参考分辨率如1920x1080。这样UI会在不同屏幕尺寸下按比例缩放。热点碰撞器大小3D热点如Cube在透视摄像机下远处会显得很小导致难以点击。可以适当放大碰撞器Collider的尺寸或者使用一个始终面向摄像机的、更大的透明UI按钮覆盖在3D热点对应的屏幕位置上作为代理点击区域。触控反馈为所有可点击的UI按钮和3D热点添加简单的视觉反馈比如点击时改变颜色或缩放让用户明确知道自己的操作已被接收。从一张静态的全景图到一个可以自由探索、交互的虚拟看房场景整个过程就像在解一道有趣的工程题。核心的“天球”模型理解起来并不复杂Unity提供的组件化开发方式让实现过程变得直观。最难的部分往往不是代码本身而是对各种细节的打磨和对不同平台尤其是WebGL特性的适应。我个人的体会是在完成基础功能后应该尽早地在目标平台特别是手机浏览器上进行测试很多交互和性能问题只有在真机上才会暴露出来。另外纹理资源的管理是性能的关键永远不要假设用户的网络和设备性能足够好。最后这个简易的框架有巨大的扩展空间比如加入背景音乐、信息点弹出框、家具标签、甚至简单的虚拟漫游动画这些都能让你的VR看房体验更加专业和吸引人。