浅析 射线检测 raycast 的使用 | 您所在的位置:网站首页 › 射线探伤教程图解视频下载 › 浅析 射线检测 raycast 的使用 |
为什么我设置了节点点击回调没反应呀?
想要捕捉排球的点击事件,按照 2d 的写法,给3d 节点添加 node 事件,结果点了没反应。代码大概是以下的样子。
this.node_volleyball.on(Node.EventType.TOUCH_START, () => {
console.log(‘不可能看见我’)
}, this);
但是,最近我把版本升级到 v1.0.1 之后,发现之前的方法不管用了。还好,在最新官方文档找到了解决方案。那 就 是 —— 射线检测 。
什么是射线检测呢?上网查了一下,射线检测是这样子的。
首先,我们看到的视角是这样子的。假设我们点击其中屏幕中的一个位置(图中的红点点)。
也可以这么理解,你用眼睛看着一块区域,伸出手指。你可以看到手指头挡住了一点视线,从你的视线做经过手指这个点画一条射线,这个射线穿过的物体,就刚好是你想要点击的物体。 讲了大概原理(?),一起看看如何使用吧。 既然是射线检测,当然要先创建一个射线。 private _ray: geometry.ray = new geometry.ray(); 触摸检测的就用全局系统事件。 systemEvent.on(SystemEventType.TOUCH_START, this.onTouchStart, this); //onTouchStart(touch: Touch, event: EventTouch) 开始画射线,就要用到摄像机嘛!记得上面说的是由点击的点和摄像机决定这条射线的吧。 this.camera_3d.screenPointToRay(touch._point.x, touch._point.y, this._ray); 接下来就是检测这条线穿过了哪些物体啦。 creator 3d 提供了三种检测方案,可以一起看看是如何使用的。 基于物理碰撞器的射线检测: 我们先给需要检测的物体添加碰撞器。
大致与物理模型检测相同,使用的是模型组件。
//基于模型的射线检测 const rs = director.getScene().renderScene; if (rs.raycastSingleModel(this._ray, this.model_basketball.model)) { const r = rs.rayResultSingleModel; for (let i = 0; i < r.length; i++) { const item = r[i]; if (item.node.uuid == this.model_basketball.node.uuid) { this.label_info.string = ‘点了篮球’ } } } 基于 UITransform 组件的射线检测: 因为 canvas 有自己的相机实体,我们需要切换摄像机,代码如下。 //基于 UITransform 组件的射线检测
const uiCamera = this.canvas_2d.camera;
uiCamera.screenPointToRay(this._ray, touch._point.x, touch._point.y);
if (rs.raycastAllCanvas(this._ray)) {
const result = rs.rayResultCanvas;
for (let i = result.length; i–😉 {
const item = result[i];
if (item.node.uuid == this.label_info.node.uuid) {
this.label_info.string = ‘点了文字’;
}
}
}
一起看看最后的效果吧!
【本文使用图片素材转载自Cocos社区作者:白玉无冰】 |
CopyRight 2018-2019 实验室设备网 版权所有 |