![](\"https://media.giphy.com/media/3o7aCWDuzxsESrbmcE/giphy.gif\")
![](\"resources/logo.png\"){kind=logo}
\r\n\r\n# Meta.js 👩🚀\r\n## Accessible Javascript Library For Virtual Reality 🚀\r\n\r\n[![Latest NPM release][npm-badge]][npm-badge-url] [](https://travis-ci.org/florianmaxim/Meta) [![Dependencies][dependencies-badge]][dependencies-badge-url] [](https://twitter.com/metajs_org)\r\n\r\n# 🎊 Features\r\n\r\n* 🏖 Learn how to create and use code virtual (reality) space in minutes.\r\n* 💐 Code virtual reality like its the year you live in.\r\n* 🤹🏻 Write in the language you know with the tools you love.\r\n* 🚀 Write one version of your code that works on any device (HTC Vive, Oculus Rift, Desktop, Mobile, etc.).\r\n* 🏰 Grab a cube now, move a castle soon!\r\n\r\n# 🚀 Why (did you come up with this)?\r\n\r\nSpatial media like Virtual Reality or Augmented Reality is perceived in such a fundamentally different way than computer graphics as we know them that we need to find new ways to describe it.\r\nThis is an approach.\r\n\r\nFurthermore this is an attempt to create the most accessible virtual reality library possible.\r\n\r\n# 💐 Example\r\n\r\nThis example is written in three lines that can't be anymore intuitive.\r\n\r\n\r\n\r\n```javascript\r\n\r\nimport {Ground, Cube, on} from 'meta-client';\r\n\r\nnew Ground();\r\n\r\non('touch', (data) => new Cube().set(data.position));\r\n\r\n```\r\n\r\n# 👩🚀 Usage\r\n\r\n### Custom start within minutes:\r\n\r\nYou need to have Node.js (https://nodejs.org) installed.\r\n\r\n(If you don't know how to use the terminal watch this.)\r\n\r\n1. Create a new directory and enter it.\r\n```script\r\nmkdir meta && cd meta\r\n```\r\n2. Initialize a npm repository and install Parcel-Bundler and Meta.\r\n```script\r\nnpm init && npm install parcel-bundler meta-client\r\n```\r\n3. Create a index.html and a index.js file.\r\n```script\r\ntouch index.html index.js\r\n```\r\n5. Add the following into index.html.\r\n```script\r\n\r\n\r\n \r\n\r\n\r\n```\r\n6. Add the following into index.js.\r\n```javascript\r\nimport {Ground, Cube, on} from 'meta-client';\r\n\r\nnew Ground();\r\n\r\non('touch', (data) => new Cube().set(data.position));\r\n``` \r\n7. Start:\r\n```script\r\nparcel index.html\r\n``` \r\nOpen http://localhost:1234/ in your browser.\r\n\r\n### One Line\r\nAlternatively you can also put all steps together in a single line like this:\r\n\r\n```script\r\ntouch index.html index.js && echo '' >> ./index.html && echo \"import {Ground, Cube, on} from 'meta-client';\\nnew Ground();\\non('touch', (data) => new Cube().set(data.position));\" >> ./index.js && npm init -y && npm i parcel-bundler meta-client && parcel index.html\r\n```\r\n### 🤹🏻 How to use the examples\r\n\r\nIt can be very useful to start with a working example.\r\n\r\nTo use the examples clone a full copy of Meta.js:\r\n ```script\r\ngit clone https://github.com/florianmaxim/meta\r\n``` \r\nNavigate to the examples directory:\r\n```script\r\ncd meta/examples\r\n``` \r\nSelect the example you want to work with:\r\n```script\r\ncd 1\r\n``` \r\nInstall and start the example:\r\n```script\r\nnpm start\r\n``` \r\n\r\n### 🎉 Custom installation\r\n\r\n```script\r\ngit clone https://github.com/florianmaxim/meta\r\nnpm install\r\nnpm run build\r\n```\r\n\r\n# 📕 Wiki\r\n\r\n[Read the Wiki to learn how to use Meta.js.](https://github.com/florianmaxim/meta/wiki) \r\n\r\n# 📚 Docs\r\n\r\n[Read the full code documentation.](https://florianmaxim.github.io/Meta)\r\n\r\n# 💬 Slack\r\n\r\nJoin the [Slack channel](https://metajsorg.slack.com) to talk about (virtual) space.\r\n\r\n# Packages\r\n\r\n| meta-client | meta-console |\r\n|:--------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|\r\n| [](https://www.npmjs.com/package/meta-client) | [](https://www.npmjs.com/package/meta-console) |\r\n| [](https://www.npmjs.com/package/meta-client) | [](https://www.npmjs.com/package/meta-console) |\r\n\r\n# Compatibility\r\n\r\n### VR Displays\r\n\r\n| \r\n Browser\r\n | \r\n\r\n Version\r\n | \r\n\r\n HTC Vive\r\n | \r\n
| \r\n \r\n Chromium\r\n \r\n | \r\n\r\n 67.0.3371.0\r\n | \r\n\r\n ![](\"https://img.shields.io/badge/status-stable-green.svg\"){kind=icon} \r\n | \r\n
| \r\n \r\n Chrome\r\n \r\n | \r\n\r\n 65.0.3325.162\r\n | \r\n\r\n \r\n | \r\n
| \r\n \r\n Firefox Nightly\r\n \r\n | \r\n\r\n 61.0a1\r\n | \r\n\r\n \r\n | \r\n
| \r\n Browser\r\n | \r\n\r\n Version\r\n | \r\n\r\n Status\r\n | \r\n
| \r\n Chrome\r\n | \r\n\r\n 67.0.3396.99 \r\n | \r\n\r\n \r\n | \r\n
| \r\n Browser\r\n | \r\n\r\n Version\r\n | \r\n\r\n Status\r\n | \r\n
| \r\n Chrome\r\n | \r\n\r\n | \r\n\r\n | \r\n