Home

Awesome

aframe-href-component

Dependency Status npm

A Hyper Link component for A-Frame. With aframe-href-component, each object could be used as a normal html linkable element.

URL Link support

Add href attribute to any a-frame tag, such as href="www.sample.com". To turn the object as a normal web link. demo

As normal web page, you could add extra target="_blank" attribute in this a-frame tag to open web link in a new window.

Animation support (experimental)

When link is clicked, the href-component will emit a href event within this object. You can append the animation id in target attribute, such as target="#out-animation" (a shortcut of target="window#out-animation") or target="_blank#out-animation" to trigger the animation directly. demo

Anchor support (experimental)

Besides the normal hyper link. you can add in-page anchor like href="#id" to any a-frame tag. When user click on the object, a-camera will move its position to the object with the specified id. demo

Usage

Browser Installation

Install and use by directly including the browser files:

Make sure you have placed an a-cursor element to trigger the click event. Then add href attribute in target tag (In example is a-box). demo

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  <script src="https://rawgit.com/gasolin/aframe-href-component/master/dist/aframe-href-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity position="0 1.8 4">
      <a-camera>
        <a-cursor color="#4CC3D9"></a-cursor>
      <a-camera>
    </a-entity>

    <a-box id="orange-cube" position="0 3.5 -2" rotation="30 30 0"
      width="2" depth="2" height="2" color="#F16745"
      href="https://github.com/gasolin/aframe-href-component"></a-box>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm install aframe-href-component

Then register and use.

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