https://github.com/alfa256/aframe-mirror-component

Mirror effect material that works with snapshots of the scene for A-Frame
https://github.com/alfa256/aframe-mirror-component

aframevr threejs vr webvr

Last synced: 3 months ago
JSON representation

Mirror effect material that works with snapshots of the scene for A-Frame

• Host: GitHub
• URL: https://github.com/alfa256/aframe-mirror-component
• Owner: alfa256
• License: mit
• Created: 2017-07-30T20:23:20.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-06-02T02:16:13.000Z (about 4 years ago)
• Last Synced: 2025-03-23T00:51:19.561Z (over 1 year ago)
• Topics: aframevr, threejs, vr, webvr
• Language: JavaScript
• Size: 268 KB
• Stars: 31
• Watchers: 2
• Forks: 7
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## aframe-mirror-component

[![Version](http://img.shields.io/npm/v/aframe-mirror-component.svg?style=flat-square)](https://npmjs.org/package/aframe-mirror-component)

[![License](http://img.shields.io/npm/l/aframe-mirror-component.svg?style=flat-square)](https://npmjs.org/package/aframe-mirror-component)

Mirror effect material that works with THREE.CubeCamera snapshots of the scene.

Add it to a mesh and it will change its material for a mirror like effect.

If you use it let me know, I'm @alfredofrlp on twitter.

For [A-Frame](https://aframe.io).

[LIVE DEMO](https://alfa256.github.io/aframe-mirror-component/examples/basic/)

 : WASD + mouse to look around.

![Screenshot](./mirror.png "Multiple instances of the component.")

### API

| Property   | Description                  | Default Value |

| ---------- | ---------------------------- | ------------- |

| color      | material color               | #ffffff       |

| resolution | CubeCamera resolution        | 128           |

| refraction | material refractionRatio     | 0.95          |

| distance   | CubeCamera render distance   | 3000          |

| interval   | snapshot interval            | 1000 ms       |

| repeat     | take snapshot every interval | false         |

For a realtime mirror effect I suggest a low resolution ( 32 or 64 ) and an interval of 150 to 300, low distance also helps.

Resolution needs to be a power of 2: 8, 16, 32, 64, 128 ...

#### Browser

Install and use by directly including the [browser files](dist):

```html

  My A-Frame Scene

  

  

  

    

  

```

#### npm

Install via npm:

```bash

npm install aframe-mirror-component

```

Then require and use.

```js

require('aframe');

require('aframe-mirror-component');

```