feat: `Joints` implementation by Neosoulink · Pull Request #150 · Tresjs/rapier

Neosoulink · 2024-11-20T00:16:21Z

Summary

This PR introduces the Joints feature.

Joints are one of the advanced features natively available in Rapier.
This PR provides an easy, basic but robust way to deal with it.

Logs

Support for Joint types:
- "fixed" | "spring" | "rope" | "generic" | "spherical" | "prismatic" | "revolute"
New components based on the supported joint types (FixedJoint, SphericalJoint, ...)

How to use

Here's a basic implementation example:

<RigidBody
  v-for="(ref, i) in bodyRefs"
  :key="i"
  :ref="ref"
  :type="i === 0 ? 'kinematic' : 'dynamic'"
  :position="[i * 1.5, 0, 0]"
   collider="ball"
 >
  <TresMesh>
    <TresSphereGeometry />
    <TresMeshNormalMaterial />
  </TresMesh>
</RigidBody>

<SphericalJoint
  v-for="(ref, i) in bodyRefs"
  :key="i"
  :bodies="[ref.value?.[0]?.instance, bodyRefs[i - 1]?.value?.[0]?.instance]"
  :params="[
    [-1.1, 0, 0],
    [1.1, 0, 0],
  ]"
/>

Preview

Screen.Recording.2024-11-20.at.2.10.27.AM.mov

Will close #108

Neosoulink · 2024-12-09T14:08:53Z

Hi @alvarosabu, I just added a base documentation for Joint.
I'd appreciate having your review of it (the Joint implementation in general).

cc: @JaimeTorrealba

- Init joint component - Add `JointProps` interface - Add Joint Demo

Neosoulink · 2025-01-07T17:56:03Z

Any update on this one?

This PR is waiting for review

JaimeTorrealba

I like the implementation, But also I would add a composable WDYT? With the same logic

an useJoint() or similar so the people is not force to use it with Tres.js components only

JaimeTorrealba · 2025-01-11T19:06:48Z

+
+Joints is an extension feature provided in [Rapier#Joint](https://rapier.rs/docs/user_guides/javascript/joints/). It lets us connect two or more bodies, restricting their movements according to each other.
+
+In **Tres** we can achieve such motion restriction by using one of the available components designed to handle joints:


Small one but maybe we need consistency here it all pages should be "Tres.js"

JaimeTorrealba · 2025-01-11T19:08:42Z

+
+<template>
+  <RigidBody
+    v-for="(ref, i) in bodyRefs"


I got a problem, the mental load of this example is high. I would instead, in this page, come with a very basic example, just two rigid Bodies joined (just that). The idea here is that they learn how to use it.

This example reflects the one in the playground (the JointsDemo example)...
Is it okay to simplify this one in this documentation but keep the demo as it is?

JaimeTorrealba · 2025-01-11T19:09:38Z

+  Array.from({ length: 10 }).map(() => shallowRef<ExposedRigidBody>(null)),
+)
+
+setInterval(() => {


Why setInterval?

And if you decided to use setInterval, please remember to clear the interval in the onUnmouted

Oh yeah, you're right,

setInterval was used to update the rotation of the first and have that whip effect

JaimeTorrealba · 2025-01-11T19:13:00Z

+  }
+
+  if (hasParamsError) {
+    throw new Error(`Invalid "${type}" joint parameters`)


Maybe too difficult, but could be said what parameters have problems?

Sure, maybe a string containing the requirement or why it the error occurs

Neosoulink · 2025-01-11T21:17:12Z

I like the implementation, But also I would add a composable WDYT? With the same logic

an useJoint() or similar so the people is not force to use it with Tres.js components only

I think it possible even to have both features

JaimeTorrealba · 2025-01-11T21:32:07Z

I like the implementation, But also I would add a composable WDYT? With the same logic
an useJoint() or similar so the people is not force to use it with Tres.js components only

I think it possible even to have both features

Completely, maybe another PR to be more organized.

### Description - Make the Joint component listen to updates - Provide more precise `Joint` error messages - Simplify the Joint example and the Joint documentation - Remove `cSpell.words` VsCode setting

Neosoulink · 2025-01-13T19:03:40Z

Completely, maybe another PR to be more organized.

I pushed the changes requested, and yes, this will be part of a separate PR ✅

Here what has changed:

c1a6ffd1769b6a872c48a42bcd54bf02333658e1
- Make the Joint component listen to updates
- Provide more precise Joint error messages
- Simplify the Joint example and the Joint documentation
- Remove cSpell.words VsCode setting

alvarosabu · 2025-01-20T15:10:00Z


 ```vue
-<script setup lang="ts">
+<script setup>


Hi @Neosoulink examples should be in Typescript as much as possible:

alvarosabu · 2025-01-20T15:18:11Z

@Neosoulink you need to add the entry on docs/.vitepress/config so it's available on the side navigation

alvarosabu · 2025-01-20T15:20:18Z


 > Preview
-<img width="843" alt="Screenshot 2024-12-09 at 4 01 58PM" src="https://github.com/user-attachments/assets/9baaea58-f996-45d5-b4f4-34dae30d44cb">
+<img width="1141" alt="JointsDemo" src="https://github.com/user-attachments/assets/d3cacac3-8764-4906-886a-d0b7a764b7c0" />


@Neosoulink Why not using the normal markdown image notation for this?

![JointsDemo](https://github.com/user-attachments/assets/d3cacac3-8764-4906-886a-d0b7a764b7c0)

It was automatically added from github, but let make it clean. I'm going to update it

alvarosabu · 2025-01-20T15:21:04Z

 ### Explanation

-In the above example, we created a list of 10 `RigidBody` references and mapped them using the `v-for` directive. Then, we implemented the `SphericalJoint` component, creating a Joint between each mapped `RigidBody`.
+In the above example, we created 2 `RigidBody` references, then, we implemented the `SphericalJoint` component, by placing our 2 `RigidBody` references in the `:bodies` property and specifying parameters, we created a `spherical-joint` between them.


we created two RigidBody references

alvarosabu · 2025-01-20T15:30:04Z

Hi @Neosoulink if I understand correctly the scope of this file is to generate several components using BaseJoint.vue as a base, but why? Why not just directly create the SFC components per kind of joint? They are only 7

This is an unusual pattern for vue that we don't use anywhere else in the ecosystem, I will strongly suggest we just separate this into different Joint components.

You could even just have one Join component and pass a prop defining the type and having <component :is="AnyJointComponent" /> under the hood.

Let me know if I can support you with this one.

This approach prioritizes re-usability based on the same component.
In other words, it's just a shortcut for the Joints

It's exactly the same as doing:

<Joint type="joint-type" />

What makes it efficient (in my point of view) is that there is only one source of truth, one part dealing with the main feature and other parts extending from it.
Plus, the child components can have props type precisions and be aware of what the parent needs for the props

I often used to implement a few years ago, back in 2019 (old goods days 🥲)
It's a pattern I discovered while learning how Vue was working under the hood

Hey!
While updating it, I realized I did the same for the Colliders, Why not make the change on a separate PR, to update the pattern? (for Joints & Colliders)

Neosoulink requested a review from JaimeTorrealba November 20, 2024 00:16

Neosoulink self-assigned this Nov 20, 2024

Neosoulink requested a review from alvarosabu as a code owner November 20, 2024 00:16

Neosoulink marked this pull request as draft November 20, 2024 00:19

Neosoulink marked this pull request as ready for review December 9, 2024 14:05

Neosoulink added enhancement New feature or request feature p3-significant High-priority enhancement (priority) labels Dec 10, 2024

Neosoulink added 7 commits December 12, 2024 19:11

feat(core): base joint integration

2137ae8

- Init joint component - Add `JointProps` interface - Add Joint Demo

feat(core): add rope & spherical joint types

37096db

feat(core): add common object types

cebe338

feat(playground): implement spherical joint demo

d5e58d6

feat(core): implement all the supported Joints

93965e1

style(core): use spaces

c531dfa

docs: add Joint base documentation

8c4afea

Neosoulink force-pushed the feat/joints branch from 683f466 to 8c4afea Compare December 12, 2024 17:11

chore(setting): minor correct

5b89fee

JaimeTorrealba requested changes Jan 11, 2025

View reviewed changes

JaimeTorrealba reviewed Jan 11, 2025

View reviewed changes

refactor: apply @JaimeTorrealba request changes

c1a6ffd

### Description - Make the Joint component listen to updates - Provide more precise `Joint` error messages - Simplify the Joint example and the Joint documentation - Remove `cSpell.words` VsCode setting

Neosoulink requested a review from JaimeTorrealba January 13, 2025 18:59

JaimeTorrealba approved these changes Jan 13, 2025

View reviewed changes

Merge branch 'main' into feat/joints

778d943

alvarosabu requested changes Jan 20, 2025

View reviewed changes

Neosoulink mentioned this pull request Jan 30, 2025

refactor(core): use SFC for components #158

Merged

Neosoulink and others added 2 commits January 30, 2025 19:39

refactor(docs): apply changes request from #150

49ff2a4

Merge branch 'main' into feat/joints

fdd184c

alvarosabu self-requested a review March 18, 2025 09:47

alvarosabu approved these changes Mar 18, 2025

View reviewed changes

alvarosabu merged commit 7a11432 into main Mar 18, 2025
2 checks passed

Neosoulink deleted the feat/joints branch May 20, 2025 09:50


		Joints is an extension feature provided in [Rapier#Joint](https://rapier.rs/docs/user_guides/javascript/joints/). It lets us connect two or more bodies, restricting their movements according to each other.

		In Tres we can achieve such motion restriction by using one of the available components designed to handle joints:

Uh oh!

Conversation

Neosoulink commented Nov 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Logs

How to use

Uh oh!

Neosoulink commented Dec 9, 2024

Uh oh!

Neosoulink commented Jan 7, 2025

Uh oh!

JaimeTorrealba left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Neosoulink commented Jan 11, 2025

Uh oh!

JaimeTorrealba commented Jan 11, 2025

Uh oh!

Neosoulink commented Jan 13, 2025

Here what has changed:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alvarosabu Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Neosoulink Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Neosoulink commented Nov 20, 2024 •

edited

Loading

alvarosabu Jan 20, 2025 •

edited

Loading

Neosoulink Jan 20, 2025 •

edited

Loading