Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

ivanwilliam/Sketch-to-VR

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

8 Commits

Repository files navigation

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:

About

Personal fun project - turn your mocks into VR

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%

AltStyle によって変換されたページ (->オリジナル) /