feat(app): 111 Add gravity as a props (#114)

* feat(app): 111 Add gravity as a props

* feat: handle gravity as Vector, array and object format + lint issues

* feat: accept VectorCoordinates for gravity

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

Author: JaimeTorrealba

playground/src/pages/basics/GravityDemo.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { Physics, RigidBody } from '@tresjs/rapier'
+import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: ACESFilmicToneMapping,
+}
+
+const { gravityY } = useControls({
+  gravityY: { value: 0, min: -20, max: 20, step: 0.1 },
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas v-bind="gl" window-size>
+    <TresPerspectiveCamera :position="[15, 15, 15]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+
+    <Suspense>
+      <Physics debug :gravity="[0, gravityY, 0]">
+        <RigidBody>
+          <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">
+          <TresMesh :position="[Math.random() * 2, Math.random() * 2 + 8, Math.random() * 2]">
+            <TresSphereGeometry />
+            <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>

playground/src/router/routes/basics.ts

@@ -4,4 +4,9 @@ export const basicsRoutes = [
     name: 'Rigid Body',
     component: () => import('../../pages/basics/RigidBodyDemo.vue'),
   },
+  {
+    path: '/basics/gravity',
+    name: 'Gravity',
+    component: () => import('../../pages/basics/GravityDemo.vue'),
+  },
 ]