CODEWITHSUNDEEP
aframe
TOX
TOX

Reputation: 45

Need Help Creating Links To Other Web Pages In Aframe

Couldn't find any clear and straightforward answers to this question. Im using Aframe to build the intro page to a website (https://nightmarinparis.neocities.org/). The issue im having is turning the spinning Twitter and Instagram blocks into links.

What I want to happen:

So far this is all I have as far as the code. I feel like i've tried everything including the linkcontrols component given by AFrame (https://github.com/aframevr/aframe/blob/master/examples/showcase/link-traversal/js/components/link-controls.js). Any help accomplishing this would be amazing. Thanks in advance!

<html>


<meta charset="utf-8" />

<script src="https://cdn.rawgit.com/aframevr/aframe/v0.4.0/dist/aframe-master.js"></script>
<!-- For Rain -->
<script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
<!-- For Linking -->
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/js/components/aframe-tooltip-component.js"></script>
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/js/components/camera-position.js"></script>
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/js/components/ground.js"></script>
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/js/components/link-controls.js"></script>
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/shaders/skyGradient.js"></script>






  <title>Nightmares In Paris </title>


<body>

<a-scene fog="type: exponential; color: #AAA" density=".00005" raycaster="far: 100; objects: [link];" cursor="mode: mouse" camera-position>

    <a-entity position="2.513 4.939 -50" id="snow" particle-system="preset: rain; color: #24CAFF; particleCount: 2000; size: .20;" opacity="3"></a-entity>

    <a-assets>

    <img id="sky" src="Storm.jpg">

      <a-asset-item id="bat" src="bat.obj"></a-asset-item>

      <a-asset-item id="bigbat" src="bigbat_morph.obj"></a-asset-item>

      <a-asset-item id="tower" src="https://nightmarinparis.neocities.org/eiffel.obj"></a-asset-item>



    </a-assets>


<!-- Sky -->
<a-sky src="#sky" material="" geometry=""></a-sky>

<!-- Eiffel Tower -->

  <a-obj-model src="#tower" position="2.513 65 -295"  material="color:#121212" obj-model="">

  <a-animation attribute="rotation" dur="5000" to="0 -360 0" repeat="indefinite"></a-animation>

</a-obj-model>

    <!-- ComingSoon -->
  <a-box width="100" height="100" depth="100" position="2.513 4.939 -370" src="https://nightmarinparis.neocities.org/comingsoongraphic.png">

  <a-animation attribute="rotation" dur="5000" to="0 360 0" repeat="indefinite"></a-animation>

  </a-box>

  <!-- Twitter Social Box -->

  <a-box width="100" height="40" depth="100" position="2.513 -65 -370" src="https://nightmarinparis.neocities.org/twitter.png">

  <a-animation attribute="rotation" dur="5000" to="0 -360 0" repeat="indefinite"></a-animation>

  <a-link href="https://google.com"></a-link>

  </a-box>

  <!-- Instagram Social Box -->

  <a-box width="100" height="40" depth="100" position="2.513 -110 -370" src="https://nightmarinparis.neocities.org/Instagram.png">

  <a-animation attribute="rotation" dur="5000" to="0 360 0" repeat="indefinite"></a-animation>

  <a-link href="https://google.com"></a-link>

  </a-box>

 <!-- Test Links -->



  <!-- Bats -->

<a-obj-model src="#bigbat" mtl="bigbat_morph.mtl" position="513.517 546.477 -1655.234" rotation="-36.326 150.058 -128 .801" material="color:#121212" obj-model="">
</a-obj-model>

<a-obj-model src="#bat" position="613.517 546.477 -1655.234" rotation="-36.326 150.058 -128 .801" material="color:#121212" obj-model="">
</a-obj-model>

<a-obj-model src="#bat" position="-909.061 546.477 -2422.7" rotation="-59.01465289847479 131.6084055415501 -112.29972784564136" material="color:#121212">
</a-obj-model>

<a-obj-model src="#bat" position="-122.324 -534.864 -1486.223" rotation="26.35605857601787 27.559269945792597 31.455382952682196" material="color:#121212">   
</a-obj-model>

<a-obj-model src="#bat" position="1786.062 368.994 -2422.7" rotation="31.341 29.049 34.549" material="color:#121212" obj-model="">
</a-obj-model>

<a-obj-model src="#bat" position="-234.581 1009.819 -4363.575" rotation="31.340791393656033 29.048960213132737 34.54935504638864" material="color:#121212">
</a-obj-model>

<a-entity link="href: http://cerberus-usa.net; title: Link; image: storm1.jpg"></a-entity>

<!-- Eiffel Tower -->

<!-- Buttons -->


<a-entity cursor="fuse:true;fuseTimeout:500" position="0 0 -1" geometry="primitive:ring;radiusInner:0.02;radiusOuter:0.03" material="shader:flat;color:cyan" raycaster="">

</a-entity>


 <a-entity position="0.148 -10.937 0" scale="0.62 1 1" rain="count:10000;color:#5353ff;height:100;" mixin="null" texture="rainrain.png">
 </a-entity>

 </a-scene>


Upvotes: 2

Views: 3945

Answers (1)

Noam Almosnino
Noam Almosnino

Reputation: 864

This example should help: https://glitch.com/edit/#!/a-frame-mouse-click-example?path=index.html:1:0

For the hover, you could use the event_set component (though outline is a bit harder, perhaps there's an outline component out there) and then use js for click handlers to navigate to another url:

Hover example:

  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow
         event-set__enter="_event: mouseenter; color: #026fc9"
         event-set__leave="_event: mouseleave; color: #4CC3D9">
  </a-box>

For the click and navigating to another site, something like this could work:

<script>
  AFRAME.registerComponent('navigate-on-click', {
    schema: {
      url: {default: ''}
    },

    init: function () {
      var data = this.data;
      var el = this.el;

      el.addEventListener('click', function () {
        window.location.href = data.url;
      });
    }
  });        
</script>

Then use that on the entities:

<a-box navigate-on-click="url: http://google.com"></a-box>

One more thing, for your camera element you'll want the rayOrigin property instead of 'mode':

<a-entity camera="" look-controls cursor="rayOrigin: mouse"></a-entity>

Upvotes: 3

Related Questions