search

MozillaReality / immersive-custom-elements

INACTIVE - Immersive Custom Elements
https://mixedreality.mozilla.org/immersive-custom-elements/examples/index.html
Mozilla Public License 2.0
134 stars 8 forks source link
inactive unmaintained

readme

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

Demo / Blog post

Usage

Sample code

Add the link to immersive-custom-elements.js with <script> tag. You can download the file from this repository or use the link to the CDN.

<html>
  <head>
    <script src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.2.0/build/immersive-custom-elements.js"></script>
  </head>
  <body>
    <img-360 src="https://github.com/MozillaReality/immersive-custom-elements/raw/dev/360-landscape.jpg" width="640" height="360"></img-360>
  </body>
</html>

Custom element tags

\<img-360>

Displays an interactive 360 degree photo.

<img-360 src="https://github.com/MozillaReality/immersive-custom-elements/raw/dev/imagefile.jpg" width="640" height="360"></img-360>
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.

<video-360 src="https://github.com/MozillaReality/immersive-custom-elements/raw/dev/video.mp4" width="640" height="360" loop></video>
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