docs: 132 improve docs (#140)

* feat(app): 105 First stage of Collision event

* docs: add collision docs

* docs(app): 132 Add proper documentation to the library

* docs(app): 132 Proper docs for all the library

Author: JaimeTorrealba

docs/.vitepress/config.ts

@@ -65,12 +65,13 @@ export default defineConfig({
         items: [
           { text: 'Physics', link: '/components/physics' },
           { text: 'RigidBody', link: '/components/rigid-body' },
-          { text: 'Collider', link: '/components/collider' },
+          { text: 'Custom Collider', link: '/components/custom-collider' },
         ],
       },
       {
         text: 'Composables',
         items: [
+          { text: 'useRapier', link: '/composables/use-rapier' },
         ],
       },
     ],

docs/.vitepress/theme/components/DocsDemo.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      class="relative aspect-video"
+      style=" height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
+    >
+      <Suspense>
+        <slot></slot>
+      </Suspense>
+    </div>
+  </ClientOnly>
+</template>

docs/.vitepress/theme/components/IntroDemo.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { Physics, RigidBody } from '@tresjs/rapier'
+import { shallowRef } from 'vue'
+
+const rigidBallRef = shallowRef(null)
+
+const resetBallPosition = () => {
+  if (rigidBallRef.value) {
+    rigidBallRef.value.instance.applyImpulse({ x: 0, y: 8, z: 0 }, true)
+  }
+}
+</script>
+
+<template>
+  <button class="floating-button" @click="resetBallPosition">Jump</button>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[15, 15, 15]" :look-at="[0, 0, 0]" />
+
+    <Suspense>
+      <Physics>
+        <RigidBody ref="rigidBallRef">
+          <TresMesh :position="[0, 8, 0]">
+            <TresSphereGeometry :args="[1, 16]" />
+            <TresMeshNormalMaterial />
+          </TresMesh>
+        </RigidBody>
+
+        <RigidBody type="fixed">
+          <TresMesh :position="[0, 0, 0]">
+            <TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
+            <TresMeshBasicMaterial color="#f4f4f4" />
+          </TresMesh>
+        </RigidBody>
+      </Physics>
+    </Suspense>
+  </TresCanvas>
+</template>
+
+<style scoped>
+.floating-button {
+  position: relative;
+  top: 0;
+  left: 40%;
+  z-index: 1000;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+</style>

docs/components/collider.md

@@ -0,0 +1,82 @@
+# Custom Colliders
+
+You can add colliders that are not tied to a 3D mesh, this way you can create
+your own collider shape.
+
+```vue
+<template>
+  <RigidBody>
+    <BallCollider />
+  </RigidBody>
+</template>
+```
+
+:::warning
+Custom collider needs to be child of a `Rigid-body` component.
+:::
+
+### Available as component
+
+| Prop          | Description                                                                         |
+| :------------ | :---------------------------------------------------------------------------------- |
+| `<CuboidCollider>`      | Box shape                                                                           |
+| `<BallCollider>`        | Sphere shape                                                                        |
+| `<CapsuleCollider>`     | Capsule shape                                                                       |
+| `<ConeCollider>`        | Cone shape                                                                          |
+| `<CylinderCollider>`    | Cylinder shape                                                                      |
+| `<HullCollider>`        | The smallest convex shape that contains all the given points.                       |
+| `<TrimeshCollider>`     | A set of indices indicating what vertex is used by what triangle.                   |
+| `<HeightfieldCollider>` | Large rectangle in the X-Z plane, subdivided in a grid pattern at regular intervals |
+
+:::warning
+Avoid using `<TrimeshCollider >` with dynamic bodies, since the performance get compromised
+:::
+
+## Collisions
+
+Similar to [how collisions work in rigid-bodies](./rigid-body.md#collisions) you
+can set a custom collider to receive collisions events.
+
+Be aware that the event will be emitted by the `RigidBody` parent
+
+```vue
+<template>
+  <RigidBody
+    @collision-enter="onCollisionEnter"
+    @collision-exit="onCollisionExit"
+  >
+    <BallCollider activeCollision />
+  </RigidBody>
+</template>
+```
+
+## Props
+
+| Prop                     | Description                                                                                                   | Default                        |
+| :----------------------- | :------------------------------------------------------------------------------------------------------------ | ------------------------------ |
+| **shape**                | shape of the collider                                                                                         | `cuboid`                       |
+| **args**                 | The half-sizes of the collider shapes                                                                         | `[1,1,1]`                      |
+| **object**               | Required for certain shapes like `trimesh`, `hull`, `heightfield`.                                            |                                |
+| **friction**             | The friction coefficient of this collider. (automatic-collider)                                               | `0.5`                          |
+| **mass**                 | Mass of the collider. (automatic-collider)                                                                    | `1`                            |
+| **density**              | Restitution controls how elastic (aka. bouncy) a contact is. (automatic-collider)                             | `0`                            |
+| **restitution**          | The collider density. If non-zero the collider's mass and angular inertia will be added. (automatic-collider) | `1`                            |
+| **activeCollision**      | To set the collider receiver/emitter collision events                                                         | `false`                        |
+| **activeCollisionTypes** | Type of the collision event.                                                                                  | `ActiveCollisionTypes.DEFAULT` |
+| **collisionGroups**      | To specify collision groups.                                                                                  | `undefined`                    |
+
+:::info
+You can access the
+[Collider](https://rapier.rs/docs/user_guides/javascript/colliders) instance
+which offers full control over all the properties & methods available by using
+[Template refs](https://vuejs.org/guide/essentials/template-refs.html#template-refs).
+:::
+
+## Expose object
+
+```js
+const exposeObject = {
+  instance,
+  colliderDesc,
+}
+```

docs/components/custom-collider.md

@@ -1 +1,40 @@
 # Physics
+
+The `<Physics />` component act as a provider and it need to wrapper our
+physic scene.
+
+```vue{4,10-14}
+<script setup lang="ts" >
+import { TresCanvas } from '@tresjs/core'
+import { Physics } from '@tresjs/rapier'
+</script>
+
+<template>
+  <TresCanvas window-size>
+    <TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
+
+    <Suspense>
+      <Physics>
+        // your scene with physics goes here
+      </Physics>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+:::warning
+ Note that in order to work the `<Physics />` needs to be wrapped in a
+`<Suspense >` component
+:::
+
+## Props
+
+| Prop      | Description                   | default |
+| :-------- | :---------------------------- | :------ |
+| `gravity` | Sets the gravity of the world | `[0, -9.8, 0]` |
+| `debug`   | Enables debug mode            | `false` |
+| `timestep`   | Sets the new simulation timestep in seconds.          | `1` |
+
+## Expose object
+
+SOON