Skip to content

florianmaxim/Meta

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

73 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Meta.js πŸ‘©β€πŸš€

Accessible Javascript Library For Virtual Reality πŸš€

Latest NPM release Build Status Dependencies https://metajs.org

πŸš€ Why (did you come up with this)?

Spatial 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. This is an approach.

Furthermore this is an attempt to create the most accessible virtual reality library possible.

🎊 Features

  • πŸ– Learn how to create and use code virtual (reality) space in minutes.
  • πŸ’ Code Virtual Reality like its the year you live in.
  • 🀹🏻 Write in the language you know with the tools you love.
  • πŸš€ Write one version of your code that works on any device (HTC Vive, Oculus Rift, Desktop, Mobile, etc.).
  • 🏰 Grab a cube now, move a castle soon!

πŸ’ Examples

The best way to learn Meta.js is to go through the examples.

Node.js must be installed.

(If you don't know how to use the terminal watch this.)

Clone a full copy of Meta.js:

git clone https://github.com/florianmaxim/meta

Select an example:

cd examples/basics

Run and open it in your browser:

npm start

πŸŽ‰ Custom

Start within 3 minutes (via Parcel-Bundler):

You need to have Node.js (https://nodejs.org) installed.

(If you don't know how to use the terminal watch this.)

  1. Create a new directory and enter it.
mkdir meta && cd meta
  1. Initialize a npm repository and install Parcel-Bundler and Meta.js.
npm init && npm install parcel-bundler meta-client
  1. Create a index.html and a index.js file.
touch index.html index.js
  1. Paste the following into index.html.
<html>
<body>
  <script src="./index.js"></script>
</body>
</html>
  1. Add the following into index.js.
import {on, Cube} from 'meta-client';

on('touch', (data) => new Cube({position:data.position});
  1. Start:
parcel index.html

Open http://localhost:1234/ in your browser.

One Line

Alternatively you can also put all steps together in a single line like this:

touch index.html index.js && echo '<html><body><script src="./index.js"></script></body></html>' >> ./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

πŸ“• Wiki

Read the Wiki to learn how to use Meta.js.

πŸ“š Docs

Read the full code documentation.

πŸ’¬ Slack

Join the Slack channel to talk about (virtual) space.

Packages

meta-client meta-console
npm npm
npm npm

Compatibility

VR Displays

Browser Version HTC Vive
Chromium 67.0.3371.0
Chrome 65.0.3325.162
Firefox Nightly 61.0a1

Desktop

Browser Version Status
Chrome 67.0.3396.99

Mobile

Browser Version Status
Chrome

Credits πŸ‘‘

As any other software this is based on thousands of layers of programming abstraction. The upper layers on which this is build on are Three.js (Javascript 3D library) and Oimo.js (Javascript physics engine).

References & Inspiration 🀹

I probably learned most about space from Walter Lewin.

I probably learned most about toys from Julian Summer Miller.

That's basically what brought me here.

License πŸ”–

MIT

Manifesto πŸ“œ

Let's start to redefine space!

Releases

No releases published

Packages

No packages published