A-Frame Refraction Component

Refraction component for A-Frame to add on any entities.

Demo

Live demo

Getting Started

<a-entity refraction></entity>

To turn it off:

<a-entity refraction="enabled:false"></entity>

Properties:

Ratio (default: 0.985, min: 0.912, max: 1)

<a-entity refraction="ratio:0.935"></entity>

Reflectivity (default: 0.9, min: 0.6, max: 1.2)

<a-entity refraction="reflectivity:1.1"></entity>

Want to make some changes to it?

Installation

First make sure you have Node installed.

On Mac OS X, it's recommended to use Homebrew to install Node + npm:

brew install node

To install the Node dependencies:

npm install

Local Development

To serve the site from a simple Node development server:

npm start

Then launch the site from your favourite browser:

http://localhost:3000/

If you wish to serve the site from a different port:

PORT=8000 npm start

Acknowledgement

Based on the work of @stemkoski for ThreeJS: http://stemkoski.github.io/Three.js/Refraction.html

License

Distributed under an MIT License.