Hi, I would like to share how to create 360 scene in Unity and build the project using WebGL.
The main problem I encountered was that I could not rotate the camera around after building the project for web. Therefore I found 360 VR Player Starter Kit plugin which helped me to solve the problem. It’s not free but worth your attention.
Ok the steps:
1. Project preparation.
2. Creating a sphere.
3. Import model into Unity and make further configurations.
4. Build WebGL project.
Project preparation.
-
Open Unity
Create new project
Install 360 VR Player Starter Kit plugin to be able to rotate camera around you.
Now, open the Main scene. Here you can see a lot of objects in hierarchy.
To put all in a nutshell, we need only camera object. So just remove everything except this one.
Wait, concerning sphere, you can use already created sphere (which is laying on scene) or create your own. I would suggest you to create the new one, because the current one is low-poly model and you can get squashed image ultimately.
Creating a sphere.
So I removed all of the objects from scene except camera and started with creating new one.
I am using Maya and will provide some hints how to do it fast.
So please create sphere and increase the number of subdivisions.
Then you need to invert sphere to turn it inside out, it’s a trick for future 360 panorama view.
To invert all faces we need to choose menu Select → Face. After selecting of all the sphere by mouse please click on menu Normals → Reverse
Export sphere as .obj file
Import model into Unity and make further configurations.
To proceed we need to import model from Maya into the Unity. Just drag saved object file to the Unity assets.
Now you need to create material. Let’s call it 360
Don’t forgot to change the new material shader. Select material → Inspector → change to Unlit/Texture.
Drag your 360 panorama texture to the Texture folder in Unity assets.
Be sure that width/height ratio is about 2/1.
Add texture to the 360 material.
If it is needed you can mirror sides by setting of tiling -1; 1, it could make the final view more natural.
Put the camera inside the sphere
Launch and check that everything is fine and you are able to rotate the camera inside the sphere.
Build WebGL project.
Build project with WebGL. The result will be html file with assets that you can easily upload to your site or test locally.
You can download sources here. Feel free to left some comments and ideas. Thanks!
