Question

无法找到任何明确而直截了当的答案。我正在使用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）给出的linkcontrols组件。任何帮助实现这一点将是惊人的。提前谢谢！

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

Answer 1

此示例应该有所帮助： https://glitch.com/edit/#!/a-frame-mouse-click-example?path=index.html:1:0

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

悬停示例：

  <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属性而不是＆＃39;模式＆＃39;：

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

需要帮助在Aframe中创建到其他网页的链接

1 个答案: