feat(rapier): (WIP) Add <Physics /> and <RigidBody /> components (#5

) * Add `<Physics />` and `<RigidBody />` components * feat: world and rigid boxy * chore: debug component option --------- Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>
Tresjs · Jun 11, 2024 · 0b271cb · 0b271cb
1 parent d71bb32
commit 0b271cb
Show file tree

Hide file tree

Showing 14 changed files with 516 additions and 68 deletions.
diff --git a/playground/package.json b/playground/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tresjs/cientos": "^3.6.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },

diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -4,14 +4,14 @@ import { useRoute } from 'vue-router'
 
 const route = useRoute()
 function setBodyClass(routeName: string) {
-	document.title = `Rapier Playground - ${routeName}`
-	document.body.className = routeName
+  document.title = `Rapier Playground - ${routeName}`
+  document.body.className = routeName
 }
 watch([route], () => setBodyClass(route.name?.toString() ?? ''))
 </script>
 
 <template>
-	<Suspense>
-		<router-view />
-	</Suspense>
+  <Suspense>
+    <router-view />
+  </Suspense>
 </template>
diff --git a/playground/src/pages/basics/BasicsDemo.vue b/playground/src/pages/basics/BasicsDemo.vue
diff --git a/playground/src/pages/basics/RigidBodyDemo.vue b/playground/src/pages/basics/RigidBodyDemo.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { Physics, RigidBody } from '@tresjs/rapier'
+import { SRGBColorSpace, ACESFilmicToneMapping } 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, 4, 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>
+            <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/index.vue b/playground/src/pages/index.vue
@@ -5,55 +5,59 @@ const sections = [{ icon: '📦', title: 'Basics', routes: basicsRoutes }]
 </script>
 
 <template>
-	<div
-		class="container mx-auto max-w-3xl font-sans text-xs color-gray bg-white"
-	>
-		<div class="mx-4">
-			<div
-				class="mt-24 mb-12 text-center align-baseline items-center gap-6 sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse"
-			>
-				<div>
-					<img
-						src="/logo.svg"
-						alt="Rapier logo"
-						class="max-w-36 sm:max-w-xs align-baseline"
-					/>
-				</div>
-				<div class="sm:w-2/3">
-					<h1
-						class="w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3 sm:mx-none sm:w-1/2 sm:max-w-72"
-					>
-						<span class="text-cientos-blue">TresJS/Rapier 🗡️</span>Playground
-					</h1>
-					<p class="text-lg">Testing zone for TresJS/Rapier physics</p>
-				</div>
-			</div>
-			<div
-				class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4"
-			>
-				<div
-					v-for="{ title, routes, icon } in sections"
-					:key="title"
-					class="p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded sm:my-0"
-				>
-					<div
-						class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded"
-					>
-						{{ icon }}
-					</div>
-					<h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
-						{{ title }}
-					</h2>
-					<div v-for="route in routes" :key="route.name" class="link-wrapper">
-						<router-link
-							class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
-							:to="route.path"
-						>
-							<span>{{ route.name }} </span>
-						</router-link>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div
+    class="container mx-auto max-w-3xl font-sans text-xs color-gray bg-white"
+  >
+    <div class="mx-4">
+      <div
+        class="mt-24 mb-12 text-center align-baseline items-center gap-6 sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse"
+      >
+        <div>
+          <img
+            src="/logo.svg"
+            alt="Rapier logo"
+            class="max-w-36 sm:max-w-xs align-baseline"
+          >
+        </div>
+        <div class="sm:w-2/3">
+          <h1 class="text-5xl text-zinc-700 mb-3 sm:mx-none">
+            <span class="text-cientos-blue">TresJS/Rapier 🗡️</span>Playground
+          </h1>
+          <p class="text-lg">
+            Testing zone for TresJS/Rapier physics
+          </p>
+        </div>
+      </div>
+      <div
+        class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4"
+      >
+        <div
+          v-for="{ title, routes, icon } in sections"
+          :key="title"
+          class="p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded sm:my-0"
+        >
+          <div
+            class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded"
+          >
+            {{ icon }}
+          </div>
+          <h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
+            {{ title }}
+          </h2>
+          <div
+            v-for="route in routes"
+            :key="route.name"
+            class="link-wrapper"
+          >
+            <router-link
+              class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
+              :to="route.path"
+            >
+              <span>{{ route.name }} </span>
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/playground/src/router/routes/basics.ts b/playground/src/router/routes/basics.ts
@@ -1,7 +1,7 @@
 export const basicsRoutes = [
   {
-    path: '/basics/basic-setup',
-    name: 'Basic Setup',
-    component: () => import('../../pages/basics/BasicsDemo.vue'),
+    path: '/basics/rigid-body',
+    name: 'Rigid Body',
+    component: () => import('../../pages/basics/RigidBodyDemo.vue'),
   },
 ]