Has anyone used Google’s VR View for the Web, or managed to get it working?
Some years ago I did manage to make a very simple virtual tour on a website with VR View, but I think that was using an earlier version (0.2.0) which I believe lacks some of the functionality of the later version (2.0.2) such as hotspots.
More recently I read the information here:-
And downloaded the code from here:-
The code includes a few samples, but I can’t get them to work. The problem I’m having is building the files mentioned in the “Readme”. I tried running npm run build in both cmd in Windows and in Bash in Ubuntu, both fail with errors, but not the same errors.
In Bash I kept installing various packages it complained were missing before errors. I thought if I keep chipping away at it, adding each thing it said was missing, in the end I would get there. But it was never ending, I hit a wall when it was complaining about missing things I had already installed.
Unfortunately javascript is not my strong point, in fact it’s a notable gap in my web-dev knowledge. And I’m totally new to using these package managers and the terminal (or anything Linux related for that matter). So there is a real possibility it’s just I don’t know what I’m doing. I am aware that it will only run on a server.
Though I’m sure that if I could get the built files required to make the examples run, I would be able to hack some code together to reach my aim.
The intention is to make a virtual tour for a client’s site using 360 photos, I have the photos, that’s not a problem. Ideally I would like to navigate the tour using hotspots.
Using the old version I was able to create a very simple tour with a simple on-screen menu of scenes for navigation, which works, but isn’t exactly what I wanted. I would like to have users able to click a location in the image where they want to look next (hotspots).
Note the first link mentions a newer “Cardboard SDK” but as far as I can tell that is only for device specific apps for Android, iOS, Etc. I’m looking for a generic web solution.
I did also look at software for this. I liked this one having tried the trial, it does some nice effects all from a GUI, so no need for programming. But I can’t justify the cost for a one-off job. If I were doing lots of these for lots of clients I would probably invest. Also it would be nice to learn to program this kind of thing myself.
Anyway, I just wondered if anyone has any experience of doing this kind of thing, or is able to get the sample code working at their end. I can’t even find any on-line working versions of the examples, any I find are 404 or don’t work.
Are there other solutions worth exploring? I kind of get the feeling Google has abandoned this.
While I have still not managed to build the 7 required files from either terminal, I did manage to download 6 of them. Using the URL found in the sample code under “Getting Started” we see a link to one of the required files:-
It appears to be live still if I put it in my browser, so I could save the code. Typing in the other file names at the same location I found another 5 of the files. But I could not get device-motion-sender.min.js from there.
Running the demos with the files added gets a bit further. The frame now displays with the loading image, but gets no further.
If I link to the script at Google it gets past loading, but gives an error message about loading a texture. Though the texture does exist at the path given.
Using the old version, which does work, you define the image to view with a query string in the URL, Eg:-
example.com/tour.html?image=path/to/image.jpg
As opposed to the newer version where you define the image in js:-
// Selector '#vrview' finds element with id 'vrview'
.var vrView = new VRView.Player('#vrview', {
video: '/url/to/video.mp4',
is_stereo: true
});
Using the query string leads to a messy URL, which leads me to what I think is a silly question, because I think I know the answer, but I’ll ask anyway to be sure.
I tried tidying up the URL with .htaccess, but it doesn’t work.
I’m more used to working with server side scripts (PHP) where you can use query strings with $_GET and use .htaccess to tidy the URL.
Is it because js is client side, you can’t have the server “hide” the query string, then expect js to use it?
That seems a very reasonable explanation to me and suggests I can’t hide the query string and have it work.
I also found an old SP article on VR View by Patrick Catanzariti. It looks like that was using the old version because he uses the query strings with image parameter.
Just an update on this, for anyone interested in VR on the web (doesn’t look like there is ).
I got nowhere trying to build the new(er) version of Google VRview.
Though I did manage to get my virtual tour working on the (dev) site I’m working on using the old one. It’s just not exactly what I wanted.
This morning I went off on a different tangent, from a link on Patrick’s article and started looking at using A-Frame instead of VR View. It does look promising, with a lot of potential for this and other projects.
It was fairly simple to get a 360 photosphere working, and even add some 3D primitive objects to the scene. I should be able to use these as hot-spots to link to other photos. I just need to do some reading of the docs and study the samples to work out how to do that.
).