node package manager

aframe-log-component

aframe-log-component

Version License

In-VR console logs for A-Frame.

logging

API

AFRAME.log (message, channel)

Provided global function to console.log a message into VR.

<a-scene>
  <a-entity position="0 0 -3">
    <a-entity log geometry="primitive: plane" material></a-entity>
    <a-entity log="channel: foo" geometry="primitive: plane" material></a-entity>
  </a-entity>
</a-scene>
AFRAME.log('hello to all log entities');
AFRAME.log('hello to foo', 'foo');

Properties

Property Description Default Value
channel String to specify to only render logs that are sent with a specific channel. ''
filter Plain-text string filter. (e.g., filter: bar would match log messages with bar in them. ''

<a-log>

Primitive with a default plane geometry, black material, and light green text.

<script>
  AFRAME.registerComponent('main', {
    AFRAME.log('talking to <a-log>');
  });
</script> 
 
<a-scene>
  <a-log position="0 0 -4"></a-log>
</a-scene>

Logging Via Events

document.querySelector('a-scene').emit('log', {message: 'hello', channel: 'bar'});

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.5.0/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-log-component/dist/aframe-log-component.min.js"></script> 
</head>
 
<body>
  <a-scene>
    <!-- Or <a-log position="0 0 -4"></a-log>. -->
    <a-entity log geometry="primitive: plane" material="color: #111" text="color: lightgreen" position="0 0 -4"></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-log-component

Then require and use.

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

Roadmap

  • Allow listening and outputting from vanilla console.logs.