微信小程序XR-FRAME模型交互，点击模型执行某个函数

大家好，我是1024小神，技术群 / 私活群 / 股票群 或 交朋友 都可以私信我。

如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~

微信官方文档：开始 | 微信开放文档

再来点交互

渲染部分到这里说的就差不多了，但作为一个应用，和用户的交互必不可少。很多场景下开发者可能需要点击场景中的物体来做一些逻辑，所以我们提供了shape系列组件：

<xr-gltf
  node-id="damage-helmet" model="damage-helmet"
  id="helmet" mesh-shape bind:touch-shape="handleTouchModel"
/>
<xr-gltf
  model="miku" position="-0.15 0.75 0" scale="0.07 0.07 0.07" rotation="0 180 0" anim-autoplay
  id="miku" cube-shape="autoFit:true" shape-gizmo bind:touch-shape="handleTouchModel"
/>

我们给几个模型设置了id，添加上了不同形状的shape，一个mesh-shape可以完全匹配模型，但开销较高并有顶点限制，一个cube-shape开销较低，还可以打开debug开关shape-gizmo将它显示出来。最后，我们并绑定了对应的点击事件，之后便可以在脚本里写逻辑，完成相应的操作了：

handleTouchModel: function ({detail}) {
  const {target} = detail.value;
  const id = target.id;
  
  wx.showToast({title: `点击了模型： ${id}`});
}

之后在点击到对应物体时，便会弹出提示：

如果你有好的想法或需求，可以私信我，我这里有很多程序员朋友可以帮你实现你的想法。