上一篇文章， 我们讲解了

xr-frame 框架下的粒子系统https://blog.csdn.net/weixin_39318421/article/details/137097137?spm=1011.2415.3001.5331

本篇文章， 我们讲解一下xr-frame框架下刚体和碰撞体的设置方法。

一.物理系统

要学习刚体，我们首先要明白xr-frame框架下的物理系统

场景中，要开启物理系统，我们需要在 <xr-scene> 标签下 配置一个 <xr-physics> 标签。

<xr-scene>
    <xr-physics />
     ...(场景中的其他标签)
</xr-scene>

这个 xr-physics 标签代表场景中开启了物理系统，物理系统主要有两个属性

disabled	是否禁用物理	boolean	disable=true的话，效果和不存在<xr-physics>标签时一致。
gravity	全局重力	Vector3	默认重力(0, -9.8, 0)

这个 gravity 默认为-9.8.也就是说在Y轴上负方向的加速度为9.8，用来模拟重力的作用。

二. 刚体

有了物理系统，我们要让某个几何体实现自由落体的运动，就需要给这个几何体设置刚体。

<xr-mesh 
sphere-shape 
shape-interact="collide:true;bounciness:0.9" 
rigidbody="mass:5.0" 
node-id="mesh-sphere" 
position="0 1 0" 
scale="0.7 0.7 0.7" 
geometry="sphere"  
material="ballMat">
</xr-mesh>

上面的代码中我们给一个球体设置了刚体组件 rigidbody 并且给刚体属性 mass 设置了一个5.0

disabled	是否禁用刚体	boolean	disable=true的话，效果和不存在rigidbody属性时一致。
mass	刚体质量	number	mass > 0
useGravity	是否受重力影响	boolean
constraintsMask	限制刚体在某个轴上的移动	number

上面是刚体组件可以设置的主要属性。

完成了这些配置，我可以看到模拟器中，球体受重力影响加速下坠的物理运动。

三.碰撞

上一步，我们给小球设置了刚体，这一步我们再在场景中加入一个长方形几何体作为桌面，让小球与桌面发生碰撞回弹。

<xr-mesh 
cube-shape 
shape-interact="collide:true;bounciness:1" 
node-id="mesh-plane" 
position="0 -1 0" 
rotation="0 0 0" 
scale="7 0.1 7" 
geometry="cube" 
material="tableMat">
</xr-mesh>

现在模拟器中预览一下：

这里需要注意，我们并没有给作为桌面的长方形几何体设置刚体，因为刚体的运用主要是为了受物理效果影响。

（1）轮廓 Shape

上面代码中，首先我们设置了几何体的轮廓。

cube-shape

碰撞实际上是轮廓和轮廓间的接触实现的。所需首先需要给两个几何体都设置好轮廓。

（2）轮廓交互 interact

轮廓设置好后，我们还要给两个几何体设置轮廓交互

shape-interact="collide:true;bounciness:1"

这里就是设置的轮廓交互，其属性解释如下

disabled	是否禁用交互	boolean	disable=true的话，效果和不存在shape-interact属性时一致
collide	是否发生碰撞	boolean	collide=true的话，发生碰撞，否则发生重叠，默认false
bounciness	弹性系数	number	0≤bounciness≤1，仅当collide=true时生效
staticFriction	静摩擦系数	number	0≤staticFriction≤1，仅当collide=true时生效
dynamicFriction	动摩擦系数	number	0≤staticFriction≤1，仅当collide=true时生效

在这个实例中，我们将 collide 设置为 true ，也就是要发生碰撞。

bounciness 设置为了1，也就是最大弹性。

再次观察模拟器，我们可以看到小球在桌面上不断做回弹运动。

四.交互事件

碰撞后，我们有时需要做一些后续的处理，这里就涉及到交互事件，我们在桌面几何体上绑定一个碰撞回调函数

<xr-mesh cube-shape shape-interact="collide:true;bounciness:1" 
bind:collide-begin="handleCollideBegin" 
node-id="mesh-plane" 
position="0 -1 0" 
rotation="0 0 0" 
scale="7 0.1 7" 
geometry="cube" 
material="tableMat"></xr-mesh>

代码中

bind:clloide-begin="handleCollideBegin"

就是桌面受到碰撞后的回调函数，我们简单在index.js文件中加入处理函数。

//碰撞回调
handleCollideBegin(e){
	console.log(e)
}

这里只是简单地打印了一个碰撞事件，大家可以通过调试器Console面板查看。

五.注意

（1）刚体物理功能目前尚在Beta阶段，并且需要2.32.1及之后的基础库才能使用。

（2）<xr-physics>标签只能位于<xr-scene>下一级，不能放置在更深的层级中。

六.附件说明

附件中的代码就是本篇文章用到的模型点击交互识别的xr-frame组件中的代码。

大家可以参考学习，如果不会配置需要查看一下这篇文章，xr-frame基础环境搭建。

七.示例小程序

附件中的示例小程序，是我根据官方指南做的一个简易的示例程序，其中运用了场景的搭建，材质动态修改，模型动态添加与删除，粒子特效等功能，可以作为本篇文章的参考。