@pinser-metaverse
pinser-metaverse is a library inspired from the very nice library Polymer lit to map A-Frame AR / VR / 3D elements on typescript classes like Angular/React/Lit.
You can create simple, fast and reactive WebXR 3D / AR and VR scenes with all modern web development good practices.
Installation
Use the package manager npm to install aframe-element.
npm install @pinser-metaverse/core @pinser-metaverse/scene @pinser-metaverse/player
Usage
By component
import { customElement, MetaElement, html } from '@pinser-metaverse/core';
@customElement('my-3d-element')
exports My3dElement extends MetaElement {
render() {
return html`
<a-entity text="value: Hello World;"></a-entity>
`;
}
}
<meta-scene>
<template slot="scene">
<my-3d-element></my-3d-element>
</template>
</meta-scene>
With parameters
import { customElement, MetaElement, html } from '@pinser-metaverse/core';
@customElement('my-text-element')
exports MyTextElement extends MetaElement {
@property()
text: string;
render() {
return html`
<a-entity text="value: ${this.text};"></a-entity>
`;
}
}
<meta-scene>
<template slot="scene">
<my-text-element text="Hello World"></my-text-element>
</template>
</meta-scene>
By attribute
import { customElement, MetaElement, html } from '@pinser-metaverse/core';
@customElement('my-text-element')
exports MyTextElement extends MetaElement {
@property()
text: string;
render() {
return html`
<a-entity text="value: ${this.data.text};"></a-entity>
`;
}
}
<meta-scene>
<template slot="scene">
<a-entity my-text-element="text: Hello World;"></a-entity>
</template>
</meta-scene>
With an aframe hook
import { customElement, MetaElement, html } from '@pinser-metaverse/core';
@customElement('my-3d-element')
exports My3dElement extends MetaElement {
init() {
console.log('component initilized', this.el);
}
render() {
return html`
<a-entity text="value: Hello World;"></a-entity>
`;
}
}
<meta-scene>
<template slot="scene">
<my-3d-element></my-3d-element>
</template>
</meta-scene>
Documentation
Example
Tictactoe
- Demo: https://pinser-metaverse-demo.onrender.com
- Source code: https://github.com/pinserworld/pinser-metaverse/blob/master/apps/demo/src/app/app.element.ts
Tips: You can open 2 tabs on the same browser to test multiplayer mode.
Pinser storybook
The owner of the multiplayer game is the first to open the link (player yellow). Next users to open the demo are red.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.