A-Frame <a-link> 更改标题和导航问题答案

【问题标题】：A-Frame <a-link> change title and navigating issueA-Frame <a-link> 更改标题和导航问题
【发布时间】：2022-01-06 10:59:36
【问题描述】：

我想在 A-Frame 中创建一个门户。我在官网上关注了this page。门户已显示，但我遇到了 2 个问题。提前谢谢你。

即使我在<a-link title="Forest"...></a-link> 中添加了title 标记，标题也没有改变
我使用 VSCode + Live Server 进行开发。当我点击门户时，我希望它会导航到 forest.html，但什么也没发生。

我的代码如下：

<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/a-framedc@1.0.7/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>

【问题讨论】：

标签： aframe

【解决方案1】：

浏览器控制台日志中有一条与此相关的警告：

原语 a-link 有一个映射冲突。属性标题有与注册组件同名并已重命名为链接标题

这里的问题是您包含的 aframedc 模块中有一个“标题”组件，因此存在冲突。

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

假设您需要包含 aframedc，请遵循警告中的建议，使用“link-title”而不是“title”，它会起作用。

链接组件的工作方式如下所述：

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

具体来说，“on”设置配置用于触发链接的事件名称。默认为“点击”。

因此，要激活链接，您需要进行一些设置，以便在有人单击链接实体时获得“点击”事件。

在桌面上，您可以这样做：

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

然后在<a-link>实体上设置一个属性“可点击”。

raycaster 组件和 clickable 属性的原因是，如果您在没有像这样的过滤器的情况下启用 raycasting，您将在控制台中收到性能警告。

还要注意，VR 需要一些不同的设置，但无论如何，VR 中的链接完全是另一回事...

完整的工作代码：

<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/a-framedc@1.0.7/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>

这里也有一个小故障： https://glitch.com/edit/#!/make-a-links-work?path=index.html%3A1%3A0

【讨论】：