<html>

<head>
  <title> Portal Link</title>

  <!--  --------- IMPORTED LIBRARIES  ------>
  

  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

</head>

<body>

  <a-scene> <!-- Creating scene -->


       <!-- Image links. -->
       <a-assets>
     
        <img id="portal_1" src="https://cdn.glitch.com/e6225ccd-c32e-4cf8-b039-e78814a8cb78%2Fbg-2.jpg?1498129159642">
        <img id="portal_2" src="https://cdn.glitch.com/e6225ccd-c32e-4cf8-b039-e78814a8cb78%2Fbg.jpg?1498128625025">
      
     </a-assets>
  
    

    <!--  --------- SKY  --------- -->

    <a-sky id="background-img" color="#EBEBEB"></a-sky>
      
  
 <!--  --------- PORTAL LINKS  --------- -->  
      
      
      <a-entity link="href: index.html; title: Portal to LandX; image: #portal_1" position="-3 1 0" ></a-entity>
      <a-link href="index.html" title="Portal to LandY" image="#portal_2" position="3 1 0"></a-link>
 <!-- Move around with W and S, you can look through the portals without going in
 
Since the feature is new, the a-link tag only has three attributes ( title, image and href)
image is the thumbnail the portal lets you see
title is the text dislayed above the portal
href is the "place" you get sent through the portal-->     
  
<!--  --------- CAMERA AND CURSOR  --------- -->  
     
      
<a-camera  look-controls-enabled wasd-controls-enabled position="0 0 3"> 
   <!--The camera is a bit far from position 0 0 0 so you can view the full picture  -->  
  
    <a-cursor position="0 0 -3"
              geometry="primitive: ring; radiusOuter: 0.030; radiusInner: 0.020;" 
              material="color: #11d8c4; shader: flat"
              fuse="true" timeout="10">   
    </a-cursor>  

</a-camera> 
  </a-scene>
  <!-- Closing scene -->
  
</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.