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

Question

我想在 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>

Answer 1

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

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

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

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

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

此处描述了 link 组件的工作方式：

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

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

因此，要激活 link，您需要进行设置，以便当有人点击 link 实体时，您会收到“点击”事件。

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

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

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

之所以使用 raycaster 组件和可点击属性，是因为如果您在没有像这样的过滤器的情况下启用光线投射，您将在控制台中收到性能警告。

另请注意，VR 将需要一些不同的 set-up，但无论如何，VR 中的 links 完全是另一种蠕虫...

完整的工作代码：

<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

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

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

aframe