MetaSphere

Screenshots

Problem Statement

Frameworks used : Frontend : react Backend : nodejs WebVR Framework : aframe Languages : javascript, solidityI utilized AFRAME, a webvr framework, and added it to each html file, and the aframe html file added the webvr image.So I created a web-vr-nft site by adding 360-degree image file and webvr html file as nft metadata.

Solution

After minting the web-vr-nft, use the HOME gets a list of VR-NFTs. Here, we can't show WEB-VR content, so we get a list of 360-degree static image files.And when you click on the NFT, a new window will open, showing the VR-NFT-WEB URL. The user can view the content in 360 degrees on this VR-NFT-WEB. If I had more time, I would have liked to add things like famous tourist destinations and VR healing content, but I was busy and didn't get around to it.On the MINT NFT tab, you can enter the VR-WEB URL and 360-degree image content as inputs, enter OWNER, and then mint the NFT.