feat: basic colliders support (#120)

* feat: `BaseCollider` integration ### Description - Move out logics from `RigidBody` component - `InstancedMesh` logic in a new `InstancedRigidBody` component - `Collider` logic in a new `BaseCollider` component - Add a `BaseCollider` Component - Export extended collider components (`BallCollider`, `CuboidCollider`, etc) - Add Physics props type - Can pause the physical world from properties - Fix physical word stepping twice - Export most of the resources Co-Authored-By: Jaime A Torrealba C <[email protected]> * feat: add new examples ### Description - Simplified `RigidBody` example - Add an `InstancedMesh` example - Add a `Colliders` example Co-Authored-By: Jaime A Torrealba C <[email protected]> * fix: add missing `gravity` prop * fix(style): lint errors correction * fix(rc): post merge code resolution * refactor(core): extend props for auto values * refactor(core): correct unwanted collider object update ### Description - Configure `RigidBody`s slot to be rendered once - Implement physics unmounted logics Co-Authored-By: Jaime A Torrealba C <[email protected]> * refactor(demo): improve first balls explosion * refactor(docs): improve collider utils `js-docs` --------- Co-authored-by: Jaime A Torrealba C <[email protected]>
Tresjs · Sep 17, 2024 · 07f1745 · 07f1745
1 parent 2f95276
commit 07f1745
Show file tree

Hide file tree

Showing 25 changed files with 6,180 additions and 4,726 deletions.
diff --git a/playground/src/pages/basics/ApplyingForcesDemo.vue b/playground/src/pages/basics/ApplyingForcesDemo.vue
@@ -13,20 +13,25 @@ const gl = {
   toneMapping: ACESFilmicToneMapping,
 }
 
-const rigidCubeRef = shallowRef(null)
-const rigidSphereRef = shallowRef(null)
+const rigidCubeRef = shallowRef<any>(null)
+const rigidSphereRef = shallowRef<any>(null)
 
 const jumpCube = () => {
-  if (rigidCubeRef.value) {
-    rigidCubeRef.value.rigidBodyInfos.rigidBodyDesc.mass = 5
-    rigidCubeRef.value.instance.applyImpulse({ x: 0, y: 15, z: 0 }, true)
+  if (!rigidCubeRef.value) {
+    return
   }
+
+  rigidCubeRef.value.rigidBodyDesc.mass = 5
+  rigidCubeRef.value.instance.applyImpulse({ x: 0, y: 15, z: 0 }, true)
 }
+
 const windSphere = () => {
-  if (rigidSphereRef.value) {
-    rigidSphereRef.value.rigidBodyInfos.rigidBodyDesc.mass = 5
-    rigidSphereRef.value.instance.applyImpulse({ x: 5, y: 0, z: 0 }, true)
+  if (!rigidSphereRef.value) {
+    return
   }
+
+  rigidSphereRef.value.rigidBodyDesc.mass = 5
+  rigidSphereRef.value.instance.applyImpulse({ x: 5, y: 0, z: 0 }, true)
 }
 </script>
 

diff --git a/playground/src/pages/basics/Colliders.vue b/playground/src/pages/basics/Colliders.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BallCollider, CapsuleCollider, ConeCollider, CuboidCollider, CylinderCollider, Physics, RigidBody } from '@tresjs/rapier'
+import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: ACESFilmicToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" window-size>
+    <TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+
+    <Suspense>
+      <Physics debug>
+        <RigidBody>
+          <BallCollider :args="[1, 1, 1]" :position="[2, 10, 0]" />
+          <CapsuleCollider :args="[1, 1, 1]" :position="[-2, 10, 0]" />
+          <ConeCollider :args="[1, 1, 1]" :position="[0, 10, 2]" />
+          <CuboidCollider :args="[1, 1, 1]" :position="[0, 10, -2]" />
+          <CylinderCollider :args="[1, 1, 1]" :position="[2, 10, 2]" />
+        </RigidBody>
+
+        <RigidBody collider="cuboid">
+          <BallCollider :args="[1, 1, 1]" :position="[0, 15, 0]" />
+
+          <TresMesh :position="[0, 15, 0]">
+            <TresTorusGeometry />
+            <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>
diff --git a/playground/src/pages/basics/GravityDemo.vue b/playground/src/pages/basics/GravityDemo.vue
@@ -39,15 +39,15 @@ const { gravityY } = useControls({
           </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]">
+        <RigidBody v-for="i in Array.from(Array(10).keys()) " :key="i" collider="ball">
+          <TresMesh :position="[Math.random() * (i / 2), Math.random() + 8, Math.random() * (i / 2)]">
             <TresSphereGeometry />
             <TresMeshNormalMaterial />
           </TresMesh>
         </RigidBody>
 
         <RigidBody type="fixed">
-          <TresMesh :position="[0, 0, 0]">
+          <TresMesh>
             <TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
             <TresMeshBasicMaterial color="#f4f4f4" />
           </TresMesh>

diff --git a/...ground/src/pages/basics/RigidBodyDemo.vue → ...d/src/pages/basics/InstancedRigidBody.vue b/...ground/src/pages/basics/RigidBodyDemo.vue → ...d/src/pages/basics/InstancedRigidBody.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { InstanceRigidBody, Physics, RigidBody } from '@tresjs/rapier'
+import { InstancedRigidBody, Physics, RigidBody } from '@tresjs/rapier'
 import { ACESFilmicToneMapping, DynamicDrawUsage, Matrix4, MeshNormalMaterial, SRGBColorSpace, TorusKnotGeometry } from 'three'
 import { shallowRef, watch } from 'vue'
 import type { InstancedMesh } from 'three'
@@ -52,28 +52,9 @@ watch(torusInstancedMesh, (mesh) => {
 
     <Suspense>
       <Physics debug>
-        <InstanceRigidBody ref="instanceRBRef" collider="hull">
+        <InstancedRigidBody collider="hull">
           <TresInstancedMesh ref="torusInstancedMesh" :args="[torusKnots, torusKnotsMaterial, 3]" />
-        </InstanceRigidBody>
-
-        <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>
+        </InstancedRigidBody>
 
         <RigidBody type="fixed">
           <TresMesh :position="[0, 0, 0]">

diff --git a/playground/src/pages/basics/RigidBody.vue b/playground/src/pages/basics/RigidBody.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { Physics, RigidBody } from '@tresjs/rapier'
+import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: ACESFilmicToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" window-size>
+    <TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+
+    <Suspense>
+      <Physics debug>
+        <RigidBody>
+          <TresMesh :position="[0, 8, 0]">
+            <TresTorusGeometry />
+            <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>
diff --git a/playground/src/router/routes/basics.ts b/playground/src/router/routes/basics.ts
@@ -2,7 +2,17 @@ export const basicsRoutes = [
   {
     path: '/basics/rigid-body',
     name: 'Rigid Body',
-    component: () => import('../../pages/basics/RigidBodyDemo.vue'),
+    component: () => import('../../pages/basics/RigidBody.vue'),
+  },
+  {
+    path: '/basics/colliders',
+    name: 'Colliders',
+    component: () => import('../../pages/basics/Colliders.vue'),
+  },
+  {
+    path: '/basics/instanced-rigid-body',
+    name: 'Instanced Rigid Body',
+    component: () => import('../../pages/basics/InstancedRigidBody.vue'),
   },
   {
     path: '/basics/applying-forces',