# @metapins/aframe-element

> aframe-element is a library inspired from the very nice library [Polymer lit](https://lit.dev/) to map [A-Frame](https://aframe.io/) AR / VR / 3D elements on typescript classes like Angular/React/Lit. Used with [@metapins/lit-observable](https://github.

Latest version **0.2.1** (published 2022-02-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @metapins/aframe-element
pnpm add @metapins/aframe-element
yarn add @metapins/aframe-element
bun add @metapins/aframe-element
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2022-02-10 |
| First published | 2022-01-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Marc Buils |
| Maintainers | marcbuils |
| Keywords | lit, lit-html, rxjs, redux, lit-observe, metapins, aframe, aframe-element |

## Links

- npm: https://www.npmjs.com/package/@metapins/aframe-element
- Repository: https://github.com/metapins/aframe-element
- Issues: https://github.com/metapins/aframe-element/issues
- npm.io page: https://npm.io/package/@metapins/aframe-element

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2022-02-10
- 0.2.0 — 2022-02-10
- 0.1.0 — 2022-02-01
- 0.0.9 — 2022-01-31
- 0.0.8 — 2022-01-31
- 0.0.7 — 2022-01-21
- 0.0.6 — 2022-01-21
- 0.0.5 — 2022-01-21
- 0.0.4 — 2022-01-21
- 0.0.3 — 2022-01-21
- 0.0.2 — 2022-01-17
- 0.0.2-alpha2 — 2022-01-17
- 0.0.2-alpha1 — 2022-01-17
- 0.0.1 — 2022-01-15

## README

# @metapins/aframe-element

aframe-element is a library inspired from the very nice library [Polymer lit](https://lit.dev/) to map [A-Frame](https://aframe.io/) AR / VR / 3D elements on typescript classes like Angular/React/Lit.  
Used with [@metapins/lit-observable](https://github.com/metapins/lit-observable), you can create simple, fast and reactive WebXR 3D /AR and VR scenes with all modern web development good practices.

**[Get started !](./docs/get-started.md)**

## Installation

Use the package manager [npm](https://www.npmjs.com/package/@metapins/aframe-element) to install aframe-element.

```bash
npm install @metapins/aframe-element
```

## Usage

### By component

```typescript
import { customElement, AFrameElement } from '@metapins/aframe-element';

@customElement('my-3d-element')
exports My3dElement extends AFrameElement {
  render() {
    return html`
      <a-entity text="value: Hello World;"></a-entity>
    `;
  }
}
```

```html
<a-scene>
  <my-3d-element></my-3d-element>
</a-scene>
```

### With parameters

```typescript
import { customElement, AFrameElement } from '@metapins/aframe-element';

@customElement('my-text-element')
exports MyTextElement extends AFrameElement {
  static schema: {
    text: { type: 'string' },
  }

  render() {
    return html`
      <a-entity text="value: ${this.data.text};"></a-entity>
    `;
  }
}
```

```html
<a-scene>
  <a-my-text-element _text="Hello World"></a-my-text-element>
</a-scene>
```

### By attribute

```typescript
import { customElement, AFrameElement } from '@metapins/aframe-element';

@customElement('my-text-element')
exports MyTextElement extends AFrameElement {
  static schema: {
    text: { type: 'string' },
  }

  render() {
    return html`
      <a-entity text="value: ${this.data.text};"></a-entity>
    `;
  }
}
```

```html
<a-scene>
  <a-entity my-text-element="text: Hello World;"></a-entity>
</a-scene>
```

### With an aframe event

```typescript
import { customElement, AFrameElement } from '@metapins/aframe-element';

@customElement('my-3d-element')
exports My3dElement extends AFrameElement {
  init() {
    console.log('component initilized', this.el);
  }

  render() {
    return html`
      <a-entity text="value: Hello World;"></a-entity>
    `;
  }
}
```

```html
<a-scene>
  <my-3d-element></my-3d-element>
</a-scene>
```

# With @metapins/lit-observable and rxjs

```typescript
import { customElement, AFrameElement } from '@metapins/aframe-element';

@customElement('pawn')
export class PawnElement extends AFrameElement {
  private background$ = new BehaviorSubject<string>('grey');

  render() {
    return html`
      <a-box
        scale="1 1 0.1"
        material="color: ${observe(this.background$)}"
        @mouseenter=${() => this.background$.next('white')}
        @mouseleave=${() => this.background$.next('grey')}
      ></a-box>
    `;
  }
}
```

```html
<a-scene cursor="rayOrigin: mouse;  fuse: false;">
  <my-3d-element></my-3d-element>
</a-scene>
```

More information about @metapins/lit-observable [here](https://github.com/metapins/lit-observable)

## Documentation

- [Get started](./docs/get-started.md)

## Example

### Tictactoe with rxjs

- Demo: https://aframe-element-demo.herokuapp.com/
- Source code: https://github.com/metapins/aframe-element/blob/master/apps/demo/src/app/app.element.ts

![aframe-element example tictactoe](./docs/assets/example-tictactoe.png)

### Puissance4 with network playing & @vaadin/router & redux

- Demo: https://puissance4-aframe.herokuapp.com/
- Source code: https://github.com/metapins/aframe-puissance4

The owner of the multiplayer game is the first to open the link (player yellow). Next users to open the demo are red.

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

![aframe-element example puissance4](./docs/assets/example-puissance4.png)

## 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](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/@metapins/aframe-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._