CODEWITHSUNDEEP
aframe
sealpuppy
sealpuppy

Reputation: 633

A-Frame <a-link> change title and navigating issue

I would like to make a portal in A-Frame. I followed this page on the official website. The portal is displayed, but I encountered 2 issues. Thank you in advance.

  1. The title did not change even though I added a title tag in <a-link title="Forest"...></a-link>
  2. I used VSCode + Live Server for development. When I click on the portal, I expected it to navigate to forest.html, but nothing happened.

My code is as below:

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframedc.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>


</head>
  <body>
    <a-scene>

    <!-- Assets -->
        <a-assets>
            <img id="forest" src="https://cdn.aframe.io/link-traversal/thumbs/forest.png">
        </a-assets>
        
        <a-link title="Forest" href="forest.html" position="0 1 1" image="#forest"></a-link>

    <!--Forest Environment-->
        <a-entity environment="preset: forest; dressingAmount: 100"></a-entity>

    <!--A regular box-->
        <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>


    <!--Text-->
        <a-entity
        text="value: Hello, A-Frame!; color: #BBB"
        position="-0.9 2 -3"
        scale="5 5 5"></a-entity>

    </a-scene>
  </body>
</html>

Upvotes: 1

Views: 353

Answers (1)

Diarmid Mackenzie
Diarmid Mackenzie

Reputation: 826

  1. There is a warning in the browser console logs related to this:

The primitive a-link has a mapping collision. The attribute title has the same name as a registered component and has been renamed to link-title

The issue here is that there is a "title" component in the aframedc module that you have included, and so there is a clash.

https://github.com/fran-aguilar/a-framedc/blob/master/dist/aframedc.js#L90

Assuming you need to include aframedc, follow the advice in the warning, use "link-title" instead of "title" and it will work.

  1. The way the link component works is described here:

https://aframe.io/docs/1.2.0/components/link.html

Specifically, the "on" setting configures the name of an event to use to trigger the link. Default is "click".

So to activate the link, you need to set things up so that you'll get a "click" event when someone clicks on the link entity.

On desktop, you can do that like this:

<a-scene cursor="rayOrigin:mouse" raycaster="objects:[clickable]">

And then set an attribute "clickable" on the <a-link> entity.

The reason for the raycaster component and clickable attribute is that if you enable raycasting without a filter like this, you'll get performance warnings in the console.

Also note that VR will need some different set-up, but in any case, links in VR are a whole other can of worms...

Full working code:

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframedc.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
</head>
  <body>
    <a-scene cursor="rayOrigin:mouse" raycaster="objects:[clickable]">

    <!-- Assets -->
        <a-assets>
            <img id="forest" src="https://cdn.aframe.io/link-traversal/thumbs/forest.png">
        </a-assets>
        
        <a-link clickable href="forest.html" position="0 1 1" image="#forest" link-title="Forest"></a-link>

    <!--Forest Environment-->
        <a-entity environment="preset: forest; dressingAmount: 100"></a-entity>

    <!--A regular box-->
        <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>


    <!--Text-->
        <a-entity
        text="value: Hello, A-Frame!; color: #BBB"
        position="-0.9 2 -3"
        scale="5 5 5"></a-entity>

    </a-scene>
  </body>
</html>

Also as a Glitch here: https://glitch.com/edit/#!/make-a-links-work?path=index.html%3A1%3A0

Upvotes: 1

Related Questions