网站设计师简介,中国工厂网站官方网站,html5的广泛应用,app推广平台排行榜上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用
这篇我们讲解如何与场景中的模型交互#xff08;点击识别#xff09;
先看源码 xr-scene render-systemalpha:true bind:readyhandleReadyxr-nodexr-mesh id…上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用
这篇我们讲解如何与场景中的模型交互点击识别
先看源码 xr-scene render-systemalpha:true bind:readyhandleReadyxr-nodexr-mesh id1 node-idmesh-sphere position-0.4 0 -0.4 scale0.3 0.3 0.3 geometrysphere mesh-shape bind:touch-shapehandleTouchModel uniformsu_baseColorFactor:0.3 0.5 0.8 1,u_metallicRoughnessValues: 0.3 0.2/xr-meshxr-mesh id2 node-idmesh-sphere2 position0.4 0 0.4 scale0.3 0.3 0.3 geometrysphere mesh-shape bind:touch-shapehandleTouchModel uniformsu_baseColorFactor:0.5 0.4 0.6 1,u_metallicRoughnessValues: 0.3 0.7/xr-mesh/xr-nodexr-camera idcamera clear-color0 0 0 0 position1 1 2 targetmesh-sphere camera-orbit-control/
/xr-scene
这里与前几章的代码没有太大区别
要实现点击物体的交互关键就是在xr-mesh中加入mesh-shape属性。然后在加入绑定事件bind:touch-shapehandleTouchModel。
当在页面中点击了这个mesh就会触发handleTouchModel这个回调函数。
我们在index.js文件中编写handleTouchModel的代码 handleTouchModel: function ({detail}) {const {target} detail.value;const id target.id; wx.showToast({title: 点击了模型${id},icon:none});},
代码中通过获取点击模型的id识别出点击的是哪个物体然后便可以根据自己业务的需求进一步完善代码。
这里给大家推荐一个微信小程序 3D模型素材库这个小程序中的模型都是针对小程序优化后的glb格式文件体积小加载快非常适合小程序使用
