❤
npm
Sign UpSign In

aframe-observer-component

1.0.1 • Public • Published

aframe-observer-component

Version License

An Observer component for a camera in an A-frame scene.

Attach a view from a camera to a canvas external of the A-frame scene.

Loosely based on this example.

For A-Frame.

observer example

API

Property Description Default Value
canvas selector of the HTML element where the canvas with the camera view is going to be attached ''
fps desired FPS of observer display 30.0

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-observer-component/dist/aframe-observer-component.min.js"></script> 
</head>
 
<body>
  <a-scene embedded>
    <a-sky color="#ECECEC"></a-sky>
    <a-box 
      position="-1 0.5 1" 
      rotation="0 45 0" 
      width="1" height="1" depth="1"  
      color="#4CC3D9"></a-box>
    <a-plane 
      rotation="-90 0 0" 
      width="4" height="4" 
      color="#7BC8A4"></a-plane>
 
    <a-entity
      id="mainCamera"
      position="0 0 3.8"
      camera
      active
      look-controls></a-entity>
 
    <a-entity
      id="observerCamera"
      position="2 1.8 4.8"
      rotation="-20 45 0"
      camera
      observer="canvas: #cameraObserver;"
      active="false"></a-entity>
  </a-scene>
  <div id="cameraObserver"></div>
</body>

npm

Install via npm:

npm install aframe-observer-component

Then require and use.

require('aframe');
require('aframe-observer-component');

Readme

Keywords

Package Sidebar

Install

npm i aframe-observer-component

Repository

github.com/micataudella/aframe-observer-component

Homepage

github.com/micataudella/aframe-observer-component#readme

Weekly Downloads

1

Version

1.0.1

License

MIT

Last publish

Collaborators

  • ngokevin
  • micataudella
Try on RunKit
Report malware