Question

我一直试图弄清楚我之前的aframe项目中使用的两个脚本是如何在我正在处理的这个新的框架项目中工作的。我使用完全相同的代码并改变了一些东西，但没有任何东西可以使脚本无用。最近项目的问题是当鼠标/光标滚过它们时，立方体应该突出显示，当点击时，它应该将用户发送到新的URL。看看下面的例子。提前谢谢！

以前的项目是：http://www.nightmaresinparis.com

这是最近的项目：http://www.fakereal.co

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

  <!-- Script For Highlighting -->
  <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
  <!-- Script For Web Travel -->
  <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>


  <title> YC EXPERIENCE </title>



</head>


<body>
  <a-scene>


    <a-assets>
      <img id="sky" src="http://fakereal.co/cyberspace.jpg">
      <img id="buzzingtracks" src="http://www.fakereal.co/buzzingtracksmarch.png">
      <img id="animesunday" src="http://www.fakereal.co/animesundaygraphic.png">
      <img id="ycoriginals" src="http://www.fakereal.co/ycoriginalsgraphic.png">
      <img id="wallpapers" src="http://www.fakereal.co/wallpapersgraphic.png">
    </a-assets>

    <!-- Sky -->
    <a-sky src="#sky" rotation="0 0 0"></a-sky>

    <!-- Buzzing Tracks -->
    <a-box width="500" height="500" depth="500" position="-1399.286 -66.072 5.656" rotation="0 -316.189 0" src="#buzzingtracks" navigate-on-click="url: yugencreations://#!section=16787412" color="#FFFFFF" shadow="" event-set__enter="_event: mouseenter; color: #FFFF00"
      event-set__leave="_event: mouseleave; color: #FFFFFF">

      <a-animation attribute="rotation" dur="2000" to="0 -500 0" repeat="indefinite"></a-animation>

    </a-box>
    <!-- Anime Sunday -->

    <a-box width="500" height="500" depth="500" position="-835.773 -100.22 -1217.11" rotation="0 -320.0374406229489 0" src="#animesunday" navigate-on-click="url: yugencreations://#!section=16787412" color="#FFFFFF" shadow="" event-set__enter="[object Object]"
      event-set__leave="[object Object]">

      <a-animation attribute="rotation" dur="2000" to="0 -500 0" repeat="indefinite"></a-animation>

    </a-box>


    <!-- YC Originals -->
    <a-box width="500" height="500" depth="500" position="264.552 -105.496 -1242.917" rotation="0 -320.0354311738257 0" src="#ycoriginals" navigate-on-click="url: yugencreations://#!section=16787412" shadow="" event-set__enter="[object Object]" event-set__leave="[object Object]"
      material="">

      <a-animation attribute="rotation" dur="2000" to="0 -500 0" repeat="indefinite"></a-animation>

    </a-box>


    <!-- Wallpapers -->

    <a-box width="500" height="500" depth="500" position="1392.653 -115.664 -278.839" rotation="0 -323.90948623644624 0" src="#wallpapers" navigate-on-click="url: yugencreations://#!section=16787412" color="#FFFFFF" shadow="" event-set__enter="[object Object]"
      event-set__leave="[object Object]">

      <a-animation attribute="rotation" dur="2000" to="0 -500 0" repeat="indefinite"></a-animation>

    </a-box>


    <!-- Camera -->

    <a-camera position="-5.516 -7.6 11.396" rotation="2.8647889756541165 4.182591904455009 0" camera="active:true" look-controls="" cursor="rayOrigin: mouse" fuse="true" wasd-controls="" raycaster="" data-aframe-inspector-original-camera="">

      <a-entity fuse="true" fusetimeout="50000" position="0 0 -1" geometry="primitive:ring;radiusInner:0.02;radiusOuter:0.03" material="shader:flat;color:cyan" raycaster="">
      </a-entity>

    </a-camera>

  </a-scene>

</body>

</html>

＆＃13;

Answer 1

您的代码存在许多小问题，我在周围更改了一些内容 - 但是在设置raycaster="far: 5000"后它开始工作 - 对于raycaster而言，框太远而无法检查交叉点，因为默认值为{ {1}}。 确保取消注释： 1000 官方文档在这方面是错误的，它说raycaster的//window.location.href = data.url;属性的默认值是far，但是查看源代码实际上是Infinity。

为什么这个脚本不起作用？ - Aframe

1 个答案: