上篇文章講述了如何將XR-Frame作為子組件集成到uniApp中使用

這篇我們講解如何與場景中的模型交互（點(diǎn)擊識別）

先看源碼

<xr-scene render-system="alpha:true" bind:ready="handleReady"><xr-node><xr-mesh id="1" node-id="mesh-sphere" position="-0.4 0 -0.4" scale="0.3 0.3 0.3" geometry="sphere" mesh-shape bind:touch-shape="handleTouchModel"  uniforms="u_baseColorFactor:0.3 0.5 0.8 1,u_metallicRoughnessValues: 0.3 0.2"></xr-mesh><xr-mesh id="2" node-id="mesh-sphere2" position="0.4 0 0.4" scale="0.3 0.3 0.3" geometry="sphere" mesh-shape bind:touch-shape="handleTouchModel"  uniforms="u_baseColorFactor:0.5 0.4 0.6 1,u_metallicRoughnessValues: 0.3 0.7"></xr-mesh></xr-node><xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="mesh-sphere" camera-orbit-control/>
</xr-scene>

這里與前幾章的代碼沒有太大區(qū)別

要實(shí)現(xiàn)點(diǎn)擊物體的交互，關(guān)鍵就是在<xr-mesh>中，加入mesh-shape屬性。然后在加入綁定事件bind:touch-shape="handleTouchModel"。

當(dāng)在頁面中點(diǎn)擊了這個(gè)mesh，就會(huì)觸發(fā)handleTouchModel這個(gè)回調(diào)函數(shù)。

我們在index.js文件中編寫handleTouchModel的代碼

handleTouchModel: function ({detail}) {const {target} = detail.value;const id = target.id; wx.showToast({title: `點(diǎn)擊了模型：${id}`,icon:'none'});},

代碼中通過獲取點(diǎn)擊模型的id識別出點(diǎn)擊的是哪個(gè)物體，然后便可以根據(jù)自己業(yè)務(wù)的需求進(jìn)一步完善代碼。

這里給大家推薦一個(gè)微信小程序?3D模型素材庫，這個(gè)小程序中的模型都是針對小程序優(yōu)化后的glb格式文件，體積小，加載快，非常適合小程序使用