360 image in VR using A-frame

360 image in VR using A-frame

Lets us write a few lines of code get a view of 360 image view

code :

Step 1 : Define script tag for Javascript external file in the head tag

    <script src="https://aframe.io/releases/0.8.0/aframe.min.js">

Step 2 : Define a scene in body tag
<body> <a-scene>
</a-scene>
</body>

Step 3 : Define sky entity with 360 image 

&lt;a-sky src="https://thenextweb.com/wp-content/blogs.dir/1/files/2015/06/Prague_Getty.jpg" color="#ECECEC" material="" geometry=""&gt;&lt;/a-sky&gt;

src is the attribute of a-sky entity it gives location of the image

**Location of Image might be a link(url) or location in the local system(/home/...)

Step 4 :save this code in .html file :

 &lt;html&gt;&lt;head&gt;&lt;title&gt;My A-Frame Scene&lt;/title&gt; &lt;script src="https://aframe.io/releases/0.6.0/aframe.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;a-scene&gt;&lt;a-sky src="https://thenextweb.com/wp-content/blogs.dir/1/files/2015/06/Prague_Getty.jpg" color="#ECECEC" material="" geometry=""&gt;&lt;/a-sky&gt;&lt;/a-scene&gt;&lt;/body&gt;&lt;/html&gt;

Step 5 : open .html with browser and enjoy the view of 360 image view

Tags