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();
        }
    }
}

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

Unity 实战【360VR 看房】

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

猜你喜欢