A Hyper Link component for A-Frame, turning object to a html linkable element
JavaScript
Permalink
Failed to load latest commit information.
dist remove dist ex components Feb 25, 2016
examples add missing / for a-camera Jun 13, 2016
.eslintrc add eslint May 31, 2016
.gitignore work on readme trim Feb 25, 2016
LICENSE Initial commit Dec 18, 2015
README.md Update README.md Jun 1, 2016
index.js eslint fix May 31, 2016
package.json eslint fix May 31, 2016

README.md

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');