文章/答案/技术大牛

发布

社区首页 >问答首页 >需要帮助创建指向Aframe中其他网页的链接

问需要帮助创建指向Aframe中其他网页的链接
EN

Stack Overflow用户

提问于 2018-02-27 22:17:28

回答 1查看 3.4K关注 0票数 2

对这个问题找不到任何明确而直接的答案。我使用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

Stack Overflow用户

回答已采纳

发布于 2018-02-27 23:02:44

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

对于悬停，您可以使用event_set组件(尽管outline有点困难，但可能有一个outline组件)，然后使用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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49018866

复制

相似问题

问需要帮助创建指向Aframe中其他网页的链接
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要帮助创建指向Aframe中其他网页的链接EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要帮助创建指向Aframe中其他网页的链接
EN