feat: rigid body continued (#18)

* Add `<Physics />` and `<RigidBody />` components

* feat: world and rigid boxy

* chore: add prettier for coding harmony

* chore(config): correct `vite` configuration

### Desccription

- Add missing `name` & `description` from package.json
- Format vite config file

* feat: add `trimesh` supporrt

### Description

- Uncomment & implement `trimesh` support
- Add `heightfield` todo comment

Co-Authored-By: Alvaro Saburido <alvaro.saburido@gmail.com>

* chore(config): add bracket & endline prettier support

* refactor: better access to rapier context

### Description

- Correct `world` step usage
  - Correctly update the `timestep`
- Use correct type for `useRapierContext`
- Improve methods documentation

Co-Authored-By: Alvaro Saburido <alvaro.saburido@gmail.com>

* chore(deps): install packages with `pnpm`

* refactor(architecture): better structure separation

### Description

- Move `vue` components at `./src/components/`
- Move all types/interfaces at `./src/types`
  - Add `RigidBodyType` type (containing the supported rigidBodyDesc types)
  - Add `RigidBodyProps` interface
  - Add `InjectableRapierContext` interface
  - Add `PhysicsProps` interface
  - Add `ColliderShape` type
- Move helper/utils at `./src/utils/`
  - Rename `createColliderDesc` to `createColliderDesc`, and return a `ColliderDesc`
  - Rename `createRigidBody` to `createRigidBodyDesc` and return a `RigidBodyDesc`
- Add a `./src/constants/` sub folder

Co-Authored-By: Alvaro Saburido <alvaro.saburido@gmail.com>

* feat: delegate responsibilities to sub-utils

### Description

- Add `createRigiBody` util
  - Add `CreateRigidBodyProps` type
- `createRigidBodyDesc` need an object now
  - Add `CreateRigidBodyDescProps` type
- `createColliderDesc ` need an object now
  - Add `CreateColliderDescProps ` type
- Add `createCollider` util
  - Add `CreateColliderProps` type
- Add `createColliderFromChildren` util
  - Add `CreateColliderFromChildrenProps` type
- Map received children colliders and update their states

* feat: add `hull` collider

### Description

- Add `convexHull` colliderDesc support

* feat: base of instanced `mesh` support

* feat: rigid-body instance Matrix compose support

### Description

- Add `instancedMesh` rigid-body position support
- Add `instancedMesh` rigid-body rotation support
- Make `createRigidBody` export the received `object`
  - Add `CreateRigidBodyReturnType`
- Make `createCollider` export the received `object`
  - Add `CreateColliderReturnType`

* refactor(style): request changes improvements

### description

- Remove redundant suffixes
- Add missing types to callbacks params

Co-Authored-By: Alvaro Saburido <alvaro.saburido@gmail.com>

---------

Co-authored-by: Francesco Michelini <hello@francescomichelini.com>
Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

package.json

@@ -4,6 +4,8 @@
   "version": "0.0.0",
   "private": true,
   "packageManager": "pnpm@9.7.1",
+  "description": "TresJs physics support, powered by rapier",
+  "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
   "keywords": [
     "vue",

playground/src/pages/basics/RigidBodyDemo.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { shallowRef, watch } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { Physics, RigidBody } from '@tresjs/rapier'
-import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
+import { ACESFilmicToneMapping, DynamicDrawUsage, Matrix4, MeshNormalMaterial, SRGBColorSpace, TorusKnotGeometry } from 'three'
+import type { InstancedMesh } from 'three'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -11,42 +13,64 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: ACESFilmicToneMapping,
 }
+
+const torusInstancedMesh = shallowRef<InstancedMesh>()
+
+const torusKnots = new TorusKnotGeometry()
+const torusKnotsMaterial = new MeshNormalMaterial()
+
+watch(torusInstancedMesh, (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
+  }
+})
 </script>
 
 <template>
-  <TresCanvas
-    v-bind="gl"
-    window-size
-  >
-    <TresPerspectiveCamera
-      :position="[11, 11, 11]"
-      :look-at="[0, 0, 0]"
-    />
+  <TresCanvas v-bind="gl" window-size>
+    <TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
     <OrbitControls />
+
     <Suspense>
       <Physics debug>
+        <RigidBody instanced collider="hull">
+          <TresInstancedMesh ref="torusInstancedMesh" :args="[torusKnots, torusKnotsMaterial, 3]" />
+        </RigidBody>
+
         <RigidBody>
-          <TresMesh :position="[0, 4, 0]">
+          <TresMesh :position="[0, 8, 0]">
+            <TresTorusGeometry />
+            <TresMeshNormalMaterial />
+          </TresMesh>
+
+          <TresMesh :position="[0, 5, 0]">
             <TresBoxGeometry />
             <TresMeshNormalMaterial />
           </TresMesh>
         </RigidBody>
-        <RigidBody
-          v-for="ball in [1, 2, 3, 4, 5, 6, 7] "
-          :key="ball"
-          collider="ball"
-        >
+
+        <RigidBody v-for="ball in [1, 2, 3, 4, 5, 6, 7] " :key="ball" collider="ball">
           <TresMesh :position="[Math.random() * 2, Math.random() * 2 + 8, Math.random() * 2]">
             <TresSphereGeometry />
             <TresMeshNormalMaterial />
           </TresMesh>
         </RigidBody>
+
         <RigidBody type="fixed">
-          <TresMesh>
-            <TresPlaneGeometry
-              :args="[20, 20, 20]"
-              :rotate-x="-Math.PI / 2"
-            />
+          <TresMesh :position="[0, 0, 0]">
+            <TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
             <TresMeshBasicMaterial color="#f4f4f4" />
           </TresMesh>
         </RigidBody>