360 panorama VR house viewing, which can switch perspectives from different angles, the following is the running effect
07d5f29d50af8b633083920e6cde0619.gif
360 全景
The logic of this is actually very simple. The main idea is to use a sphere model, attach the models of different areas of the house to the sphere, and then让相机在球体的中间
combine the movement of gestures相机跟随
. You can switch between different viewing angles.
This article mainly introduces
1. Add resource material
2. Add sphere model
3. Achieve screen rotation observation effect
4. Zoom screen
5. Add compass and follow camera to canvas
6. Switch between different rooms
-
Add assets
to render a complete house using Model Makerimage.png
Render the above into a panorama of three regions
image.png
Import the panorama and resource material into the unity project
image.png
-
Add a sphere model
image.png
Add a sphere model, paste the panorama on the sphere and place the camera in the middle of the sphere. Then you can see the effect above.
Note: You need to adjust the shader of the sphere
image.png
-
Realize the effect of camera rotation observation
image.png
Add CamPivot and mount the script RotationCam.script under the MainCamera node.
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);
}
}
Adding MainCamera to the script can realize the rotation of the inner space.
- Zoom screen
Add ZoomCam.script script on MainCamera to realize the logic of zoom screen.
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
Added a compass to the top right corner of the house. The logic implemented is to add on the canvas
image.png
Then add a script to associate 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);
}
}
-
switch between different rooms
image.png
These icons correspond to buttons that can be switched to different scenes in the click event.
Take going to a restaurant as an example:
his click time onClick executes the script to switch between different intervalsimage.png
It can be seen from the figure above that the script mounted under the model Sphere01 corresponds to execute the ChangeRoom02 method.
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();
}
}
}
The overall logic is sorted out. In fact, the most important thing is to mount the panoramic textures of different rooms under a spherical model so that the camera can switch between different viewing angles by turning the camera in the middle of the model.