aframe-screen-position

Overview

Components to track and report the 2D screen position of an A-Frame entity.

screen-position

This component makes the current screen position of an A-Frame entity (as per the active camera) available via a function

this.el.components['screen-position'].getScreenPosition(pos)

The parameter pos should contain a pre-allocated THREE.Vector2.

The x & y values are populated with the x & y co-ordinates on the current screen of the center of the entity.

output-screen-position

This is a component primarily intended for demonstration purposes. It can be added to an entity with the screen-position component, and outputs the screen position data in one of two ways:

• As text, by writing to the innerHTML of a specified element
• As screen position data, by writing to the style.top and style.left attributes of an element with absolute position.

Schema

Property	Description	Default
text	selector for an HTML element to write the x, y screen co-ordinates of the entity to, once every frame
tracker	selector for an HTML element with absolute position, whose 2D position will be updated once every frame to match the 2D position of the entity.

Installation

Via CDN

<script src="https://cdn.jsdelivr.net/npm/aframe-screen-position@0.1.0/index.min.js"></script>

Or via npm

npm install aframe-screen-position

Examples

screen-position.html

Code

screen-position