feat: rigid body continued

package.json

@@ -4,6 +4,8 @@
   "version": "0.0.0",
   "private": true,
   "packageManager": "[email protected]",
+  "description": "TresJs physics support, powered by rapier",
+  "author": "Alvaro Saburido <[email protected]> (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>