javascript - Aframe 射线投射器 交叉点
问题描述
切换到 Aframe 的主版本后,虽然我保留了完全相同的代码,但 raycaster 相交事件似乎变为空:
<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>
解决方案
您现在必须手动获取交叉点数据,这是为了防止事件详细信息中的内存垃圾。
事件详细信息提供了对抓取交叉点的方法的方便引用。
evt.detail.getIntersection(this.el);
此外,该raycaster-intersected
事件不再是垃圾邮件。它只在交叉路口开始时调用一次。如果您需要发送垃圾邮件,请监听事件、存储变量并使用tick
.
推荐阅读
- microsoft-graph-api - Microsoft Graph:Planner 任务的筛选问题
- javascript - Chrome 扩展程序 - “无法为内容脚本加载 javascript ''”
- react-native - 无法在 Nuclide Atom 中启动调试器
- sql - How to build a view without repeating ids?
- codenameone - 代号一个错误-每次我上传 gif 图像时,我都无法从 .res 文件中选择新图像
- python-3.x - Python TkInter:创建一个运行我的自定义代码的窗口
- php - 从 recaptcha 响应中调试格式错误的 json 数据?
- mongodb - 基于某些条件的MongoDB聚合分支计算?
- windows - 如何将 Git 部署到测试/生产 IIS Win 208/2012 服务器忽略某些文件夹
- c# - Powershell C# commandlet 条件开关参数