feat: ragdoll demo

[mattvb91]

Summary

First draft for ragdoll demo #159

It would be nice to also include

• button to spawn more ragdolls
• Mesh that syncs with it like the rapierjs ragdoll demo

[Neosoulink]

Posted by @mattvb91

@Neosoulink do you have any idea why the rigid bodies dont fall over like in the native implementation?

I found in the readme:

We can specify what kind of 'RigidBody' type. 'Dynamic' is the default. but this doesn't seem to be the case as it still needs to be activated? Or maybe the joints need another attribute?

[Neosoulink]

Hey @mattvb91, the default RigidBody type is dynamic

rapier/src/components/RigidBody.vue

Lines 26 to 27 in 7a11432

	const props = withDefaults(defineProps<Partial<RigidBodyProps>>(), {
	type: 'dynamic',

Do you have any record or piece of code you can share here?

[mattvb91]

Thanks @Neosoulink so currently this is what I have with the code in this PR

Screen.Recording.2025-05-06.at.16.44.25.mov

However the joints seem locked in place and im not seeing what im missing? Any ideas from this PR versus here? https://github.com/mattvb91/rapierjs-ragdoll/blob/main/src/Ragdoll.ts

Because I can apply an impulse the rigid bodies are definitely active but to me it seems the joints are locked?

[Neosoulink]

I'm checking on my side

[Neosoulink]

So I've been playing with your integration for a bit, can't really figure out, I'll definitely need to dig more.

If you have a chance, can you take a look at its implementation here:
https://github.com/Tresjs/rapier/blob/feat/joint-enhancement/src/components/joints/BaseJoint.vue

[mattvb91]

Screen.Recording.2025-05-12.at.15.59.09.mov

This is the current state of it. Ive added the TresLeches for now with only gravity. There seems to be a bug when adding a button. (wanted to add ragdoll). Will look into it when i get more time.

Is there any changes that need to happen to merge this in the current state? I think I will look at the extras then in a seperate PR if thats ok?

[Neosoulink]

I think we are good here.

What do you think @alvarosabu ?

[Neosoulink]

Hey @mattvb91, don't forget to update your branch (with a rebase or merge-commit)

[Neosoulink]

Hey @alvarosabu,
This PR also comes with the fix for auto-colliders.

I think we're good to go with this PR.

Here's the full context: mattvb91#1

[Neosoulink]

LGTM 🔥

[Copilot]

Pull Request Overview

This PR introduces a ragdoll physics demo featuring a humanoid figure composed of rigid body segments connected by spherical joints. The implementation includes interactive functionality where clicking applies an impulse to the head.

Key changes:

• Core physics system improvements for better collider and rigid body handling
• New ragdoll component with anatomically-structured joints and colliders
• Demo page showcasing the ragdoll physics with interactive controls

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/components/colliders/BaseCollider.vue	Enhanced collider logic with better object reference handling and reorganized prop watchers
src/components/RigidBody.vue	Improved rigid body instantiation with VNode filtering and reorganized prop watchers
playground/src/router/routes/basics.ts	Added route for the new ragdoll demo
playground/src/pages/basics/Ragdoll.vue	Demo page with physics canvas, controls, and ragdoll component
playground/src/components/Ragdoll.vue	Complete ragdoll implementation with humanoid structure and joint connections

Comments suppressed due to low confidence (1)

src/components/colliders/BaseCollider.vue:12

• Removing the default args property without providing an alternative default could cause colliders to fail when no args are specified, as many collider shapes require dimension arguments.

  friction: 0.5,

[Copilot]

Variable name contains a spelling error: 'legthickness' should be 'legThickness' to follow consistent camelCase naming.

Suggested change

	const legthickness = 0.16
	const legThickness = 0.16

[Copilot]

Variable reference contains a spelling error: 'legthickness' should be 'legThickness' to match the corrected variable name.

Suggested change

	const localAnchorRTorsoBottom = [+(torsoWidth / 2) - legthickness / 2, -torsoHeight / 2 - stiffness, 0]
	const localAnchorLTorsoBottom = [-(torsoWidth / 2) + legThickness / 2, -torsoHeight / 2 - stiffness, 0]
	const localAnchorLLegUpper = [0, legSegmentHeight / 2, 0]
	const localAnchorLLegUpperLower = [0, -legSegmentHeight / 2 - stiffness, 0]
	const localAnchorLLegLowerTop = [0, legSegmentHeight / 2, 0]
	const localAnchorRTorsoBottom = [+(torsoWidth / 2) - legThickness / 2, -torsoHeight / 2 - stiffness, 0]

[Copilot]

Variable reference contains a spelling error: 'legthickness' should be 'legThickness' to match the corrected variable name.

Suggested change

	const localAnchorRTorsoBottom = [+(torsoWidth / 2) - legthickness / 2, -torsoHeight / 2 - stiffness, 0]
	const localAnchorLTorsoBottom = [-(torsoWidth / 2) + legThickness / 2, -torsoHeight / 2 - stiffness, 0]
	const localAnchorLLegUpper = [0, legSegmentHeight / 2, 0]
	const localAnchorLLegUpperLower = [0, -legSegmentHeight / 2 - stiffness, 0]
	const localAnchorLLegLowerTop = [0, legSegmentHeight / 2, 0]
	const localAnchorRTorsoBottom = [+(torsoWidth / 2) - legThickness / 2, -torsoHeight / 2 - stiffness, 0]

[Copilot]

Variable reference contains a spelling error: 'legthickness' should be 'legThickness' to match the corrected variable name.

Suggested change

	<CuboidCollider :args="[legthickness / 2, legSegmentHeight / 2, legthickness / 2]" />
	<CuboidCollider :args="[legThickness / 2, legSegmentHeight / 2, legThickness / 2]" />

[Copilot]

Variable reference contains a spelling error: 'legthickness' should be 'legThickness' to match the corrected variable name.

Suggested change

	<CuboidCollider :args="[legthickness / 2, legSegmentHeight / 2, legthickness / 2]" />
	<CuboidCollider :args="[legThickness / 2, legSegmentHeight / 2, legThickness / 2]" />

[Copilot]

Variable reference contains a spelling error: 'legthickness' should be 'legThickness' to match the corrected variable name.

Suggested change

	<CuboidCollider :args="[legthickness / 2, legSegmentHeight / 2, legthickness / 2]" />
	<CuboidCollider :args="[legThickness / 2, legSegmentHeight / 2, legThickness / 2]" />

[Copilot]

Variable reference contains a spelling error: 'legthickness' should be 'legThickness' to match the corrected variable name.

Suggested change

	<CuboidCollider :args="[legthickness / 2, legSegmentHeight / 2, legthickness / 2]" />
	<CuboidCollider :args="[legThickness / 2, legSegmentHeight / 2, legThickness / 2]" />

[Copilot]

The click event listener is added to the document without being removed on component unmount, which could cause memory leaks. Consider using onUnmounted to clean up the event listener.

Suggested change

	})
	const handleDocumentClick = () => {
	if (!headRef.value) { return }
	headRef.value.instance?.applyImpulse({ x: 0, y: 10, z: 0 }, true)
	}
	onMounted(() => {
	document.addEventListener('click', handleDocumentClick)
	})
	onUnmounted(() => {
	document.removeEventListener('click', handleDocumentClick)