Aframe 射线投射器交叉点答案

【问题标题】：Aframe Ray caster IntersectionAframe 射线投射器交叉点
【发布时间】：2019-04-22 20:03:17
【问题描述】：

切换到 Aframe 的主版本后，虽然我保留了完全相同的代码，但光线投射器相交事件似乎变为空：

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@efcc8a0a919811fe5bd4ab6fd60bfbb8e85a98a1/dist/aframe-master.min.js"></script>

使用注册组件：

AFRAME.registerComponent('collider-check', {
  dependencies: ['raycaster'],
  init: function () {
    this.el.addEventListener('raycaster-intersected', function (evt) {
      console.log(evt.detail.intersection);//this returns null
      var intersection=evt.detail.intersection.point;
      startTimer(intersection.x,intersection.y,intersection.z);
    });
  }
});

以及我放置对撞机检查的相机

<a-entity id="cameraParent"  position="0 0 0" >
        <a-entity id="cam" camera="zoom:1;"  look-controls collider-check position="0 0 0" >
          <a-entity cursor=" rayOrigin: mouse"
            geometry="primitive: ring; radiusInner: 0; radiusOuter: 0"
            material="color: black; shader: flat"></a-entity>

          <a-entity raycaster="showLine:true; far: 1000" line="color:orange; opacity:1" ></a-entity>
        </a-entity>
      </a-entity>

我想赶上十字路口的天空

 <a-sky  class="collidable" id="image-360" radius="200"  src="#{{$tour_images[0][0]->name}}" data-image-id="{{$tour_images[0][0]->id}}"></a-sky>

【问题讨论】：

为什么要在天空元素上使用class属性？如果要将光线追踪实体列入白名单，则需要在 raycaster 组件中添加 objects 属性。现在，您正在针对场景中的所有实体进行测试。

标签： javascript html aframe

【解决方案1】：

你现在必须手动抓取路口数据，这是为了防止事件详情中的内存垃圾。

事件详情提供了一个方便的参考方法来抓取交叉点。

evt.detail.getIntersection(this.el);

此外，raycaster-intersected 事件不再是垃圾邮件。它只在交叉路口开始时调用一次。如果您需要发送垃圾邮件，请监听事件、存储变量并使用tick。

【讨论】：

感谢您的回答，但它仍然返回 null
如果光标和光线投射器是单独的实体，您的光标也将不起作用。它们应该是同一个实体。碰撞检查似乎应该在天空中进行，因为它是intersected 事件。 intersection 事件是在光线投射器上收听的。因此，要么将 collider-check 移动到天空，要么将 collider-check 调整为使用 raycaster-intersection 并附加到 raycaster 此外，raycaster-intersected 事件不再是垃圾邮件。它只在交叉路口开始时调用一次。如果您需要发送垃圾邮件，请监听事件、存储变量并使用 tick。
我正在做这个版本更改，因为我在更新 chrome 时遇到了一个问题，并且 a-sky 疯狂旋转而且按钮在某些 IOS 版本上不起作用。除了将使用的 Aframe 版本从 0.8.0 更新到 0.8.2 之外，我还可以在代码中添加解决方案吗？