Sketch To VR

Turn your Mocks into VR.

v2.0.1 is compatible with Sketch 0.0.0

Sketch-to-VR

It works on a Sketch file like this

alt tag

And turns it into VR like this

alt tag

Demo: https://www.youtube.com/watch?v=lJ7aFtqsAUU

##Installation:

  1. Download Zip and Extract it. There’s a demo sketch file and a SketchToVR.sketchplugin.
  2. Double click on SketchToVR.sketchplugin. Sketch will install the plugin.

##Export your mocks with the plugin

  1. Open the demo Sketch file. The “background” artboard is a 360° photo. The “ui” artboard is the interface on top of the photo. In order to be seamless, the 360° photo you use should be equirectangular. There are some examples on Flickr. The one in my file is from Nick Hobgood.
  2. Go to Plugins > Sketch to VR > Export. The export may be slow due to the size of the 360° photo.

##View your mocks in VR

  1. The exported folder will be used to run A-Frame, an open-source Web VR library developed by MozVR. It needs a local server to work (simply opening the HTML page will not work). I recommend the SimpleHTTPServer by Scott Garner. Right click on the exported folder and choose SimpleHTTPServer. Use click & drag to navigate.
  2. To preview on your phone with a Cardboard, there are a few options. If you own a website, just upload this folder to your website and access the URL from your phone. Or you can use Chrome port forwarding to open localhost:8000 on your phone (initial page load may be slow due to the size of the 360° photo). Tap on the bottom right Cardboard icon to switch to VR mode!

##Troubleshooting

  • If you use your own sketch files, make sure to name your artboards “background” and “ui”.
  • If you get a system prompt dialog while using SimpleHTTPServer, choose Allow.
  • If you get some console errors and can’t see anything on the web page, restart the browser.
  • If you created your own photo / UI, you may need to go into the index.html file to adjust the dimension of the images. Read more about A-Frame.

##Credits:

  • Code structure borrowed from: https://github.com/Raureif/sketch-click-dummy
  • Photo from demo template file: https://www.flickr.com/photos/globalvoyager/27869867466/
  • SimpleHTTPServer: http://www.scottmadethis.net/interactive/simpleserver/

Join the discussion

Download v2.0.1
Usage Activity
400100

No Sketchpacks Relay integration found

Stats
  • 98 downloads all–time
  • 0 downloads this week
  • 1 downloads this month
About this plugin

auxdesigner published this plugin 2y ago.

v2.0.1 is the latest version.

Native updates are supported within Sketch.app.