pico3pro uses unity to play 360 panoramic video and event interaction

1. Prepare the panorama video, it looks like this.

2. Create a new Material

Note that Shader is selected as shown in the above picture, and AlphaTest is selected for Render Queue, because we want to place a button in front of the video, and the rendering value of the UI is 3000, so the problem of not displaying the UI can be avoided, so that the UI will always be displayed, and we can zoom in. The UI is displayed.

3. Create a new Sphere

 Note that under Sphere, create a new component Video Player, and drag the video to Video Clip.

This Sphere can be set a little bigger, so that we can put the XR Origin into it for easy testing.

 At this time, you can test it directly on the PC. In the Scene window, the outside of the ball looks like this.

 

 Then control the camera and move to the inside of the ball as shown below.

4. Add XR Origin

Pay attention to modify the Y value in Camera Offset, and try it many times in the device so that the picture is not distorted.

5. The following is the interaction event. Create a new sub-object under the outermost Sphere ball. Sphere is still used inside. Next, click on the Sphere to display the canvas.

From the outside of the ball, it looks like the following

 Looking inside the ball, it looks like this. Of course, you can also make a good-looking texture.

Pay attention to how to determine the position of the ball, it depends on your own needs, and you can set it where you want to click. But you can see the picture when the video is playing, and all your operations are restored when it stops, so here is a little trick, take a screenshot at the specified frame, and you will capture a panorama at this time, and then create a new one A material, drag the screenshot image to the position shown in the image below.

 Then cover the material of this screenshot on the outermost Sphere.

 As shown in the picture below, you can be sure that the location you want to interact with is there. I want to place the sign under the interactive traffic sign.

On this sphere, add the XR Simple Interactable component and create a new script SphereInteractor.

The content of the SphereInteractor script is as follows

using DG.Tweening;
using UnityEngine;
using UnityEngine.XR.Interaction.Toolkit;

public class SphereInteractor : MonoBehaviour
{
    public GameObject canvas;
    public void OnSelect(XRBaseInteractor interactor)
    {
        canvas.transform.DOMoveX(-0.3f,1);
        canvas.transform.DOScale(new Vector3(0.02f,0.02f,0.02f),1);
    }
}

The DOTween plug-in is used here, first set it very small behind the Sphere, and then enlarge it through animation when clicking.

It is also possible without DOTween, let the canvas hide first, and then let it appear through canvas.SetActive(true).

Create a new canvas under the logo Sphere to display buttons or text.

 Note that Render Mode selects World Space.

 6. The last step is to make sure that the previous canvas disappears after the specified frame. On the outermost sphere, create a new script to monitor the frame rate of the video.

 When the camera switches after 23 frames, we can hide the previous canvas at this time.

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

public class VideoController : MonoBehaviour
{
    private VideoPlayer vp;

    public GameObject canvas;
    // Start is called before the first frame update
    void Start()
    {
        vp = GetComponent<VideoPlayer>();
    }

    // Update is called once per frame
    void Update()
    {
        Debug.Log(vp.time);
        if (vp.time > 23)
        {
            canvas.SetActive(false);
        }
    }
}