需要帮助在 Aframe 中创建指向其他网页的链接答案

【问题标题】：Need Help Creating Links To Other Web Pages In Aframe需要帮助在 Aframe 中创建指向其他网页的链接
【发布时间】：2018-08-07 16:50:24
【问题描述】：

对于这个问题，找不到任何明确而直接的答案。我使用 Aframe 构建网站的介绍页面 (https://nightmarinparis.neocities.org/)。我遇到的问题是将旋转的 Twitter 和 Instagram 块变成链接。

我想要发生的事情：

当光标接触到框时，框的轮廓会突出显示
点击后应该会转到另一个网页（例如：google.com）

到目前为止，这就是我所拥有的所有代码。我觉得我已经尝试了一切，包括 AFrame (https://github.com/aframevr/aframe/blob/master/examples/showcase/link-traversal/js/components/link-controls.js) 提供的链接控件组件。实现这一点的任何帮助都将是惊人的。提前致谢！

<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/aframe-animation-component@3.2.1/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>

【问题讨论】：

标签： aframe

【解决方案1】：

这个例子应该有助于： https://glitch.com/edit/#!/a-frame-mouse-click-example?path=index.html:1:0

对于悬停，您可以使用 event_set 组件（虽然大纲有点难，也许那里有一个大纲组件），然后使用 js 的点击处理程序导航到另一个 url：

悬停示例：

  <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>

对于点击并导航到另一个站点，这样的事情可能会起作用：

<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>

然后在实体上使用它：

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

还有一件事，对于您的相机元素，您需要 rayOrigin 属性而不是“模式”：

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

【讨论】：

是的，非常感谢。我一定会试试的。
我对代码的唯一问题是当我尝试进行站点导航时，这会出现在 URL 中。（nightmarinparis.neocities.org/'http://www.google.com'）。有没有办法删除第一部分？测试链接应该已将我带到 Google.com
哦，很好，看起来您不需要在 url 周围加上单引号，更新了答案以反映它。所以这应该有效：<a-box navigate-on-click="url: http://google.com"></a-box> 工作故障示例：glitch.com/edit/#!/a-frame-click-navigate
非常感谢你，伙计，你帮了大忙！当然，这也会帮助很多其他人。再次感谢！
不客气，很高兴为您提供帮助。如果对您有用，请不要忘记将答案标记为已接受；）