CC Animate How To Publish VR Panorama To Website

Report · Jan 20, 2019

I have made my first VR Panorama from an AI file 5669 X 566px size.

I would like to publish this to my website but the sizing is difficult to contain. The <canvas> tag is generated through JavaScript and resizes when the browser window is adjusted. I try to wrap this tag with my own <div> starting immediately and ending inside the <body> but it is attached or prepended outside this added element.

I also attempted to adjust the CSS through the Chrome inspection tools but it is not working.

How can I contain and publish the exported <canvas> inside a container of my size choice for my website?

Report · Jan 22, 2019

See if this tutorial will help. Create VR Panoramic and 360 content |

Report · Jan 22, 2019

Thanks Nick, but this does not help. I also saw these:

WebGL-glTF export (standard and extended) |

Learn how to useauthor and publish Virtual Reality content in Animate

They don't help either.

Report · Oct 19, 2022

Did we get any answers for this? In general I can't even get the VR projects to play just from the published html folder. The only way I get a VR project to play is via the TEST feature within Adobe Animate. Any tips would help...

Report · Oct 19, 2022

you generally can't test local canvas files because of browser cross-domain complaints.

to confirm that's the issue, open your browser's developer tools > console

Report · Oct 22, 2022

It has been years since I posted the original question and no I didn't get it working exactly as I wanted with the sizing.

Answering the second part of your comment/question. If you want to view the generated html VR file you will need some type of local virtual server. I have retested this on my old VR project and it still works for me.

This is the easiest way (that I found):

1) Put the generated folder on your desktop

2) Download Visual Studio Code https://code.visualstudio.com/download (I think this is the best product Microsoft have ever made)

3) Install and open MS Code. In the left side bar click on extensions and search for 'Live Server' (by Ritwick Dey). Add the extension.

4) Now we need the generated VR folder to be an MS Code project so we can launch 'Live Server' to view the html file and dependencies. I'm on Mac so this trailing requirement may not be required for PC. Follow this thread:

https://stackoverflow.com/questions/29955500/code-is-not-working-in-on-the-command-line-for-visual-s...

5) Launch/open 'Terminal' (on Mac CMD + spacebar, search terminal, hit Enter)

6) Type cd ~/Desktop hit Enter. Should show something like
macbookpro@Your-Name Desktop % (you are on Desktop directory)

7) Type cd Project (or whatever the folder name is), hit Enter. Should show something like
macbookpro@Your-Name Project % (you are in your folder directory)

8) Type code . (this will open the project in MS code)

9) In MS Code open the root html file in the project. Click the 'Go Live' text in the bottom bar (see attached image)

10) You will see the created interactive project in your browser. hold down left mouse click and drag to change 360-degree position.

If you don't see it the next step might be helpful.

Optional for debugging

11) Open a new Chrome browser 'tab' right click select 'Inspect' > choose 'Console', copy the url from the other window. Something like http://127.0.0.1:5501/vr-panorama.html . I open the Inspection window first before loading the VR package as something seems to be blocking this feature

I hope this helps. Let us know if this works for you?

Adobe Community

CC Animate How To Publish VR Panorama To Website