Add more examples: Hinge Vehicle, Gears, Tear constraint, Friction/ContactMaterial #316

Glavin001 · 2021-12-20T06:23:00Z

Hinge Vehicle	Gears	Tear	Friction
https://use-cannon-git-fork-glavin001-feat-more-examples-pmndrs.vercel.app/#/demo/HingeVehicle	https://use-cannon-git-fork-glavin001-feat-more-examples-pmndrs.vercel.app/#/demo/Gears	https://use-cannon-git-fork-glavin001-feat-more-examples-pmndrs.vercel.app/#/demo/Tear	https://use-cannon-git-fork-glavin001-feat-more-examples-pmndrs.vercel.app/#/demo/Friction

I'm still learning React-Three-Fiber and Cannon-ES and use-cannon. Appreciate any and all feedback!
I can remove/cherry-pick any of the examples you like. I wanted to learn how to achieve these for myself and figured someone else may find these examples useful, too.

Love these projects! Thank you!

See vitejs/vite#677 (comment)

Helpful reading: http://www.mstworkbooks.co.za/technology/gr8/gr8-technology-13.html

Inspired by https://github.com/pmndrs/cannon-es/blob/6f11e268d5e196f7f4f5908dbf60ae6365bd6ab6/examples/tear.html

vercel · 2021-12-20T06:23:06Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pmndrs/use-cannon/14P1DA4BT48iXccqeGjkPzUHyCBV
✅ Preview: https://use-cannon-git-fork-glavin001-feat-more-examples-pmndrs.vercel.app

Glavin001 · 2021-12-20T06:23:50Z

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.208.0/containers/typescript-node/.devcontainer/base.Dockerfile


From #312, you can ignore. I will remove soon.

Glavin001 · 2021-12-20T06:23:54Z

.devcontainer/devcontainer.json

@@ -0,0 +1,37 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:


From #312, you can ignore. I will remove soon.

Glavin001 · 2021-12-20T06:24:00Z

examples/package.json

@@ -40,7 +40,7 @@
    "@types/three": "^0.134.0",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "typescript": "^4.4.4",
-    "vite": "^2.6.14",
+    "vite": "^2.7.2",


From #312, you can ignore. I will remove soon.

Glavin001 · 2021-12-20T06:24:28Z

examples/src/demos/Gears.tsx

+      <ConstraintPart
+        ref={robotRef}
+        // mass={50}
+        // type={'Dynamic'}


@Glavin001 : TODO remove old/commented out code

Glavin001 · 2021-12-20T06:26:29Z

examples/src/demos/RaycastVehicle/index.tsx

-          <Pillar position={[-5, 2.5, -5]} userData={{ id: 'pillar-1' }} />
-          <Pillar position={[0, 2.5, -5]} userData={{ id: 'pillar-2' }} />
-          <Pillar position={[5, 2.5, -5]} userData={{ id: 'pillar-3' }} />
+          <Debug>


@Glavin001 TODO revert enabling debugging of Raycast Vehicle.

Glavin001 · 2021-12-20T06:27:52Z

examples/yarn.lock

@@ -292,7 +292,7 @@
  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==

 "@react-three/cannon@file:..":
-  version "4.1.0"
+  version "4.2.0"


From #312, you can ignore. I will remove soon.

Glavin001 · 2021-12-20T06:29:28Z

src/worker.js

@@ -24,6 +24,7 @@ const state = {
  vehicles: {},
  springs: {},
  springInstances: {},
+  constraints: {},


I named this constraints similar to how the postStep callback was stored in springs: https://github.com/pmndrs/use-cannon/blob/master/src/worker.js#L389-L391

Ideally I think these all can be renamed to more informative / accurate variable names. It works as is though!

Glavin001 · 2021-12-20T06:30:20Z

src/hooks.ts

@@ -139,6 +139,7 @@ export type ConstraintTypes = 'PointToPoint' | 'ConeTwist' | 'Distance' | 'Lock'

 export interface ConstraintOptns {
  maxForce?: number
+  maxMultiplier?: number


Is maxMultiplier a good name for this? The inspiration comes from https://github.com/pmndrs/cannon-es/blob/6f11e268d5e196f7f4f5908dbf60ae6365bd6ab6/examples/tear.html#L63-L66

Glavin001 · 2021-12-20T06:31:51Z

src/worker.js

+        // If this exceeds a limit we disable the constraint.
+        const multiplier = Math.abs(constraint.equations[0].multiplier)
+        if (multiplier > maxMultiplier) {
+          constraint.disable()


I disabled the constraint instead of removing, so it can be renamed.

TODO: Not yet implemented would be an event to tell the main thread the worker has disabled the constraint.

Do you think this is a good idea / worthwhile?

Any preference on the API for implementing this event?

Glavin001 · 2021-12-20T06:33:56Z

examples/src/demos/Tear.tsx

+  pos: [0, 0, 0] as Triplet,
+})
+
+const ChainLink = ({ children, ...props }: PropsWithChildren<{}>) => {


Most of this is copied & modified version of https://github.com/pmndrs/use-cannon/blob/master/examples/src/demos/Chain.tsx#L9-L11

With a bit of work they could reuse the same components, with Chain.tsx not leveraging all of the features to demonstrate tear.

Alternatively, Chain.tsx and Tear.tsx could become 1 example with some interactivity.

Let me know your preference.

…at/more-examples

Inspired by https://github.com/pmndrs/cannon-es/blob/6f11e268d5e196f7f4f5908dbf60ae6365bd6ab6/examples/friction.html

Glavin001 · 2021-12-22T20:20:37Z

examples/src/demos/Friction.tsx

+
+function PhysicsContent() {
+  const groundMaterial = {
+    name: 'ground',


@Glavin001 : TODO need to add name to MaterialOptions type.

bjornstar · 2021-12-23T10:09:54Z

There's a lot going on here, can we focus on one example at a time?

Glavin001 · 2021-12-23T19:10:31Z

Absolutely, that's the plan. Any specific example/feature I should cherry-pick for review first?

I'll start with the Friction example and new feature/change since others are also interested. PR coming soon!

Glavin001 · 2021-12-23T19:20:49Z

Split up the Friction/Contact Material example & related changes into Add friction/Contact Material example #317

Glavin001 · 2021-12-23T19:38:03Z

Tear example / maxMultipler constraint threshold: Add Tear constraint example #318

Glavin001 added 4 commits December 17, 2021 05:48

Add GitHub Codespaces editor support

e0aedd2

See vitejs/vite#677 (comment)

Add hinge vehicle example

825fc78

Add Gears example

b831e7f

Helpful reading: http://www.mstworkbooks.co.za/technology/gr8/gr8-technology-13.html

Add Tear constraint example

b2dab56

Inspired by https://github.com/pmndrs/cannon-es/blob/6f11e268d5e196f7f4f5908dbf60ae6365bd6ab6/examples/tear.html

vercel bot had a problem deploying to Preview December 20, 2021 06:23 Failure

Glavin001 commented Dec 20, 2021

View reviewed changes

Glavin001 marked this pull request as ready for review December 20, 2021 06:37

Merge branch 'master' of https://github.com/pmndrs/use-cannon into fe…

a238560

…at/more-examples

vercel bot deployed to Preview December 20, 2021 06:53 View deployment

Glavin001 changed the title ~~Add more examples~~ Add more examples: Hinge Vehicle, Gears, Tear constraint Dec 20, 2021

Add friction examples

537f4a2

Inspired by https://github.com/pmndrs/cannon-es/blob/6f11e268d5e196f7f4f5908dbf60ae6365bd6ab6/examples/friction.html

vercel bot deployed to Preview December 22, 2021 17:46 View deployment

This was referenced Dec 22, 2021

Enable adding new ContactMaterial to World #64

Closed

feat: add useMaterial and useContactMaterial #297

Closed

Add hooks for creating a Material and ContactMaterial #122

Closed

Glavin001 commented Dec 22, 2021

View reviewed changes

Glavin001 changed the title ~~Add more examples: Hinge Vehicle, Gears, Tear constraint~~ Add more examples: Hinge Vehicle, Gears, Tear constraint, Friction/ContactMaterial Dec 22, 2021

Glavin001 closed this Dec 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add more examples: Hinge Vehicle, Gears, Tear constraint, Friction/ContactMaterial #316

Add more examples: Hinge Vehicle, Gears, Tear constraint, Friction/ContactMaterial #316

Glavin001 commented Dec 20, 2021 •

edited

Loading

vercel bot commented Dec 20, 2021 •

edited

Loading

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 20, 2021

Glavin001 Dec 22, 2021

bjornstar commented Dec 23, 2021

Glavin001 commented Dec 23, 2021

Glavin001 commented Dec 23, 2021

Glavin001 commented Dec 23, 2021

		@@ -0,0 +1,16 @@
		# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.208.0/containers/typescript-node/.devcontainer/base.Dockerfile

		@@ -0,0 +1,37 @@
		// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:

Add more examples: Hinge Vehicle, Gears, Tear constraint, Friction/ContactMaterial #316

Add more examples: Hinge Vehicle, Gears, Tear constraint, Friction/ContactMaterial #316

Conversation

Glavin001 commented Dec 20, 2021 • edited Loading

vercel bot commented Dec 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bjornstar commented Dec 23, 2021

Glavin001 commented Dec 23, 2021

Glavin001 commented Dec 23, 2021

Glavin001 commented Dec 23, 2021

Glavin001 commented Dec 20, 2021 •

edited

Loading

vercel bot commented Dec 20, 2021 •

edited

Loading