immersive-custom-elements

by MozillaReality

Immersive Custom Elements

127 Stars 5 Forks Last release: 11 months ago (v0.2.0) Mozilla Public License 2.0 124 Commits 2 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Immersive Custom Elements

immersive-custom-elements
is a set of web components to embed immersive (VR & AR) content into your web page by using custom element tags. It currently includes components for
  • 360 images
  • 360 video <!-- * 360 image tours -->

Demo / Blog post

Usage

Sample code

Add the link to

immersive-custom-elements.js
with
 tag. You can download the file from this repository or use the link to the CDN.
<script src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.2.0/build/immersive-custom-elements.js"></script>


<img-360 src="360-landscape.jpg" width="640" height="360"></img-360>

Custom element tags

<img-360>

Displays an interactive 360 degree photo.


| attribute | type | required | description | | ---- | ---- | ---- | ---- | | src | strings | yes | Path to image file | | width | number | yes | element width | | height | number | yes | element height |

GitHub Logo

<video-360>

Plays an interactive 360 degree video. Click video to start playing.


| attribute | type | required | description | | ---- | ---- | ---- | ---- | | src | strings | yes | Path to video file | | width | number | yes | element width | | height | number | yes | element height | | loop | - | no | video loops if defined | | muted | - | no | the audio output of the video is muted if defined | | autoplay | - | no | video automatically starts playing if defined |

GitHub Logo

Immersive (VR) mode

You can enter immersive mode by clicking "ENTER VR" button if you have a VR headset.

GitHub Logo

Development

How to build

$ git clone https://github.com/MozillaReality/immersive-custom-elements.git
$ cd immersive-custom-elements
$ npm install
$ npm run build

How to locally run

$ npm run start
# local server boots up. Access http://localhost:8080/examples/index.html on your browser.

License

Mozilla Public License Version 2.0

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.