npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aframe-label

v0.1.3

Published

A set of components that can be used to add labels to entities in desktop & VR experiences.

Downloads

43

Readme

label components

Overview

A set of components that can be used to add labels to entities in desktop & VR experiences.

label

Set this component on an entity to make it act like a label.

image-20220811164727667

This means that it will:

  • always face in the direction of the camera, so that the user sees it straight on
  • (on desktop, but not in VR) stay a fixed size on screen regardless of how near / far it is from the user (this behaviour is typically not desirable in VR - it feels very odd when peering closely at something makes it shrink!)
  • (optionally) overwrite other entities in the scene, even those that occlude it.
  • (optionally) have a line drawn to it from an entity that has a label-anchor component set on it.

The label component is commonly applied to <a-text> and <a-image> entities, but can be applied to any entity, with the same effects.

Note: label assumes that the scale attribute of the entity it is set on is set to the default value of 1 1 1

label-anchor

This component is used alongside label to create a label that sits at a distance from an entity, with a line connected to it.

image-20220811164814125

Set the label-anchor component on an entity positioned at the point that you want labelled. The offsetVector attribute controls the offset to the label itself. This offset will be scaled as the camera moves so that the line remains a fixed length from the user's perspective.

Add a child entity with the label component on it, describing the label that you want displayed at this offset position.

<a-entity position = "0.883 0.883 0" label-anchor="offsetVector: 0.2 0.2 0">
    <a-text material="color:white" value="DISTANCED LABEL" anchor="left" align="left"
            width=2
            label="overwrite:true"></a-text>
</a-entity>

face-camera

This component is used by label, but can also be used directly.

When applied to an entity, it makes it behave like a THREE.js Sprite, but it can be used with any entity (whereas THREE.js Sprite assumes a PNG image).

Unlike label, face-camera does not behave any differently between VR and desktop. Most applications will want to handle VR and desktop differently, in which case it's probably better to use label than face-camera

Note: face-camera assumes that the scale attribute of the entity it is set on is set to the default value of 1 1 1

Schemas

label

| Property | Description | Default | | ---------------- | ------------------------------------------------------------ | ------- | | overwrite | Controls whether or not the label overwrites objects that are in front of it in space. Set to "true" to make the label visible even if it is obscured by an object in front of it. | false | | forceDesktopMode | By default in VR entities are not scaled up/down based on distance from the camera, and they face the camera directly.On desktop, entities are scaled up/down based on distance from the camera, and they are oriented so that they appear flat on the screen (which is not directly at the camera for entities that are off-center).This setting forces labels to operate in the desktop manner, even when in VR. | false |

label-anchor

| Property | Description | Default | | ------------ | ------------------------------------------------------------ | ------- | | offsetVector | Vector from the anchor to the label. When non-zero, a line is drawn from the label to the anchor. Note that this vector is scaled to keep the label a fixed distance from the anchor, from the user's perspective. | none | | showLine | Whether to show a line between the label and the anchor | true | | lineColor | What color line to draw between the label and the anchor | white |

face-camera

| Property | Description | Default | | ---------- | ------------------------------------------------------------ | ------- | | fixedSize | Whether or not to scale the entity up & down based on distance from the camera, so that it always appears the same size the the user. This effect can be disconcerting when used in VR. | false | | spriteMode | In "sprite mode" an entity will not face the camera directly, but will face in the opposite direction from the direction in which the camera is facing. This results in the entity being rendered flat on the screen.When an orthographic camera is used "sprite mode" is always used, regardless of this setting. | false | | overwrite | Controls whether or not the label overwrites objects that are in front of it in space. Set to "true" to make the label visible even if it is obscured by an object in front of it. | false |

Installation

(this imports code for all components: label, face-camera and label-anchor)

Via CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>

Or via npm

npm install aframe-label

Examples

labels.html

Code

label