Unity로 360도 이미지 뷰어를 만드는 방법

Unity Project 설정

샘플 항목 여기 있습니다.
https://github.com/yishizu/TAEC_GyroViewer

페이지 추가

왜곡이 적은 ICO 볼을 이용해 왜곡이 적은 뷰어를 만든다.
Unity의 Sphere에서는 재료를 붙여도 위아래 부분이 벗어나 더러워진다.
따라서 메시는 유니티 공이 아닌 ICO 공이다.블렌더 등으로 제작도 가능하지만 이쪽은 포장이 빠르기 때문에 이 추가 포장을 내려받는다.
https://catlikecoding.com/unity/tutorials/octahedron-sphere/

다운로드한 매크로 패키지를 추가합니다.

이미지 준비

이번에 여기서 다운로드 받았어요.
https://pixexid.com/image/jr0urb7-360-photo-park

Object 설정

ICOSphere와 카메라를 준비합니다.

캔버스에 패널을 만들다

드래그를 식별하는 패널을 만들고 코드를 붙여넣습니다.

패널의 코드

VRCameraController.cs

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using UnityEngine;

public class VRCameraController : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    [SerializeField] private Transform container;
    [SerializeField] private Transform camera;
    [SerializeField] private List<Texture2D> textures = new List<Texture2D>();
    [SerializeField] private TMP_Dropdown dropdown;
    [SerializeField] private Slider slider;
    private Quaternion rot;
    private float turnSpeedMouse = 1f;
    private bool gyroEnable = false;
    private static VRCameraController instance;
    public static VRCameraController Instance()
    {
        if (instance == null)
        {
            instance = FindObjectOfType<VRCameraController>();
        }

        return instance;
    }
    private void Start()
    {

        instance = this;
        UpdateSlider(100);
        Resources.UnloadUnusedAssets();
        
    }

    private void Update()
    {
        if(!gyroEnable) return;
        Quaternion q = Input.gyro.attitude;
        Quaternion qq = Quaternion.AngleAxis(90f, Vector3.right);
        camera.transform.localRotation =qq* q*rot;

    }


    public void GyroON(bool value)
    {
        Input.gyro.enabled = value;
        if (value)
        {
            rot = new Quaternion(0, 0, 1, 0);
        }
        gyroEnable = value;
        
    }
    
    
    public void OnBeginDrag(PointerEventData eventData)
    {

    }
    
    public void OnDrag(PointerEventData eventData)
    {
        container.Rotate(new Vector3(0, eventData.delta.x, 0) * Time.deltaTime * turnMouseDrag);
        camera.Rotate(new Vector3(eventData.delta.y, 0, 0) * Time.deltaTime * turnMouseDrag);
        
        float dotval = Vector3.Dot(camera.transform.forward, new Vector3(0,0,1));

        if (dotval < 0 || dotval > 1f)
        {
            camera.transform.Rotate(new Vector3(-eventData.delta.y, 0, 0) * Time.deltaTime * turnMouseDrag);
        }

    }
    
    public void OnEndDrag(PointerEventData eventData)
    {
        
    }

    public void ChangeTex(int val)
    {
        if (textures.Count > val)
        {
            var renderer = container.gameObject.GetComponent<Renderer>();
            var material = renderer.material;
            Debug.Log(material.GetTexture("_BaseMap"));
        
            material.SetTexture("_BaseMap",textures[val]);

            Debug.Log(textures[val].name);
            Resources.UnloadUnusedAssets();
        }
        
    }

    public void UpdateSlider(float val)
    {
        camera.gameObject.GetComponent<Camera>().fieldOfView = val;
    }
}

UI 설정

슬라이더와 토그르를 준비해서 내려가세요.

Gyroscope

팽이의 축에 대한 생각은 여기에 있다.

https://jp.mathworks.com/help/supportpkg/android/ref/gyroscope.html