docs(rapier): improve demos with controls & resets

apps/rapier-docs/app/components/demos/AutomaticColliders.vue

@@ -40,13 +40,33 @@ const jumpCapsule = () => {
   capsuleRef.value.instance.applyImpulse({ x: 0, y: 15, z: 0 }, true)
 }
 
-const { debug, friction, mass, restitution, density } = useControls({
+const controlDefaults = {
   debug: true,
-  friction: { value: 0.5, min: 0, max: 1, 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 },
+  friction: 0.5,
+  mass: 1,
+  restitution: 0.5,
+  density: 1,
+}
+
+const controls = useControls({
+  resetBtn: {
+    label: 'Reset',
+    type: 'button',
+    onClick: () => {
+      resetControls(controls, controlDefaults)
+      resetRigidBody(ballRef.value?.instance, { x: 0, y: 15, z: 0 })
+      resetRigidBody(cubeRef.value?.instance, { x: 4, y: 15, z: 0 })
+      resetRigidBody(capsuleRef.value?.instance, { x: -4, y: 15, z: 0 })
+    },
+  },
+  debug: controlDefaults.debug,
+  friction: { value: controlDefaults.friction, min: 0, max: 1, step: 0.1 },
+  mass: { value: controlDefaults.mass, min: 0.1, max: 20, step: 0.1 },
+  restitution: { value: controlDefaults.restitution, min: 0, max: 2, step: 0.1 },
+  density: { value: controlDefaults.density, min: 0.1, max: 20, step: 0.1 },
 }, { uuid })
+
+const { debug, friction, mass, restitution, density } = controls
 </script>
 
 <template>

apps/rapier-docs/app/components/demos/Collisions.vue

@@ -36,14 +36,31 @@ const onCollisionExit = (event: any) => {
   console.log('onCollisionExit ~ event:', event)
 }
 
-const { debug, activeCollision, enableCcd } = useControls(
+const controlDefaults = {
+  debug: true,
+  activeCollision: true,
+  enableCcd: true,
+}
+
+const controls = useControls(
   {
-    debug: true,
-    activeCollision: true,
-    enableCcd: true,
+    resetBtn: {
+      label: 'Reset',
+      type: 'button',
+      onClick: () => {
+        resetControls(controls, controlDefaults)
+        resetRigidBody(torusRef.value?.instance)
+        collisionEvent.value = ''
+      },
+    },
+    debug: controlDefaults.debug,
+    activeCollision: controlDefaults.activeCollision,
+    enableCcd: controlDefaults.enableCcd,
   },
   { uuid },
 )
+
+const { debug, activeCollision, enableCcd } = controls
 </script>
 
 <template>
@@ -62,7 +79,7 @@ const { debug, activeCollision, enableCcd } = useControls(
       <Physics :debug>
         <RigidBody
           ref="torusRef"
-          collider="hull"
+          collider="convexHull"
           :enableCcd
           :activeCollision
           @collision-enter="onCollisionEnter"

apps/rapier-docs/app/components/demos/ContactForce.vue

@@ -24,29 +24,34 @@ const onContactForce = (e: ContactForcePayload) => {
   maxForceMagnitude.value = Math.round(e.totalForceMagnitude)
 }
 
-const drop = () => {
-  if (!sphereRef.value) { return }
-  sphereRef.value.instance.setTranslation({ x: 0, y: 5, z: 0 }, true)
-  sphereRef.value.instance.setLinvel({ x: 0, y: 0, z: 0 }, true)
-}
-
 const uuid = inject(`uuid`)
 
-const { debug, forceThreshold: FORCE_THRESHOLD } = useControls({
+const controlDefaults = {
   debug: false,
+  forceThreshold: 50,
+}
+
+const controls = useControls({
+  resetBtn: {
+    label: 'Reset',
+    type: 'button',
+    onClick: () => {
+      resetControls(controls, controlDefaults)
+      resetRigidBody(sphereRef.value?.instance)
+      maxForceMagnitude.value = 0
+    },
+  },
+  debug: controlDefaults.debug,
   forceThreshold: {
     label: 'Force threshold',
-    value: 50,
+    value: controlDefaults.forceThreshold,
     min: 0,
     max: 100,
     step: 1,
   },
-  dropBall: {
-    label: 'Drop ball',
-    type: 'button',
-    onClick: () => drop(),
-  },
 }, { uuid })
+
+const { debug, forceThreshold: FORCE_THRESHOLD } = controls
 </script>
 
 <template>

apps/rapier-docs/app/components/demos/CustomColliders.vue

@@ -24,13 +24,31 @@ const jump = () => {
   ballRef.value.instance.applyImpulse({ x: 0, y: 15, z: 0 }, true)
 }
 
-const { debug, friction, mass, restitution, density } = useControls({
+const controlDefaults = {
   debug: true,
-  friction: { value: 0.5, min: 0, max: 1, 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 },
+  friction: 0.5,
+  mass: 1,
+  restitution: 0.5,
+  density: 1,
+}
+
+const controls = useControls({
+  resetBtn: {
+    label: 'Reset',
+    type: 'button',
+    onClick: () => {
+      resetControls(controls, controlDefaults)
+      resetRigidBody(ballRef.value?.instance)
+    },
+  },
+  debug: controlDefaults.debug,
+  friction: { value: controlDefaults.friction, min: 0, max: 1, step: 0.1 },
+  mass: { value: controlDefaults.mass, min: 0.1, max: 20, step: 0.1 },
+  restitution: { value: controlDefaults.restitution, min: 0, max: 2, step: 0.1 },
+  density: { value: controlDefaults.density, min: 0.1, max: 20, step: 0.1 },
 }, { uuid })
+
+const { debug, friction, mass, restitution, density } = controls
 </script>
 
 <template>
@@ -50,7 +68,7 @@ const { debug, friction, mass, restitution, density } = useControls({
           :density
         >
           <ConeCollider
-            :args="[1, 1, 1]"
+            :args="[1, 1]"
             :position="[1, 14, 0]"
             :friction
             :mass
@@ -62,7 +80,7 @@ const { debug, friction, mass, restitution, density } = useControls({
             <TresMeshStandardMaterial color="#5672cd" />
           </TresMesh>
           <CylinderCollider
-            :args="[0.5, 0.5, 1]"
+            :args="[0.5, 0.5]"
             :position="[-1, 16, 0]"
             :friction
             :mass

apps/rapier-docs/app/components/demos/Forces.vue

@@ -39,6 +39,11 @@ const windForceCube = () => {
 const uuid = inject(`uuid`)
 
 useControls({
+  resetBtn: {
+    label: 'Reset',
+    type: 'button',
+    onClick: () => resetRigidBody(rigidCubeRef.value?.instance),
+  },
   up: {
     label: 'Impulse up',
     type: 'button',

apps/rapier-docs/app/components/demos/InstanceRigidBodies.vue

@@ -6,34 +6,60 @@ import { useControls } from '@tresjs/leches'
 import LittleBoxForDemos from './LittleBoxForDemos.vue'
 import { DynamicDrawUsage, Matrix4, MeshStandardMaterial, SphereGeometry } from 'three'
 
-const { debug } = useControls(
-  {
-    debug: false,
-  },
-  { uuid: inject(`uuid`) },
-)
-
 const instanceRef = shallowRef()
+const instancedRigidBodyRef = shallowRef()
 const sphereKnots = new SphereGeometry(0.25, 32, 32)
 const sphereKnotsMaterial = new MeshStandardMaterial({
   color: '#5672cd',
 })
 
+const scatterInstances = (mesh: any) => {
+  for (let i = 0; i < mesh.count; i++) {
+    const x = (Math.random() - 0.5) * 5
+    const y = (Math.random() * 2) + 5
+    const z = (Math.random() - 0.5) * 5
+
+    mesh.setMatrixAt(i, new Matrix4().makeTranslation(x, y, z))
+  }
+  mesh.instanceMatrix.needsUpdate = true
+}
+
+const controlDefaults = {
+  debug: false,
+}
+
+const controls = useControls(
+  {
+    resetBtn: {
+      label: 'Reset',
+      type: 'button',
+      onClick: () => {
+        resetControls(controls, controlDefaults)
+
+        const contexts = instancedRigidBodyRef.value?.contexts
+        if (!contexts?.length) { return }
+
+        for (const context of contexts) {
+          resetRigidBody(context.rigidBody, {
+            x: (Math.random() - 0.5) * 5,
+            y: (Math.random() * 2) + 5,
+            z: (Math.random() - 0.5) * 5,
+          })
+        }
+      },
+    },
+    debug: controlDefaults.debug,
+  },
+  { uuid: inject(`uuid`) },
+)
+
+const { debug } = controls
+
 watch(instanceRef, (mesh) => {
   mesh?.instanceMatrix.setUsage(DynamicDrawUsage)
 
   if (mesh) {
-    for (let i = 0; i < mesh.count; i++) {
-      const x = (Math.random() - 0.5) * 5
-      const y = ((Math.random()) * 2) + 5
-      const z = (Math.random() - 0.5) * 5
-
-      mesh.setMatrixAt(
-        i,
-        new Matrix4().makeTranslation(x, y, z),
-      )
-    }
-    mesh.instanceMatrix.needsUpdate = true
+    scatterInstances(mesh)
   }
 })
 </script>
@@ -45,7 +71,7 @@ watch(instanceRef, (mesh) => {
 
     <Suspense>
       <Physics :debug="debug">
-        <InstancedRigidBody collider="ball" :args="[0.25]" :restitution="0.5">
+        <InstancedRigidBody ref="instancedRigidBodyRef" collider="ball" :args="[0.25]" :restitution="0.5">
           <TresInstancedMesh ref="instanceRef" :args="[sphereKnots, sphereKnotsMaterial, 750]" />
         </InstancedRigidBody>
         <LittleBoxForDemos />

apps/rapier-docs/app/components/demos/Joints.vue

@@ -22,9 +22,24 @@ const gl = {
 const bodyRefA: ShallowRef<ExposedRigidBody | null> = shallowRef(null)
 const bodyRefB: ShallowRef<ExposedRigidBody | null> = shallowRef(null)
 
-const { debug } = useControls({
+const controlDefaults = {
   debug: true,
+}
+
+const controls = useControls({
+  resetBtn: {
+    label: 'Reset',
+    type: 'button',
+    onClick: () => {
+      resetControls(controls, controlDefaults)
+      resetRigidBody(bodyRefA.value?.instance)
+      resetRigidBody(bodyRefB.value?.instance, { x: -2.2, y: 0, z: 0 })
+    },
+  },
+  debug: controlDefaults.debug,
 }, { uuid: inject(`uuid`) })
+
+const { debug } = controls
 </script>
 
 <template>

apps/rapier-docs/app/components/demos/Physic.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { useControls } from '@tresjs/leches'
-import { Physics, RigidBody } from '@tresjs/rapier'
+import { DEFAULT_GRAVITY, DEFAULT_TIMESTEP, Physics, RigidBody } from '@tresjs/rapier'
 import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
 
 const gl = {
@@ -13,21 +13,59 @@ const gl = {
 }
 
 const uuid = inject(`uuid`)
+const ballRef = shallowRef()
 
-const { gravityY, gravityX, gravityZ, debug } = useControls({
-  gravityY: { value: -9.8, min: -20, max: 20, step: 0.1 },
-  gravityX: { value: 0, min: -20, max: 20, step: 0.1 },
-  gravityZ: { value: 0, min: -20, max: 20, step: 0.1 },
+const controlDefaults = {
+  gravityX: DEFAULT_GRAVITY.x,
+  gravityY: DEFAULT_GRAVITY.y,
+  gravityZ: DEFAULT_GRAVITY.z,
+  timeStep: DEFAULT_TIMESTEP as number | 'vary',
+  timeScale: 1,
+  pause: false,
   debug: true,
+}
+
+const controls = useControls({
+  resetBtn: {
+    label: 'Reset',
+    type: 'button',
+    onClick: () => {
+      resetControls(controls, controlDefaults)
+      resetRigidBody(ballRef.value?.instance)
+    },
+  },
+  gravityX: { value: controlDefaults.gravityX, min: -20, max: 20, step: 0.1 },
+  gravityY: { value: controlDefaults.gravityY, min: -20, max: 20, step: 0.1 },
+  gravityZ: { value: controlDefaults.gravityZ, min: -20, max: 20, step: 0.1 },
+  timeStep: {
+    value: controlDefaults.timeStep,
+    options: [
+      { text: '1/30', value: 1 / 30 },
+      { text: '1/60', value: 1 / 60 },
+      { text: '1/120', value: 1 / 120 },
+      { text: 'vary', value: 'vary' },
+    ],
+  },
+  timeScale: { value: controlDefaults.timeScale, min: 0, max: 4, step: 0.1 },
+  pause: controlDefaults.pause,
+  debug: controlDefaults.debug,
 }, { uuid })
+
+const { gravityY, gravityX, gravityZ, debug, pause, timeStep, timeScale } = controls
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 0, 35]" :look-at="[0, 0, 0]" />
     <Suspense>
-      <Physics :debug :gravity="[gravityX, gravityY, gravityZ]">
-        <RigidBody collider="ball" :position="[0, 0, 0]">
+      <Physics
+        :debug
+        :pause
+        :time-step="timeStep"
+        :time-scale="timeScale"
+        :gravity="[gravityX, gravityY, gravityZ]"
+      >
+        <RigidBody ref="ballRef" collider="ball" :position="[0, 0, 0]">
           <TresMesh :position="[0, 0, 0]">
             <TresSphereGeometry />
             <TresMeshStandardMaterial color="#5672cd" />