Cocos Creator:AR 交互

Cocos Creator:AR 交互_第1张图片

推荐:将NSDT场景编辑器加入你的

3D工具链3D工具集:NSDT简石数字孪生AR

https://www.mvrlink.com/cocos-creator-ar-interaction/

交互AR 交互主要由 cc.ScreenTouchInteractor 组件驱动,该组件将触摸事件转换为点击、拖拽和捏合等手势,交互器将这些手势传递给可以交互的虚拟交互物,完成手势对应触发的行为。手势交互AR 手势交互器组件将屏幕触摸转换为手势。Cocos Creator 的输入系统将手势信号传递给交互物,然后交互物响应手势事件发生变换行为。交互物能发生交互行为的前提是必须绑定 cc.Selectable 组件,关于此组件的属性描述详见交互组件 Selectable。想要使用 屏幕手势交互器,在层级管理器中右键创建 XR -> Screen Touch Interactor 。
Cocos Creator:AR 交互_第2张图片
随意创建一个 3D 物体(以 Cube 为例)。修改 Cube 的 Scale 属性为(0.1,0.1,0.1)既实际大小为 1000cm³ ,修改 Position 属性为(0,-0.1,-0.5)即位于空间远点处 50cm 远且靠下10cm的位置,并添加组件 XR > Interaction -> Selectable。
Cocos Creator:AR 交互_第3张图片

Cocos Creator:AR 交互_第4张图片
下面创建选中效果,在资源文件夹中创建一个预置体,命名为 Selected Visualizer。
Cocos Creator:AR 交互_第5张图片
在预置体根节点下创建一个同样的 Cube 对象,Scale 大小设置为基于父节点的 1.2 倍。
Cocos Creator:AR 交互_第6张图片
创建一个新的材质,突出表现选中态的效果。
Cocos Creator:AR 交互_第7张图片
调整材质效果,建议 Effect 选择 builtin-unlit,Technique 选择 1-transparent。
Cocos Creator:AR 交互_第8张图片
材质创建完毕后,应用到预置体中 Cube 的 cc.MeshRenderer 中,即可完成选中效果的创建。
Cocos Creator:AR 交互_第9张图片
最后,将预置体应用到 cc.Selectable 的 Selected Visualization 属性中。
Cocos Creator:AR 交互_第10张图片
运行时效果如下,可以结合手势来移动、旋转和放缩虚拟物体。

放置使用 屏幕手势交互器 时,会启用设备 AR Hit Test 能力,根据屏幕触碰位置坐标转换到摄像机使用 Ray Cast 与 AR Plane 发生碰撞计算,来获取碰撞点的位置,最终在平面的此坐标上放置虚拟对象。能够被放置的预置体对象必须要挂载cc.Placeable组件。以上述场景中制作的 Selectable 对象为例,以下对其赋予被放置交互能力。选中场景中的 Cube 对象,为其添加组件 XR -> Interaction -> Placeable。
Cocos Creator:AR 交互_第11张图片
将此场景节点拖入资源管理器生成一份预置体,并删除场景中的此 Cube 对象。
Cocos Creator:AR 交互_第12张图片
将刚生成的Cube预置体引用到 Screen Touch Interactor -> Place Action > Placement Prefab 属性中,Calculation Mode 选择 AR_HIT_DETECTION。
Cocos Creator:AR 交互_第13张图片
放置对象的位置计算需要依赖于 AR Plane,所以还需创建一个 Plane Tracking 节点来请求设备激活 AR SDK 的平面识别能力。在编辑器的层级管理器中右键 创建 > XR > Plane Tracking,创建平面代理节点。
Cocos Creator:AR 交互_第14张图片
所有工作都完成后,即可打包发布,在运行时查看放置效果。

你可能感兴趣的:(编辑器)