uni-app中点击图标无物理反应,因物理引擎仅作用于xr-frame的XR节点(如),需通过bind:tap调用setRigidbodyVelocity等API控制刚体,且须满足基础库3.4.0+、webgl开启、正确嵌套等条件。

uni-app 本身不内置物理引擎,xr-frame 是目前唯一能在微信小程序中跑 3D 物理碰撞的官方方案,但仅限于 <xr-scene></xr-scene> 场景内,且必须用原生微信小程序基础库 3.4.0+、开启 webgl 渲染模式 —— 普通 view 或 uni-app 的 canvas 标签无法触发任何物理计算。
为什么 uni-app 里点图标没反应?
常见错误是直接在 <view></view> 上加 onclick 并试图调用 applyForce 或修改 rigidbody —— 这根本不会生效。因为:
-
xr-frame的物理系统只响应<xr-mesh></xr-mesh>、<xr-model></xr-model>等 XR 节点上的属性变更,普通 DOM 节点无物理上下文 - 点击事件必须通过
bind:tap触发后,在 JS 中手动更新rigidbody属性(如mass、velocity),不能靠 CSS 或 class 切换 - 微信小程序不支持
requestAnimationFrame在非 XR 上下文中驱动物理模拟,所以“点击后播放动画” ≠ “触发真实碰撞”
xr-physics 和 rigidbody 必须同时存在才有效
只写 <xr-physics></xr-physics> 不够,每个要参与碰撞的物体还得显式声明 rigidbody 属性。漏掉任一环节,球体就只是静态模型:
-
<xr-scene></xr-scene>下必须有<xr-physics gravity="0 -9.8 0"></xr-physics>(重力为 0 就不会下坠) -
<xr-mesh></xr-mesh>必须带rigidbody="mass:1.0",且mass > 0;mass:0等价于静态物体,不参与动力学计算 - 若想点击后让球“弹射”,不能只改
position,得用rigidbody="velocity:0 5 0"或通过setRigidbodyVelocityAPI(需绑定 ref)
点击图标触发碰撞的最小可行路径
不是“给图标加刚体”,而是“用图标控制 3D 场景里的刚体”。典型流程如下:
- 在页面放一个
<button></button>或<image></image>作为 UI 控制按钮,绑定@click="launchBall" - 在
<xr-scene></xr-scene>内定义一个带node-id="ball"的<xr-mesh></xr-mesh>,初始rigidbody="mass:1.0; velocity:0 0 0" -
launchBall方法中调用this.$refs.scene.setRigidbodyVelocity('ball', [0, 8, 0])(需提前用ref="scene"绑定场景) - 确保桌面或地面也带
shape-interact="collide:true",否则球会穿模
注意:setRigidbodyVelocity 是 xr-frame 提供的运行时 API,不是 Vue 响应式属性,直接改 rigidbody 字符串不会实时生效。
容易被忽略的兼容性断点
哪怕代码全对,以下任意一项不满足,碰撞效果就消失:
- 微信开发者工具必须用「调试基础库」3.4.0+,真机测试需 iOS 微信 8.0.48+ / Android 微信 8.0.49+
-
manifest.json中mp-weixin节点必须配置"webgl": true,否则xr-frame渲染器初始化失败 - 场景中至少两个物体:一个带
rigidbody(动态),另一个带shape-interact="collide:true"(静态或动态均可),单个刚体永远不触发碰撞事件 - 微信后台“性能监控”里若显示
XRFrame: physics not initialized,说明<xr-physics></xr-physics>标签位置错误(必须是<xr-scene></xr-scene>的直接子节点)


















