Playground Components
A-Frame Playground components for A-Frame:
-
Camrender (Documentation)
Component that renders the output of a camera in a canvas.
-
Canvas Updater (Documentation)
Component for updating a material showing a canvas, when the canvas is updated.
Installation
Browser
Install and use by directly including the browser files:
My A-Frame Scene <!-- Canvas for rendering secondary camera --> <!-- Objects in the scene --> <!-- "Regular" camera --> <!-- Secondary camera, set above the objects, looking down, with camrender --> <!-- Screen for showing the secondary camera, with canvas-updater -->
npm
Install via npm:
npm install aframe-playground-components
Then require and use.
;;
Camrender
This component renders the output of a camera in a canvas element.
Usually, this component will be included in the same entity than the camera,
and will render on a canvas defined within a-assets
:
...
That canvas can be used for the material of any suitable object,
which will then act as a screen or projection (see canvas-updater
)
below).
Note: if this is not applied to the primary (main) camera,
ensure that the camera includes the active
property set to false:
See more details in this A-Frame Playground (Cameras and screens, More and more screens!), Making it components).
API
Property | Description | Default Value |
---|---|---|
fps | desired FPS | 90 |
cid | Id of the canvas element used for rendering the camera | camRenderer |
height | Height of the renderer canvas | 300 |
width | Width of the renderer canas | 400 |
Canvas Updater
Component for updating a material showing a canvas,
when the canvas is updated.
It may work in combination with camrender
to show the output of a camera in any suitable material
(using a canvas for the rendering):
...
See more details in this A-Frame Playground (Cameras and screens, More and more screens!), Making it components).
API
No properties are supported by this component