fix(rapier): fix automatic colliders reactive props

Author: JaimeTorrealba

apps/playground/src/pages/rapier/AutomaticColliders.vue

@@ -4,6 +4,7 @@ import { TresCanvas } from '@tresjs/core'
 import { Physics, RigidBody } from '@tresjs/rapier'
 import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
+import type { ExposedRigidBody } from '@tresjs/rapier'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -24,9 +25,9 @@ const jump = () => {
 const { debug, friction, mass, restitution, density } = useControls({
   debug: true,
   friction: { value: 0.5, min: 0, max: 1, step: 0.1 },
-  mass: { value: 1, min: 0.1, max: 100, step: 0.1 },
-  restitution: { value: 0.5, min: 0, max: 1, step: 0.1 },
-  density: { value: 1, min: 0.1, max: 100, step: 0.1 },
+  mass: { value: 1, min: 0.1, max: 20, step: 0.1 },
+  restitution: { value: 0.5, min: 0, max: 2, step: 0.1 },
+  density: { value: 1, min: 0.1, max: 20, step: 0.1 },
 })
 </script>
 
@@ -37,15 +38,15 @@ const { debug, friction, mass, restitution, density } = useControls({
     <OrbitControls />
 
     <Suspense>
-      <Physics :debug="debug">
+      <Physics :debug>
         <RigidBody
           ref="colliderRef"
           collider="ball"
           :position="[0, 15, 0]"
-          :friction="friction"
-          :mass="mass"
-          :restitution="restitution"
-          :density="density"
+          :friction
+          :mass
+          :restitution
+          :density
         >
           <TresMesh @click="jump">
             <TresSphereGeometry />

apps/playground/src/pages/rapier/CustomColliders.vue

@@ -12,6 +12,7 @@ import {
 } from '@tresjs/rapier'
 import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
+import type { ExposedRigidBody } from '@tresjs/rapier'
 
 const gl = {
   clearColor: '#82DBC5',

packages/rapier/src/components/RigidBody.vue

@@ -125,6 +125,25 @@ makePropsWatcherRB(props, [
   'enabledTranslations',
 ], instance)
 
+// reactively set autoColliderProps
+const setAutoColliderProp = <K extends keyof ColliderProps>(prop: K, value: ColliderProps[K]) => {
+  if (autoColliderProps.value.length === 0 || props.collider === false) { return }
+
+  autoColliderProps.value.forEach((_props) => {
+    _props[prop] = value
+  })
+}
+
+// Automatic collider props watchers
+watch(() => props.friction, value => setAutoColliderProp('friction', value))
+watch(() => props.mass, value => setAutoColliderProp('mass', value))
+watch(() => props.restitution, value => setAutoColliderProp('restitution', value))
+watch(() => props.density, value => setAutoColliderProp('density', value))
+watch(() => props.activeCollision, value => setAutoColliderProp('activeCollision', value))
+watch(() => props.activeCollisionTypes, value => setAutoColliderProp('activeCollisionTypes', value))
+watch(() => props.collisionGroups, value => setAutoColliderProp('collisionGroups', value))
+watch(() => props.sensor, value => setAutoColliderProp('sensor', value))
+
 watch([() => props.lockTranslations, instance], ([_lockTranslations, _]) => {
   if (!instance.value) { return }
   instance.value.lockTranslations(_lockTranslations, true)