feat(rapier): refactor adn expose context

alvarosabu · alvarosabu · commit 782c7b0f298f · 2026-02-12T22:36:21.000+01:00
- Use `createInjectionState` for rapier context
- Updated RigidBody and collider components to use the new context structure.
- Fixed collider removal logic to ensure proper context handling in various components.
- Adjusted gravity settings in Physics component to utilize the new context structure.
diff --git a/apps/playground/src/pages/rapier/Colliders.vue b/apps/playground/src/pages/rapier/Colliders.vue
@@ -20,7 +20,7 @@ const gl = {
 
     <Suspense>
       <Physics debug>
-        <RigidBody>
+        <RigidBody :collider="false">
           <BallCollider :args="[1, 1, 1]" :position="[2, 10, 0]" />
           <CapsuleCollider :args="[1, 1, 1]" :position="[-2, 10, 0]" />
           <ConeCollider :args="[1, 1, 1]" :position="[0, 10, 2]" />
diff --git a/apps/playground/src/pages/rapier/ExposeDemo.vue b/apps/playground/src/pages/rapier/ExposeDemo.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { Physics, RigidBody } from '@tresjs/rapier'
+import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
+import { ref, watchEffect } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: ACESFilmicToneMapping,
+}
+
+const physicsRef = ref()
+
+watchEffect(() => {
+  if (physicsRef.value) {
+    console.log('Physics exposed context:', physicsRef.value)
+  }
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[15, 15, 15]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+
+    <Suspense>
+      <Physics ref="physicsRef" debug :gravity="[0, -9.81, 0]">
+        <RigidBody>
+          <TresMesh :position="[0, 8, 0]">
+            <TresBoxGeometry />
+            <TresMeshNormalMaterial />
+          </TresMesh>
+        </RigidBody>
+
+        <RigidBody type="fixed">
+          <TresMesh>
+            <TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
+            <TresMeshBasicMaterial color="#f4f4f4" />
+          </TresMesh>
+        </RigidBody>
+      </Physics>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/apps/playground/src/router/routes/rapier/index.ts b/apps/playground/src/router/routes/rapier/index.ts
@@ -49,4 +49,9 @@ export const rapierRoutes = [
     name: 'Advanced Joints',
     component: () => import('@/pages/rapier/JointsAdvancedDemo.vue'),
   },
+  {
+    path: '/rapier/expose',
+    name: 'Expose',
+    component: () => import('@/pages/rapier/ExposeDemo.vue'),
+  },
 ]
diff --git a/packages/rapier/package.json b/packages/rapier/package.json
@@ -54,7 +54,8 @@
     "vue": ">=3.4.0"
   },
   "dependencies": {
-    "@dimforge/rapier3d-compat": "^0.19.3"
+    "@dimforge/rapier3d-compat": "^0.19.3",
+    "@vueuse/core": "catalog:utils"
   },
   "devDependencies": {
     "@tresjs/core": "workspace:*",
diff --git a/packages/rapier/src/components/Debug.vue b/packages/rapier/src/components/Debug.vue
@@ -13,7 +13,7 @@ const lineSegmentsRef = ref<LineSegments | null>(null)
 onBeforeRender(() => {
   if (!world || !lineSegmentsRef.value?.geometry?.boundingSphere) { return }
 
-  const buffers = world.debugRender()
+  const buffers = world.value.debugRender()
 
   lineSegmentsRef.value.geometry.setAttribute(
     'position',
diff --git a/packages/rapier/src/components/InstancedRigidBody.vue b/packages/rapier/src/components/InstancedRigidBody.vue
@@ -116,10 +116,10 @@ onUnmounted(() => {
   if (!bodiesContexts.value) { return }
 
   bodiesContexts.value.forEach((context) => {
-    world.removeRigidBody(context.rigidBody)
+    world.value.removeRigidBody(context.rigidBody)
 
     context.colliders.forEach((collider) => {
-      world.removeCollider(collider.collider, false)
+      world.value.removeCollider(collider.collider, false)
     })
   })
 
diff --git a/packages/rapier/src/components/Physics.vue b/packages/rapier/src/components/Physics.vue
@@ -24,20 +24,24 @@ const props = withDefaults(
   },
 )
 
-const { world, isPaused } = await useRapierContextProvider()
+const context = useRapierContextProvider()!
+defineExpose(context)
+await context.init()
+const { world, isPaused } = context
+
 
 const setGravity = (gravity: PhysicsProps['gravity']) => {
   // If gravity is something like [0, -9.8, 0]
   if (Array.isArray(gravity)) {
-    world.gravity.x = gravity[0]
-    world.gravity.y = gravity[1]
-    world.gravity.z = gravity[2]
+    world.value.gravity.x = gravity[0]
+    world.value.gravity.y = gravity[1]
+    world.value.gravity.z = gravity[2]
   }
   else {
     const coordinates = gravity as VectorCoordinates
-    world.gravity.x = coordinates.x
-    world.gravity.y = coordinates.y
-    world.gravity.z = coordinates.z
+    world.value.gravity.x = coordinates.x
+    world.value.gravity.y = coordinates.y
+    world.value.gravity.z = coordinates.z
   }
 }
 
@@ -51,15 +55,15 @@ watch(() => props.gravity, (gravity) => {
 const { onBeforeRender } = useLoop()
 
 onBeforeRender(() => {
-  if (!world || isPaused) { return }
+  if (!world.value || isPaused.value) { return }
   if (typeof props.timestep === 'number') {
-    world.timestep = props.timestep
+    world.value.timestep = props.timestep
   }
 
-  world.step(eventQueue)
+  world.value.step(eventQueue)
   eventQueue.drainCollisionEvents((handle1, handle2, started) => {
-    const source1 = getSourceFromColliderHandle(world, handle1)
-    const source2 = getSourceFromColliderHandle(world, handle2)
+    const source1 = getSourceFromColliderHandle(world.value, handle1)
+    const source2 = getSourceFromColliderHandle(world.value, handle2)
     const group1 = get3DGroupFromSource(source1, scene)
     const group2 = get3DGroupFromSource(source2, scene)
 
@@ -76,7 +80,7 @@ onBeforeRender(() => {
     emitIntersection(
       { object: group2, context: source2 },
       { object: group1, context: source1 },
-      started && world.intersectionPair(source1.collider, source2.collider),
+      started && world.value.intersectionPair(source1.collider, source2.collider),
     )
   })
 })
diff --git a/packages/rapier/src/components/RigidBody.vue b/packages/rapier/src/components/RigidBody.vue
@@ -152,10 +152,10 @@ onUpdated(() => {
 onUnmounted(() => {
   if (!bodyContext.value) { return }
 
-  world.removeRigidBody(bodyContext.value.rigidBody)
+  world.value.removeRigidBody(bodyContext.value.rigidBody)
 
   bodyContext.value.colliders.forEach((collider) => {
-    world.removeCollider(collider.collider, false)
+    world.value.removeCollider(collider.collider, false)
   })
 
   bodyContext.value = undefined
diff --git a/packages/rapier/src/components/colliders/BaseCollider.vue b/packages/rapier/src/components/colliders/BaseCollider.vue
@@ -92,7 +92,7 @@ watch([() => props.activeCollision, colliderInfos], ([_activeCollision]) => {
 onUnmounted(() => {
   if (!bodyContext.value || !colliderInfos.value?.collider) { return }
 
-  world.removeCollider(colliderInfos.value.collider, false)
+  world.value.removeCollider(colliderInfos.value.collider, false)
 
   colliderInfos.value = undefined
 })
diff --git a/packages/rapier/src/components/joints/BaseJoint.vue b/packages/rapier/src/components/joints/BaseJoint.vue
@@ -22,7 +22,7 @@ const joints = shallowRef<ImpulseJoint>()
 
 const dispose = () => {
   if (joints.value) {
-    world.removeImpulseJoint(joints.value, wakeUpOnChanges)
+    world.value.removeImpulseJoint(joints.value, wakeUpOnChanges)
     joints.value = undefined
   }
 }
@@ -31,8 +31,8 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
   dispose()
 
   if (
-    !(bodies?.[0] instanceof rapier.RigidBody)
-    || !(bodies?.[1] instanceof rapier.RigidBody)
+    !(bodies?.[0] instanceof rapier.value.RigidBody)
+    || !(bodies?.[1] instanceof rapier.value.RigidBody)
     || !Array.isArray(params)
   ) {
     return
@@ -49,7 +49,7 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
     && (Array.isArray(params[2]) && params[2].length >= 3)
     && (Array.isArray(params[3]) && params[3].length >= 4)
   ) {
-    jointParams = rapier.JointData.fixed(
+    jointParams = rapier.value.JointData.fixed(
       new Vector3(...params[0] as VectorArray),
       new Quaternion(...params[1] as QuaternionArray),
       new Vector3(...params[2] as VectorArray),
@@ -68,7 +68,7 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
     && (Array.isArray(params[2]) && params[2].length >= 3)
     && typeof params[3] === 'number'
   ) {
-    jointParams = rapier.JointData.generic(
+    jointParams = rapier.value.JointData.generic(
       new Vector3(...params[0] as VectorArray),
       new Vector3(...params[1] as VectorArray),
       new Vector3(...params[2] as VectorArray),
@@ -86,7 +86,7 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
     && (Array.isArray(params[1]) && params[1].length >= 3)
     && (Array.isArray(params[2]) && params[2].length >= 3)
   ) {
-    jointParams = rapier.JointData.prismatic(
+    jointParams = rapier.value.JointData.prismatic(
       new Vector3(...params[0] as VectorArray),
       new Vector3(...params[1] as VectorArray),
       new Vector3(...params[1] as VectorArray),
@@ -103,7 +103,7 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
     && (Array.isArray(params[1]) && params[1].length >= 3)
     && (Array.isArray(params[2]) && params[2].length >= 3)
   ) {
-    jointParams = rapier.JointData.revolute(
+    jointParams = rapier.value.JointData.revolute(
       new Vector3(...params[0] as VectorArray),
       new Vector3(...params[1] as VectorArray),
       new Vector3(...params[2] as VectorArray),
@@ -120,7 +120,7 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
     && (Array.isArray(params[1]) && params[1].length >= 3)
     && (Array.isArray(params[2]) && params[2].length >= 4)
   ) {
-    jointParams = rapier.JointData.rope(
+    jointParams = rapier.value.JointData.rope(
       params[0],
       new Vector3(...params[1] as VectorArray),
       new Quaternion(...params[2] as QuaternionArray),
@@ -136,7 +136,7 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
     && (Array.isArray(params[0]) && params[0].length >= 3)
     && (Array.isArray(params[1]) && params[1].length >= 3)
   ) {
-    jointParams = rapier.JointData.spherical(
+    jointParams = rapier.value.JointData.spherical(
       new Vector3(...params[0] as VectorArray),
       new Vector3(...params[1] as VectorArray),
     )
@@ -154,7 +154,7 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
     && (Array.isArray(params[3]) && params[3].length >= 3)
     && (Array.isArray(params[4]) && params[4].length >= 3)
   ) {
-    jointParams = rapier.JointData.spring(
+    jointParams = rapier.value.JointData.spring(
       params[0],
       params[1],
       params[2],
@@ -174,7 +174,7 @@ const setup = (bodies: JointProps['bodies'], params: JointProps['params']) => {
     throw new Error(`Unsupported joint type. If you think this is a bug or the "${type}" type should be implemented, please open an issue.`)
   }
 
-  joints.value = world.createImpulseJoint(jointParams, bodies[0], bodies[1], wakeUpOnChanges)
+  joints.value = world.value.createImpulseJoint(jointParams, bodies[0], bodies[1], wakeUpOnChanges)
 }
 
 onUpdated(() => setup(bodies, params))
diff --git a/packages/rapier/src/composables/useRapier.ts b/packages/rapier/src/composables/useRapier.ts
@@ -1,57 +1,53 @@
-import { inject, provide } from 'vue'
-
-import { GRAVITY } from '../constants/physics'
+import { createInjectionState } from '@vueuse/core'
+import { shallowRef, ref } from 'vue'
 import type { RapierContext } from '../types/rapier'
+import type { World } from '@dimforge/rapier3d-compat'
+import { GRAVITY } from '../constants/physics'
 
-/**
- * @description Provides the `RapierContext` provider.
- */
-export async function useRapierContextProvider() {
-  const toProvide: Partial<RapierContext> = {
-    rapier: undefined,
-    world: undefined,
-    isPaused: false,
-    isDebug: false,
-    setWorld: (world) => {
-      toProvide.world = world
-    },
-    step: (timestep) => {
-      if (!toProvide.world) { return }
-      if (typeof timestep === 'number') { toProvide.world.timestep = timestep }
-
-      toProvide.world.step()
-    },
+const [
+  useRapierContextProvider,
+  _useRapierContext
+] = createInjectionState((): RapierContext => {
+  const rapier = shallowRef()
+  const world = shallowRef()
+  const isPaused = ref(false)
+  const isDebug = ref(false)
+
+  const init = async () => {
+    const RAPIER = await import('@dimforge/rapier3d-compat')
+    await RAPIER.init()
+    rapier.value = RAPIER
+    world.value = new RAPIER.World(GRAVITY)
   }
 
-  provide('useRapier', toProvide)
-
-  toProvide.rapier = await import('@dimforge/rapier3d-compat')
-  await toProvide.rapier.init()
-
-  /* Initialize the world with gravity and timestep. */
-  toProvide.world = new toProvide.rapier.World(GRAVITY)
-
-  return toProvide as RapierContext
-}
+  const setWorld = (w: World) => {
+    world.value = w
+  }
 
-/**
- * @description Provides the `RapierContext`
- *
- * @internal
- */
-export function useRapierContext(): RapierContext {
-  const context = inject<Partial<RapierContext>>('useRapier')
+  const step = (timestep?: number) => {
+    if (!world.value) return
+    if (typeof timestep === 'number') world.value.timestep = timestep
+    world.value.step()
+  }
 
-  if (!context?.world) {
-    throw new Error(
-      'useRapierContext must be used together with useRapierContextProvider',
-    )
+  return {
+    rapier,
+    world,
+    isPaused,
+    isDebug,
+    init,
+    setWorld,
+    step,
   }
+}, { injectionKey: 'useRapier' })
 
-  return context as RapierContext
+const useRapierContext = () => {
+  const ctx = _useRapierContext()
+  if (!ctx?.world.value) {
+    throw new Error('useRapierContext must be used together with useRapierContextProvider')
+  }
+  return ctx
 }
 
-/**
- * @description Provides the `RapierContext`
- */
 export const useRapier = useRapierContext
+export { useRapierContext, useRapierContextProvider }
diff --git a/packages/rapier/src/core/collider.ts b/packages/rapier/src/core/collider.ts
@@ -50,7 +50,7 @@ export const createColliderDesc = (props: CreateColliderDescProps) => {
     z: props.rotation[2] ?? 0,
     w: props.rotation[3] ?? 0,
   })) ?? object?.quaternion ?? rigidBody.rotation() ?? QUATERNION_ZERO
-  const sizes = getColliderSizingsFromObject(object)
+  const sizes = getColliderSizingsFromObject(object as TresObject3D)
   const halfWidth = (args?.[0] ?? sizes.halfWidth) * (scale?.[0] ?? 1)
   const halfHeight = (args?.[1] ?? sizes.halfHeight) * (scale?.[1] ?? 1)
   const halfDepth = (args?.[2] ?? sizes.halfDepth) * (scale?.[2] ?? 1)
@@ -121,7 +121,7 @@ export const createCollider = (
 ): CreateColliderReturnType => {
   const { world, rigidBody, object } = props
   const colliderDesc = createColliderDesc(props)
-  const collider = world.createCollider(colliderDesc, rigidBody)
+  const collider = world.value.createCollider(colliderDesc, rigidBody)
 
   return {
     collider,
diff --git a/packages/rapier/src/core/rigid-body.ts b/packages/rapier/src/core/rigid-body.ts
diff --git a/packages/rapier/src/types/collider.ts b/packages/rapier/src/types/collider.ts
diff --git a/packages/rapier/src/types/rapier.ts b/packages/rapier/src/types/rapier.ts
diff --git a/packages/rapier/src/types/rigid-body.ts b/packages/rapier/src/types/rigid-body.ts
diff --git a/packages/rapier/src/utils/collider.ts b/packages/rapier/src/utils/collider.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
