AFrame HTML Shader

A shader to render DOM Element for A-Frame VR. Inspired by @scenevr's htmltexture-component with @niklasvh's html2canvas

DEMO

The screenshot of DOM Element is by html2canvas. To lean more about the library, please check the documentation

Limitations

You will often see the render looks different from how the target looks. You kinda have to learn what can be generated. Also it depends on devices. To check what actually rendered by html2canvas, use debug property to select to append the generated canvas. More for limitations, please check here

Properties

Basic material's properties are supported.
The property is pretty much same as flat shader besides repeat. Will update it soon.
target is a CSS selector to render to a-entity.
width and height is a size to capture. if the target element's size is 640x480 and width|height sets as 200|100 , it will only be cropped with 200px width and 100px height from left top position.
fps is framerate to render per a second. if you only render once, set as 0.
ratio is for using target's ratio. if you keep null, the generated canvas will scaled for fit to a-entity. if you set as width, the geometry's width stays and height will be changed by the ratio, and conversely.

Property	Description	Default Value
target	CSS selectors (#foo). target DOM to render	null
width	width to capture	null (target's width)
height	height to capture	null (target's height)
fps	fps to render	0
ratio	use target's ratio (width	height
debug	CSS selectors (#foo). debug DOM to append generated canvas from `html2canvas`	null

For refference, please check the following links:

Available options by html2canvas will be ready for properties soon.

Method

The following method is coming soon...

render() (This is useful when you set fps as 0)

Events

The following events are coming soon...

html-ready when html2canvas set and ready to render
html-draw each time it renders

Usage

Browser Installation

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  <script src="https://rawgit.com/mayognaise/aframe-html-shader/master/dist/aframe-html-shader.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity geometry="primitive:box;" material="shader:gif;src:url(nyancat.gif);color:green;opacity:.8"></a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm i -D aframe-html-shader

Then register and use.

import 'aframe'
import 'aframe-html-shader'

ngokevin / aframe-html-shader Goto Github PK