HowTo: Unity Skybox Mouse Tracking With RICOH THETA 360 Images

The video above explains how to use Unity Skybox to display RICOH THETA 360 images. Navigate your scene with mouse or gaze movements. This is the first part of a series to build a VR travel application.

Organize a set of THETA 360 images.

Create a new project in Unity.

In Assets, create 4 folders:

  1. Materials
  2. Scenes
  3. Scripts
  4. Textures

Save your scene.

Drag and drop your 360 images from your computer folder into the Unity Textures folder.

Select an image. Go to the inspector. Set Texture Shape to Cube. Set Mapping to Latitude-Longitude Layout.

Your THETA image will look like a sphere.

Create a new Material.

Set the Shader to Skybox → Cubemap

Drag the Texture onto the Cubemap Shader.

In the Main Camera inspector,

Add Component. Select Rendering.

Select Skybox

Move the material you just created into the Skybox.

In Scripts, create a new C# script named followView.cs

Save this code into the followView.cs file. It is also available on GitHub.

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


public class followView : MonoBehaviour {
	bool mouseDown = false;
	float mouseX;
	float mouseY;

	Camera mainCamera;

	void Start () {
		mainCamera = GetComponent<Camera>();
	}

	void Update () {

		if(Input.GetMouseButtonDown(0) && !mouseDown )
		{                
			mouseDown = true;

			mouseX = Input.mousePosition.x;
			mouseY = Input.mousePosition.y;
		}
		else if(Input.GetMouseButtonUp(0) && mouseDown)
		{                
			mouseDown = false;
		}
	}

	void LateUpdate()
	{
		if(mouseDown)
		{
			float mouseXStop = Input.mousePosition.x;
			float mouseYStop = Input.mousePosition.y;
			float deltaX = mouseXStop - mouseX;
			float deltaY = mouseYStop - mouseY;
			float centerXNew = Screen.width / 2 + deltaX;
			float centerYNew = Screen.height / 2 + deltaY;

			Vector3 Gaze = mainCamera.ScreenToWorldPoint(new Vector3(centerXNew, centerYNew, mainCamera.nearClipPlane));
			transform.LookAt(Gaze);
			mouseX = mouseXStop;
			mouseY = mouseYStop;
		}
	}
}

Attach script to Main Camera

Press Play.

Use the left mouse button to click and drag the image around.

Congratulations. You’re on your way to creating a THETA 360 Image VR application with headset navigation.

1 Like