@pinser-metaverse/screen-shared-es

Pinser metaverse provide a simple way to create your own web metaverse or 3D web components like a simple HTML page. Inspired from the very nice libraries [Polymer lit](https://lit.dev) and [A-Frame](https://aframe.io), you can create AR / VR / 3D eleme


Keywords
pinser, aframe, lit, metaverse, pinser-metaverse, teleport
License
MIT
Install
npm install @pinser-metaverse/screen-shared-es@0.27.1

Documentation

@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.

Get started !

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

Tips: You can open 2 tabs on the same browser to test multiplayer mode.

pinser-metaverse example tictactoe

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.

Pinser storybook examples

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.

License

MIT