Add link component and a-link primitive

aframevr · Jun 24, 2017 · e16cb9e · e16cb9e
1 parent 55b424e
commit e16cb9e
Show file tree

Hide file tree

Showing 20 changed files with 1,329 additions and 7 deletions.
diff --git a/docs/components/link.md b/docs/components/link.md
@@ -0,0 +1,32 @@
+---
+title: pool
+type: components
+layout: docs
+parent_section: components
+---
+
+The link component allows to connect to other experiences and traverse to them
+without exiting VR mode
+
+```html
+<a-link href="index.html" title="My Homepage" src="#homeThumbnail"></a-link>
+```
+## Properties
+
+| Property | Description                                                                           | Default Value |
+|----------|---------------------------------------------------------------------------------------|---------------|
+| href  | URL where the link points to | ''         |
+| title    | Text displayed on the link. href is used if not defined                                | ''            |
+| on     | event that triggers link traversal                                          | ''             |
+| src     | 360 panorama used as scene preview in the portal                                        | ''             |
+| color     | Background color of the portal                                       | white             |
+| highlighted     | true if the link is highlighted                                       | false             |
+| highlightedColor     | border color when highlighted                                      | '#24CAFF'             |
+| visualAspectEnabled     | enable/disable the visual aspect if you want to implement your own                                      | 'true            |
+
+
+## Methods
+
+### .redirect ()
+
+Send the user to the pointer URL
diff --git a/docs/primitives/a-link.md b/docs/primitives/a-link.md
@@ -0,0 +1,18 @@
+---
+title: <a-link>
+type: primitives
+layout: docs
+parent_section: primitives
+---
+
+The link primitive provides a compact API to define links that resembles
+the <a> traditional tag.
+
+## Attributes
+
+| Attribute             | Component Mapping              | Default Value |
+|-----------------------|--------------------------------|---------------|
+| href                  | link.href                      |               |
+| title                 | link.title                     |               |
+| src                   | link.src                       |               |
+
diff --git a/examples/showcase/link-traversal/city.html b/examples/showcase/link-traversal/city.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Links</title>
+    <meta name="description" content="Links – A-Frame">
+    <script src="../../../dist/aframe-master.js"></script>
+    <script src="js/components/aframe-tooltip-component.js"></script>
+    <script src="js/components/ground.js"></script>
+    <script src="js/components/link-controls.js"></script>
+    <script src="js/systems/link-controls.js"></script>
+    <script src="shaders/skyGradient.js"></script>
+  </head>
+  <body>
+    <a-scene fog="color: #241417; near: 0; far: 30;">
+      <a-assets>
+        <img id="thumbHome" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/home.png">
+        <img id="thumbSunrise" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/sunrise.png">
+        <img id="thumbMountains" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/mountains.png">
+        <a-mixin id="cursor"
+                 cursor="fuse: true; fuseTimeout: 1500"
+                 geometry="primitive: ring; radiusOuter: 0.015;
+                          radiusInner: 0.01; segmentsTheta: 32"
+                 material="color: yellow; shader: flat"
+                 raycaster="far: 30"
+                 position="0 0 -0.75"></a-mixin>
+        <a-mixin id="-hovering" material="color: springgreen"></a-mixin>
+      </a-assets>
+      <a-link href="index.html" position="-3.5 1.6 -4" src="#thumbHome"></a-link>
+      <a-link href="sunrise.html" position="0 1.6 -4" src="#thumbSunrise"></a-link>
+      <a-link href="mountains.html" position="3.5 1.6 -4" src="#thumbMountains"></a-link>
+      <a-entity id="sky"
+                geometry="primitive: sphere; radius: 65;"
+                material="shader: skyGradient; colorTop: #100117; colorBottom: #1F191A; side: back"></a-entity>
+      <a-entity ground='url: https://cdn.aframe.io/link-traversal/models/groundCity.json'></a-entity>
+      <a-entity light="type: point; color: #f4f4f4; intensity: 0.4; distance: 0" position="0 2 0"></a-entity>
+      <a-entity id="leftHand" link-controls="hand: left"></a-entity>
+      <a-entity id="rightHand" link-controls="hand: right"></a-entity>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/showcase/link-traversal/images/tooltip.png b/examples/showcase/link-traversal/images/tooltip.png
diff --git a/examples/showcase/link-traversal/index.html b/examples/showcase/link-traversal/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Room Scale</title>
+    <meta name="description" content="Motion Capture Components – A-Frame">
+    <script src="../../../dist/aframe-master.js"></script>
+    <script src="js/components/aframe-tooltip-component.js"></script>
+    <script src="js/components/ground.js"></script>
+    <script src="js/components/link-controls.js"></script>
+    <script src="js/systems/link-controls.js"></script>
+    <script src="shaders/skyGradient.js"></script>
+  </head>
+  <body>
+    <a-scene debug>
+      <a-assets>
+        <img id="arena" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/aframeArena.png">
+        <img id="thumbCity" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/city.png">
+        <img id="thumbSunrise" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/sunrise.png">
+        <img id="thumbMountains" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/mountains.png">
+      </a-assets>
+      <a-link href="city.html" position="-3.5 1.8 -4" src="#thumbCity"></a-link>
+      <a-link href="sunrise.html" position="0 1.8 -4" src="#thumbSunrise"></a-link>
+      <a-link  href="mountains.html" position="3.5 1.8 -4" src="#thumbMountains"></a-link>
+      <a-entity id="sky"
+                geometry="primitive: sphere; radius: 65;"
+                material="shader: flat; color: #47c9ff; side: double"></a-entity>
+      <a-entity id="ground"
+                geometry="primitive: circle; radius: 8;"
+                rotation="-90 0 0"
+                material="shader: flat; src: #arena"></a-entity>
+      <a-entity id="leftHand" link-controls="hand: left"></a-entity>
+      <a-entity id="rightHand" link-controls="hand: right"></a-entity>
+    </a-scene>
+  </body>
+</html>