Unity 实战【360VR 看房】

【介绍】

360全景VR看房，可以实现不同角度切换视角，下面为运行效果

07d5f29d50af8b633083920e6cde0619.gif

360 全景的逻辑其实很简单，主要的思路是采用一个球体模型，将制作好的房子不同区间模型贴附在球体上，然后让相机在球体的中间，结合手势的移动使相机跟随。就可以实现不同视角的切换了。

本文主要讲述
1.添加资源素材
2.添加球体模型
3.实现屏幕旋转观测效果
4.缩放画面
5.画布添加指南针以及跟随相机
6.切换不同的房间

• 添加资源素材
  使用模型制作工具 渲染一个完整的房子

  
  
  image.png

将上面的渲染成三个区域的全景图

image.png

将全景图以及资源素材导入到unity工程中

image.png

• 添加球体模型

  
  
  image.png

添加一个球体模型 把全景图贴在球体上面 把相机放在球体的正中间。然后就可以看到上面效果。

注意：需要把球体的shader 调整一下

image.png

• 实现相机旋转观测效果

  
  
  image.png
  
  

  添加CamPivot 在MainCamera节点下 挂载脚本RotationCam.script 脚本。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;
public class RotationCam : MonoBehaviour
{
    public Transform myCam;
    float x;
    float y;
      bool canMouse = true;
    private void Update()
    {
        if (Input.touchCount == 1)
        {
            if (Input.GetTouch(0).phase == TouchPhase.Began)
            {
 
                canMouse = false;

            }
            if (Input.GetTouch(0).phase == TouchPhase.Moved)
            {
        
 
                canMouse = false;

                x = Input.GetTouch(0).deltaPosition.x* touchSpeed;

                y = Input.GetTouch(0).deltaPosition.y* touchSpeed;

                if (x != 0 || y != 0)
                    RotateView(-x, -y);

            }

           
        }

        if (canMouse == true)
        {
            if (Input.GetMouseButton(0))
            {
                x = Input.GetAxis("Mouse X");

                y = Input.GetAxis("Mouse Y");

                if (x != 0 || y != 0)
                    RotateView(x, y);
            }
        }
        Follow();

 
    }

 
    float touchSpeed=0.2f;
    public float speed = 80;
    public float smoothTime = 3;
    private void RotateView(float x, float y)
    {
        x *= speed * Time.deltaTime;
        //transform.Rotate(0, -x, 0, Space.World); 
        transform.Rotate(Vector3.up, -x, Space.World);

        y *= speed * Time.deltaTime;
        transform.Rotate(Vector3.right, y, Space.Self);

    }

    public void Follow()
    {
        myCam.rotation = Quaternion.Slerp(myCam.rotation, transform.rotation, smoothTime * Time.deltaTime);
    }

}

将MainCamera 添加到脚本上 就可以实现旋转内部空间了。

• 缩放画面
  在MainCamera 上添加ZoomCam.script脚本 就可以实现缩放画面的逻辑。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ZoomCam : MonoBehaviour {
    public Camera myCam;
      bool canMouse = true;
    void Update () {
        if (Input.touchCount == 1)
        {
            if (Input.GetTouch(0).phase == TouchPhase.Began)
            {     
                canMouse = false;
            }
           
        }
        if(canMouse)
        {
            if (Input.GetAxis("Mouse ScrollWheel") < 0)
            {
                myCam.fieldOfView += 2;

                myCam.fieldOfView = myCam.fieldOfView > 90 ? 90 : myCam.fieldOfView;
            }
            if (Input.GetAxis("Mouse ScrollWheel") > 0)
            {
                myCam.fieldOfView -= 2;
                myCam.fieldOfView = myCam.fieldOfView < 30 ? 30 : myCam.fieldOfView;

            }
        }   
    }
    
}

image.png

在房子的右上角添加了指南针 。实现的逻辑是在canvas上添加

image.png

然后添加脚本把MainCamera 关联上即可。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Pointer : MonoBehaviour {

    public RectTransform rectTransform;
    public Transform camTransform;
    void Update()
    {
        rectTransform.eulerAngles = new Vector3(0, 0, -camTransform.eulerAngles.y);

    }
}

• 切换不同的房间

  
  
  image.png
  
  

  这些图标 对应都是一个个button 在点击事件中 可以去切换到不同的场景中。
  以去餐厅为例：
  他的点击时间onClick 执行脚本 去对应切换不同的区间

  
  
  image.png
  
  上图可以看出 在模型Sphere01 下面挂载脚本 对应去执行ChangeRoom02方法。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;

public class ChangeRoom : MonoBehaviour {
    public Material myMat;

    public Texture room01;
    public Texture room02;
    public Texture room03;

    public Action OnEnterRoom01;
    public Action OnEnterRoom02;
    public Action OnEnterRoom03;

    public Action OnLeaveRoom01;
    public Action OnLeaveRoom02;
    public Action OnLeaveRoom03;

    public void Start()
    {
        ChangeRoom01();
    }

    public void ChangeRoom01()
    {
        myMat.mainTexture = room01;
        if(OnEnterRoom01!=null)
        {
            OnEnterRoom01();
        }
        if (OnLeaveRoom02 != null)
        {
            OnLeaveRoom02();
        }
        if (OnLeaveRoom03 != null)
        {
            OnLeaveRoom03();
        }
    }
    public void ChangeRoom02()
    {
        myMat.mainTexture = room02;
        if (OnEnterRoom02 != null)
        {
            OnEnterRoom02();
        }
        if (OnLeaveRoom01 != null)
        {
            OnLeaveRoom01();
        }
        if (OnLeaveRoom03 != null)
        {
            OnLeaveRoom03();
        }

    }
    public void ChangeRoom03()
    {
        myMat.mainTexture = room03;
        if (OnEnterRoom03 != null)
        {
            OnEnterRoom03();
        }
        if (OnLeaveRoom01 != null)
        {
            OnLeaveRoom01();
        }
        if (OnLeaveRoom02 != null)
        {
            OnLeaveRoom02();
        }
    }
}

整体的逻辑都梳理完了。其实最重要的就是再一个球形模型下挂载不同房间的全景贴图 使相机再模型的中间 转动相机即可切换不同的视角。