November 6, 2019 update:
- Only Connecting To Google Sites
- The Only Website That Works Is Google Chrome
- The Only Website That Works Is Google Docs
- There's a new open source Cardboard SDK that offers a streamlined API, improved device compatibility, and built-in viewer profile QR code scanning. We recommend that all developers actively building for Google Cardboard migrate to the new Cardboard SDK: iOS, Android NDK, Unity XR Plugin (SDK)
The main advantage to having a free google site is that Google prefers Google Sites in terms of Search Engine Rankings. Since the domain Google.com has a page rank of 10 and the sub domain sites.google.com has millions of backlinks, you will be essentially hosting your website with a ton of built in SEO that you would normally have to pay.
- Address what's important and let Google handle the rest with best-in-class AI and search technology that helps you work smarter. Flexible solutions for every business Work from anywhere, on any device – even offline – with tools to help you integrate, customize, and extend Google Workspace to.
- Create a Google Site address. Click the 'Enter site name' text field in the top-left corner of the page, then type in the word or phrase that you want to use for your Google Site. Your site name must be unique, so you may be prompted to choose a different, unique site name at a later point.
- The Daydream View VR headset is no longer available for purchase. However, you can continue to use the existing Google VR SDK to update and distribute your apps to the Google Play Store, and make them available to users in the Daydream app.
You can embed 360° photos and videos into a website using VR View. Thiscan be done via a JavaScript API that creates and controls the contents of aniframe or by explicitly declaring the iframe itself.
For more information on supported formats and other considerations, see our360° Media overview.
Click and drag to move through the image.
Getting started
To use VR View, include the Google-provided vrview.min.js script within yourHTML:
Next, add a placeholder where you want the iframe that will contain thephotosphere content.
When the VR View is loaded, this placeholder line will be replaced by an iframewith class='vrview'. Download all data from google drive.
Instantiate the VR View after the page loads by listening for the load event:
Note that by itself, this is equivalent to simply declaring an iframe with thesame parameters:
However, using the VR View JavaScript API offers additional features notavailable when explicitly declaring an iframe.
VR View
You create a new VR View by calling the VRView.Player constructor and passingit a selector that determines where to put the VR View and a parameters bundle.The selector should point to the id of the div placeholder line you includedin your HTML.
For example,
A complete list of configuration parameters can be found in the table below.
| Name | Type | Parameter description |
|---|---|---|
video | String | URL to a 360° video file or an adaptive streaming manifest file (.mpd or .m3u8). Exactly one of video or image is required. |
image | String | URL to a 360° image file. Exactly one of video or image is required. |
width | String | String value for the iframe's width attribute. Required if using the JavaScript API. Has no effect if used within an iframe. |
height | String | String value for the iframe's height attribute. Required if using the JavaScript API. Has no effect if used within an iframe. |
preview | String | (Optional) URL to a preview image for a 360° image file. |
is_stereo | Boolean | (Optional) Indicates whether the content at the image or video URL is stereo. |
is_debug | Boolean | (Optional) When true, turns on debug features like rendering hotspots ad showing the FPS meter. |
is_vr_off | Boolean | (Optional) When true, disables the VR mode button. |
is_autopan_off | Boolean | (Optional) When true, disables the autopan introduction on desktop. |
default_yaw | Number | (Optional) Numeric angle in degrees of the initial heading for the 360° content. By default, the camera points at the center of the underlying image. |
is_yaw_only | Boolean | (Optional) When true, prevents roll and pitch. This is intended for stereo panoramas. |
Only Connecting To Google Sites
VR View events
VR View emits four different types of events, which must be registered using theVRView.on(String event, function handleEvent) function. The on() functiontakes in two parameters, the name of the event type as a String, and a functionthat handles the event. For instance,
The types of events on() can register are:
ready: VR View loaded its initial contents and is now ready to acceptcommands.error: VR View reports an error, such as when content couldn't be loaded.click: The VR View is clicked (tapped on mobile, gazed on in VR mode). Canbe used to register clicks to move to the next slide in a slide show, or toregister when a user clicks a hotspot.modechange: VR View changed modes, such as when the user enters VR orfullscreen mode. You can use this to track user behavior by registeringcallbacks whenever the user changes modes.
Video controls
You can control a VR View video using the play(), pause(), and setVolume()functions. Web roblox com home.
VRView.play(): If the VR View is a video, callingplay()resumes thevideo. If the VR View is not a video,play()throws an error.VRView.pause(): If the VR View is a video, callingpause()pauses thevideo. If the VR View is not a video,pause()throws an error.VRView.setVolume(double fractionVol): If the VR View is a video, callingsetVolume()sets the volume to the given fraction of the max volume.Platform Mute Adjust volume Unmute / Full volume Android setVolume(0)Set fractionVolto any value in range[0, 1].
For example,setVolume(0.5).setVolume(1)iOS setVolume(0)Not available. setVolume(1)
Loading new content
You can load new content into the iframe without reloading the iframe itselfusing the setContentInfo() function.
setContentInfo()
VRView.setContentInfo() takes in a URL to a 360° photo or video as astring and a bundle of parameters.
setContentInfo() can use the same parameters as the VRView constructor withthe exception of width and height.
See theNew7Wonders of World example of swapping content in and out.
The Only Website That Works Is Google Chrome
Hotspots
Hotspots are regions on a photosphere that users can interact with. Hotspots canbe rendered on all platforms, but the way users interact with them differs.
On desktop, hovering over the hotspot with the mouse cursor changes itvisually, and clicking it activates it.
On mobile, tapping the hotspot activates it.
In VR mode, gazing at a photosphere containing hotspots causes a reticleto be rendered, which will change states when it focuses on a hotspot. At thatpoint, tapping anywhere on the screen will activate it.
Defining hotspots
Hotspots are circular regions on the sphere with a given ID string, centercoordinates, radius, and ID. They can be added using the vrView.addHotspot()function.
For example:
The coordinates, determined by pitch and yaw, are with respect to sphericalcoordinates.
- The default center of view is at
(0, 0). - The pitch range is
[-90, 90]with positive values corresponding to up. - The yaw range is
[-180, 180]with positive values corresponding to the right.
Hotspot events
To add an event when a hotspot is clicked, use the on() function:
See theAmerican Museum of Natural History of a photosphere where clicking on a hotspot changes the center of view.
The Only Website That Works Is Google Docs
Self-hosting
Host the VR Viewsample code and media files on your own server. Hosting the code yourself avoids several known issues withbrowsers (see below).
360° images will have incorrect orientation in iOS Safari if youexplicitly declare your iframe (instead of using the JavaScript API) and thecode and images are hosted on different servers.
360° videos do not work in OSX Safari if the media and the VR View codeare hosted on different servers.
Images that are not power-of-two and square may not display correctly inChrome and Safari iOS 8.
