Skip to content

Commit 07f1745

Browse files
NeosoulinkJaimeTorrealba
Neosoulink
and
JaimeTorrealba
authored
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]>
1 parent 2f95276 commit 07f1745

File tree

25 files changed

+6180
-4726
lines changed

25 files changed

+6180
-4726
lines changed

‎playground/src/pages/basics/ApplyingForcesDemo.vue‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,25 @@ const gl = {
1313
toneMapping: ACESFilmicToneMapping,
1414
}
1515
16-
const rigidCubeRef = shallowRef(null)
17-
const rigidSphereRef = shallowRef(null)
16+
const rigidCubeRef = shallowRef<any>(null)
17+
const rigidSphereRef = shallowRef<any>(null)
1818
1919
const jumpCube = () => {
20-
if (rigidCubeRef.value) {
21-
rigidCubeRef.value.rigidBodyInfos.rigidBodyDesc.mass = 5
22-
rigidCubeRef.value.instance.applyImpulse({ x: 0, y: 15, z: 0 }, true)
20+
if (!rigidCubeRef.value) {
21+
return
2322
}
23+
24+
rigidCubeRef.value.rigidBodyDesc.mass = 5
25+
rigidCubeRef.value.instance.applyImpulse({ x: 0, y: 15, z: 0 }, true)
2426
}
27+
2528
const windSphere = () => {
26-
if (rigidSphereRef.value) {
27-
rigidSphereRef.value.rigidBodyInfos.rigidBodyDesc.mass = 5
28-
rigidSphereRef.value.instance.applyImpulse({ x: 5, y: 0, z: 0 }, true)
29+
if (!rigidSphereRef.value) {
30+
return
2931
}
32+
33+
rigidSphereRef.value.rigidBodyDesc.mass = 5
34+
rigidSphereRef.value.instance.applyImpulse({ x: 5, y: 0, z: 0 }, true)
3035
}
3136
</script>
3237

‎playground/src/pages/basics/Colliders.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script setup lang="ts">
2+
import { OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { BallCollider, CapsuleCollider, ConeCollider, CuboidCollider, CylinderCollider, Physics, RigidBody } from '@tresjs/rapier'
5+
import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
6+
7+
const gl = {
8+
clearColor: '#82DBC5',
9+
shadows: true,
10+
alpha: false,
11+
outputColorSpace: SRGBColorSpace,
12+
toneMapping: ACESFilmicToneMapping,
13+
}
14+
</script>
15+
16+
<template>
17+
<TresCanvas v-bind="gl" window-size>
18+
<TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
19+
<OrbitControls />
20+
21+
<Suspense>
22+
<Physics debug>
23+
<RigidBody>
24+
<BallCollider :args="[1, 1, 1]" :position="[2, 10, 0]" />
25+
<CapsuleCollider :args="[1, 1, 1]" :position="[-2, 10, 0]" />
26+
<ConeCollider :args="[1, 1, 1]" :position="[0, 10, 2]" />
27+
<CuboidCollider :args="[1, 1, 1]" :position="[0, 10, -2]" />
28+
<CylinderCollider :args="[1, 1, 1]" :position="[2, 10, 2]" />
29+
</RigidBody>
30+
31+
<RigidBody collider="cuboid">
32+
<BallCollider :args="[1, 1, 1]" :position="[0, 15, 0]" />
33+
34+
<TresMesh :position="[0, 15, 0]">
35+
<TresTorusGeometry />
36+
<TresMeshNormalMaterial />
37+
</TresMesh>
38+
</RigidBody>
39+
40+
<RigidBody type="fixed">
41+
<TresMesh :position="[0, 0, 0]">
42+
<TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
43+
<TresMeshBasicMaterial color="#f4f4f4" />
44+
</TresMesh>
45+
</RigidBody>
46+
</Physics>
47+
</Suspense>
48+
</TresCanvas>
49+
</template>

‎playground/src/pages/basics/GravityDemo.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@ const { gravityY } = useControls({
3939
</TresMesh>
4040
</RigidBody>
4141

42-
<RigidBody v-for="ball in [1, 2, 3, 4, 5, 6, 7] " :key="ball" collider="ball">
43-
<TresMesh :position="[Math.random() * 2, Math.random() * 2 + 8, Math.random() * 2]">
42+
<RigidBody v-for="i in Array.from(Array(10).keys()) " :key="i" collider="ball">
43+
<TresMesh :position="[Math.random() * (i / 2), Math.random() + 8, Math.random() * (i / 2)]">
4444
<TresSphereGeometry />
4545
<TresMeshNormalMaterial />
4646
</TresMesh>
4747
</RigidBody>
4848

4949
<RigidBody type="fixed">
50-
<TresMesh :position="[0, 0, 0]">
50+
<TresMesh>
5151
<TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
5252
<TresMeshBasicMaterial color="#f4f4f4" />
5353
</TresMesh>

‎playground/src/pages/basics/RigidBodyDemo.vue‎ renamed to ‎playground/src/pages/basics/InstancedRigidBody.vue‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { OrbitControls } from '@tresjs/cientos'
33
import { TresCanvas } from '@tresjs/core'
4-
import { InstanceRigidBody, Physics, RigidBody } from '@tresjs/rapier'
4+
import { InstancedRigidBody, Physics, RigidBody } from '@tresjs/rapier'
55
import { ACESFilmicToneMapping, DynamicDrawUsage, Matrix4, MeshNormalMaterial, SRGBColorSpace, TorusKnotGeometry } from 'three'
66
import { shallowRef, watch } from 'vue'
77
import type { InstancedMesh } from 'three'
@@ -52,28 +52,9 @@ watch(torusInstancedMesh, (mesh) => {
5252

5353
<Suspense>
5454
<Physics debug>
55-
<InstanceRigidBody ref="instanceRBRef" collider="hull">
55+
<InstancedRigidBody collider="hull">
5656
<TresInstancedMesh ref="torusInstancedMesh" :args="[torusKnots, torusKnotsMaterial, 3]" />
57-
</InstanceRigidBody>
58-
59-
<RigidBody>
60-
<TresMesh :position="[0, 8, 0]">
61-
<TresTorusGeometry />
62-
<TresMeshNormalMaterial />
63-
</TresMesh>
64-
65-
<TresMesh :position="[0, 5, 0]">
66-
<TresBoxGeometry />
67-
<TresMeshNormalMaterial />
68-
</TresMesh>
69-
</RigidBody>
70-
71-
<RigidBody v-for="ball in [1, 2, 3, 4, 5, 6, 7] " :key="ball" collider="ball">
72-
<TresMesh :position="[Math.random() * 2, Math.random() * 2 + 8, Math.random() * 2]">
73-
<TresSphereGeometry />
74-
<TresMeshNormalMaterial />
75-
</TresMesh>
76-
</RigidBody>
57+
</InstancedRigidBody>
7758

7859
<RigidBody type="fixed">
7960
<TresMesh :position="[0, 0, 0]">

‎playground/src/pages/basics/RigidBody.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script setup lang="ts">
2+
import { OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { Physics, RigidBody } from '@tresjs/rapier'
5+
import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
6+
7+
const gl = {
8+
clearColor: '#82DBC5',
9+
shadows: true,
10+
alpha: false,
11+
outputColorSpace: SRGBColorSpace,
12+
toneMapping: ACESFilmicToneMapping,
13+
}
14+
</script>
15+
16+
<template>
17+
<TresCanvas v-bind="gl" window-size>
18+
<TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
19+
<OrbitControls />
20+
21+
<Suspense>
22+
<Physics debug>
23+
<RigidBody>
24+
<TresMesh :position="[0, 8, 0]">
25+
<TresTorusGeometry />
26+
<TresMeshNormalMaterial />
27+
</TresMesh>
28+
</RigidBody>
29+
30+
<RigidBody type="fixed">
31+
<TresMesh :position="[0, 0, 0]">
32+
<TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
33+
<TresMeshBasicMaterial color="#f4f4f4" />
34+
</TresMesh>
35+
</RigidBody>
36+
</Physics>
37+
</Suspense>
38+
</TresCanvas>
39+
</template>

‎playground/src/router/routes/basics.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,17 @@ export const basicsRoutes = [
22
{
33
path: '/basics/rigid-body',
44
name: 'Rigid Body',
5-
component: () => import('../../pages/basics/RigidBodyDemo.vue'),
5+
component: () => import('../../pages/basics/RigidBody.vue'),
6+
},
7+
{
8+
path: '/basics/colliders',
9+
name: 'Colliders',
10+
component: () => import('../../pages/basics/Colliders.vue'),
11+
},
12+
{
13+
path: '/basics/instanced-rigid-body',
14+
name: 'Instanced Rigid Body',
15+
component: () => import('../../pages/basics/InstancedRigidBody.vue'),
616
},
717
{
818
path: '/basics/applying-forces',

0 commit comments

Comments
 (0)