A shader to render DOM Element for A-Frame VR. Inspired by @scenevr's htmltexture-component with @niklasvh's html2canvas
The screenshot of DOM Element is by html2canvas. To lean more about the library, please check the documentation
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
- Basic material's properties are supported.
- The property is pretty much same as
flatshader besidesrepeat. Will update it soon. targetis aCSS selectorto render toa-entity.widthandheightis a size to capture. if the target element's size is640x480andwidth|heightsets as200|100, it will only be cropped with 200px width and 100px height from left top position.fpsis framerate to render per a second. if you only render once, set as0.ratiois for using target's ratio. if you keep null, the generated canvas will scaled for fit toa-entity. if you set aswidth, 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:
Aailable options by html2canvas will be ready for properties soon.
The following method is coming soon...
- render() (This is useful when you set
fpsas0)
The following events are coming soon...
html-readywhenhtml2canvasset and ready to renderhtml-draweach time it renders
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>Install via NPM:
npm i -D aframe-html-shaderThen register and use.
import 'aframe'
import 'aframe-html-shader'