# 反应三纤维物理（剑杆） ## 快速入门从“@react-三/纤维”导入{画布} 从“@react-two/rapier”导入{Physics、RigidBody、CuboidCollider} 从 'react' 导入 { Suspense } 函数场景（）{ 返回（ <画布> <悬念回退={null}> <物理调试> {/* 掉落的盒子 */} <刚体> <网格> <盒子几何/> {/* 静态接地 */} <环境光/> ） } ## 安装 npm install @react-三/剑杆 ## 物理组件创建物理世界的根组件。从“@react-三/剑杆”导入{物理} <画布> <悬念回退={null}> <物理学 gravity={[0, -9.81, 0]} // 重力向量 debug={false} // 显示碰撞器线框 timeStep={1/60} // 固定时间步长（或变量的“变化”） Paused={false} // 暂停模拟 interpolate={true} // 物理步骤之间的平滑渲染 Colliders="cuboid" // 所有 RigidBody 的默认碰撞器类型 updateLoop="follow" //“跟随”（与帧同步）或“独立” > {/* 物理对象 */} ### 按需渲染对于静态场景的性能优化： <画布frameloop =“需求”> <物理 updateLoop="独立"> {/* 物理仅在物体处于活动状态时触发渲染 */} ## 刚体使物体参与物理模拟。 ### 基本用法从“@react-三/剑杆”导入{RigidBody} // 动态物体（受力/重力影响） <刚体> <网格> <盒子几何/> // 固定体（不可移动） <网格> // 运动体（以编程方式移动） <网格> <球体几何/> ### 刚体类型类型 |描述 ---|--- `动态` |受力、重力、碰撞影响（默认） `固定` |不可移动、质量无限大 `运动学位置` |通过 setNextKinematicTranslation 移动 `运动速度` |通过 setNextKinematicRotation 移动 ### 刚体属性 <刚体 // 变换位置={[0, 5, 0]} 旋转={[0, Math.PI / 4, 0]} 比例={1} // 物理类型=“动态” 质量={1} restitution={0.5} // 弹力 (0-1) 摩擦力={0.5} // 表面摩擦力 LinearDamping={0} // 减慢线速度 angularDamping={0} // 减慢角速度 gravityScale={1} // 重力乘数 // 碰撞体生成 Colliders =“cuboid”//“cuboid”| “球”| “船体”| “修剪网格”|假的 // 约束 lockTranslations={false} // 阻止所有翻译 lockRotations={false} // 阻止所有旋转 enabledTranslations={[true, true, true]} // 锁定特定轴 enabledRotations={[true, true, true]} // 锁定特定轴 // 睡眠可以睡眠={true} ccd={false} // 连续碰撞检测（快速物体） // 命名（碰撞事件）名称=“玩家” /> ## 碰撞器 ### 自动碰撞器 RigidBody 从子网格体自动生成碰撞器： // 全局默认 <物理碰撞器=“船体”> <刚体> {/* 获取船体碰撞器 */} // 每个主体覆盖 <物理碰撞器={false}> <框/> <球体/> ### 碰撞器类型类型 |描述 |最适合 ---|---|--- `长方体` |盒子形状|盒子、板条箱 `球` |球形|球、球形物体 `船体` |凸包|复杂的凸形状 `修剪网格` |三角网|凹/复杂静态几何形状 ### 手动碰撞器导入{ 长方体碰撞器，球对撞机，胶囊对撞机，圆柱体碰撞器，圆锥对撞机，高场对撞机，修剪网格碰撞器，凸体碰撞器来自“@react-三/剑杆” // 独立碰撞器（静态） // 内部 RigidBody（复合碰撞器） <刚体位置={[0, 5, 0]}> <网格> <盒子几何/> <网格标准材质/> {/* 额外的碰撞器 */} // 碰撞器参数参考 ### 网格碰撞器对于复杂形状：从“@react-三/剑杆”导入{MeshCollider} <网格几何={complexGeometry}> <网格标准材质/> // 动态体的凸包 <网格几何={someGeometry} /> ## 施加力量 ### 使用参考从“@react-三/剑杆”导入{RigidBody，RapierRigidBody} 从 'react' 导入 { useRef, useEffect } 函数 ForcefulBox() { constrigidBody = useRef(null) 使用效果（（）=> { 如果（rigidBody.当前）{ // 一次性脉冲（瞬时） rigidBody.current.applyImpulse({ x: 0, y: 10, z: 0 }, true) // 持续力（每帧应用） rigidBody.current.addForce({ x: 0, y: 10, z: 0 }, true) // 扭矩（旋转） rigidBody.current.applyTorqueImpulse({ x: 0, y: 5, z: 0 }, true) rigidBody.current.addTorque({ x: 0, y: 5, z: 0 }, true) } }, []) 返回（ <网格> <盒子几何/> ） } ### 在 useFrame 中从 '@react- Three/Fiber' 导入 { useFrame } 函数连续力（）{ constrigidBody = useRef(null) useFrame(() => { 如果（rigidBody.当前）{ // 每帧施加力 rigidBody.current.addForce({ x: 0, y: 20, z: 0 }, true) } }) 返回（ <网格> <球体几何/> ） } ### 获取/设置位置从 '@react-two/rapier' 导入 { vec3, quat, euler } 函数位置控制() { constrigidBody = useRef(null) 常量传送 = () => { 如果（rigidBody.当前）{ // 获取当前变换 const 位置 = vec3(rigidBody.current.translation()) const 旋转 = quat(rigidBody.current.rotation()) // 设置新的变换 rigidBody.current.setTranslation({ x: 0, y: 10, z: 0 }, true) rigidBody.current.setRotation({ x: 0, y: 0, z: 0, w: 1 }, true) // 设置速度 rigidBody.current.setLinvel({ x: 0, y: 0, z: 0 }, true) rigidBody.current.setAngvel({ x: 0, y: 0, z: 0 }, true) } } 返回（ <盒子几何/> <网格标准材质/> ） } ## 碰撞事件 ### 在刚体上 <刚体名称=“玩家” onCollisionEnter={({ 流形、目标、其他 }) => { console.log('碰撞', other.rigidBodyObject?.name) console.log（'接触点'，manifold.solverContactPoint（0）） }} onCollisionExit={({ 目标, 其他 }) => { console.log('碰撞结束', other.rigidBodyObject?.name) }} onContactForce={({ 总力 }) => { console.log('接触力：',totalForce) }} onSleep={() => console.log('身体进入睡眠状态')} onWake={() => console.log('身体醒了')} > <网格> <盒子几何/> <网格标准材质/> ### 关于碰撞器 <长方体碰撞器参数={[1,1,1]} onCollisionEnter={(payload) => console.log('碰撞器命中')} onCollisionExit={(payload) => console.log('碰撞器退出')} /> ## 传感器检测重叠而无需物理碰撞： <刚体> {/* 可见网格 */} <网格> <盒子几何/> <网格标准材质/> {/* 隐形传感器触发器 */} <长方体碰撞器参数={[2,2,2]} 传感器 onIntersectionEnter={() => console.log('进入触发区域')} onIntersectionExit={() => console.log('退出触发区域')} /> // 目标检测示例 <目标帖子/> <长方体碰撞器参数={[5,5,1]} 传感器 onIntersectionEnter={() => console.log('目标！')} /> ## 碰撞组控制哪些对象可以碰撞：从“@react-三/剑杆”导入{interactionGroups} // 组 0，与组 0、1、2 交互 // 第12组，与所有组交互 // 第 0 组和第 5 组，仅与第 7 组交互 // 在 RigidBody 上（适用于所有自动生成的碰撞器） <网格>... ## 关节将刚体连接在一起。 ### 固定关节物体之间不发生相对移动：从 '@react- Three/rapier' 导入 { useFixedJoint, RapierRigidBody } 函数FixedJointExample() { const bodyA = useRef(null) const bodyB = useRef(null) useFixedJoint(bodyA, bodyB, [ [0, 0, 0], // bodyA 本地空间中的位置 [0, 0, 0, 1], // bodyA 局部空间中的方向（四元数） [0, -1, 0], // bodyB 本地空间中的位置 [0, 0, 0, 1], // bodyB 局部空间中的方向 ]）返回（ <> ） } ### 旋转接头（铰链）绕一轴旋转：从 '@react-two/rapier' 导入 { useRevoluteJoint } 函数铰链门() { const 框架 = useRef(null) const 门 = useRef(null) useRevoluteJoint(框架, 门, [ [0.5, 0, 0], // 框架局部空间中的关节位置 [-0.5, 0, 0], // 门局部空间中的关节位置 [0, 1, 0], // 旋转轴 ]）返回（ <> ） } ### 球形接头（球窝）各个方向旋转：从 '@react- Three/rapier' 导入 { useSphericalJoint } 函数 BallJoint() { const bodyA = useRef(null) const bodyB = useRef(null) useSphericalJoint(bodyA, bodyB, [ [0, -0.5, 0], // bodyA 本地空间中的位置 [0, 0.5, 0], // bodyB 本地空间中的位置 ]）返回（ <> <网格> ） } ### 棱柱形接头（滑块）沿一个轴平移：从 '@react-two/rapier' 导入 { usePrismaticJoint } 函数滑块() { const track = useRef(null) const slider = useRef(null) usePrismaticJoint(轨道, 滑块, [ [0, 0, 0], // 在轨道本地空间中的位置 [0, 0, 0], // 滑块本地空间中的位置 [1, 0, 0], // 平移轴 ]）返回（ <> ） } ### 弹簧接头弹性连接：从 '@react-two/rapier' 导入 { useSpringJoint } 函数 SpringConnection() { const 锚 = useRef(null) const ball = useRef(null) useSpringJoint(锚点, 球, [ [0, 0, 0], // 锚点本地空间中的位置 [0, 0, 0], // 在球的局部空间中的位置 2, // 静止长度 1000, // 刚度 10, // 阻尼 ]）返回（ <> ） } ### 绳索接头最大距离约束：从 '@react-two/rapier' 导入 { useRopeJoint } 函数绳索连接（）{ const 锚 = useRef(null) const 权重 = useRef(null) useRopeJoint(锚点, 重量, [ [0, 0, 0], // 锚点本地空间中的位置 [0, 0, 0], // 权重局部空间中的位置 3, // 最大距离（绳子长度） ]）返回（ <> ） } ### 电动关节从 '@react-two/rapier' 导入 { useRevoluteJoint } 从 '@react- Three/Fiber' 导入 { useFrame } 函数 MotorizedWheel({ bodyA, bodyB }) { const 关节 = useRevoluteJoint(bodyA, bodyB, [ [0,0,0], [0,0,0], [0, 0, 1], // 旋转轴 ]） useFrame(() => { if (关节.当前) { // 配置电机：速度、阻尼关节.current.configureMotorVelocity(10, 2) } }) 返回空值 } ## 实例物理针对许多相同物体的高效物理：从 '@react- Three/rapier' 导入 { InstancedRigidBody, RapierRigidBody } 从 'react' 导入 { useRef, useMemo } 函数 InstancedBalls() { 常量计数 = 100 constrigidBodies = useRef(null) const 实例 = useMemo(() => { return Array.from({ 长度: COUNT }, (_, i) => ({ 键：`球-${i}`，位置：[ (数学.随机() - 0.5) * 10, Math.random() * 10 + 5, (数学.随机() - 0.5) * 10, ] 作为[数字，数字，数字]，旋转：[0, 0, 0] as [数字，数字，数字]， }）） }, []) 返回（ <实例化刚体参考={刚体} 实例={实例} 碰撞器=“球” > ） } ## 接触世界从 '@react-two/rapier' 导入 { useRapier } 从 'react' 导入 { useEffect } 函数 WorldAccess() { const { 世界, 剑杆 } = useRapier() 使用效果（（）=> { // 改变重力 world.setGravity({ x: 0, y: -20, z: 0 }) // 迭代实体 world.bodies.forEach((body) => { console.log(body.translation()) }) }，[世界]）返回空值 } ### 手动步进函数手动步骤() { const { 步骤 } = useRapier() const advancePhysics = () => { step(1 / 60) // 前进一帧 } 返回 } ### 世界快照保存和恢复物理状态：函数快照系统() { const { 世界, setWorld, 剑杆 } = useRapier() const 快照 = useRef() 常量保存状态 = () => { snapshot.current = world.takeSnapshot() } const loadState = () => { 如果（快照.当前）{ setWorld(剑杆.World.restoreSnapshot(snapshot.current)) } } 返回（ <> ） } ## 吸引子来自“@react-三/rapier-addons”：从 '@react-two/rapier-addons' 导入 { Attractor } // 吸引附近的物体 <吸引子位置={[0,0,0]} 范围={10} 强度={5} 类型=“线性”//“静态”| “线性”| “牛顿” /> // 排斥物体 <吸引子范围={10}强度={-5}位置={[5,0,0]}/> // 选择性吸引（仅影响特定群体） <吸引子范围={10} 强度={10} 碰撞组={交互组(0, [2, 3])} /> ## 调试可视化 <物理调试> {/* 所有碰撞器均显示为线框 */} // 条件调试 <物理调试={process.env.NODE_ENV === '开发'}> ... ## 性能提示 1. **使用适当的碰撞体类型**：`cuboid` 和 `ball` 是最快的 2. **避免动态物体的`trimesh`：使用`hull`代替 3. **启用睡眠**：休息时的身体停止计算 4. **使用碰撞组**：减少碰撞检查 5. **限制活动主体**：太多的动态主体会损害性能 6. **使用实例化主体**：对于许多相同的对象 7. **固定时间步长**：比可变时间步长更稳定 // 性能优化设置 <物理学时间步长={1/60} 碰撞体=“长方体” 重力={[0, -9.81, 0]} > {/* 使用碰撞组来限制检查 */} ... ## 另请参阅 * `r3f-fundamentals` \- R3F 基础知识和挂钩 * `r3f-interaction` \- 用户输入和控制 * `r3f-animation` \- 将物理与动画相结合

R3f物理

包含技能