Physics addJointConstraint

[IRobot1]

I'm looking at this cannon physics example. I'm trying to implement this using @angular-three/cannon.

Looking at the source code, there's a method addJointConstraint that requires access to the underlying body...

        jointConstraint = new CANNON.PointToPointConstraint(constrainedBody, pivot, jointBody, new CANNON.Vec3(0, 0, 0))

        // Add the constraint to world
        world.addConstraint(jointConstraint)

I have an mesh with [ngtPhysics] and [getPhysicProps]="getInspectorProps".

However, I haven't been able to figure out how to access the underlying body or the world from @angular-three/cannon components in order to make the equivalent PointToPointConstraint method call or addConstraint method call on the world.

Any help or guidance would be appreciated.

[IRobot1]

I've been migrating the cannon examples to equivalent @angular-three/cannon examples.

Code is here
Demo is here

Many examples are working.
There's a handful that almost work
There's many that won't work yet, due to missing features in @angular-three/cannon. Some missing events, constraints and bones are peventing the remaining examples to be migrated.

[IRobot1]

I found a solution applying PointToPoint constraint. However, its not ideal since I have to duplicate the object both with and without the constraint...

        <ng-container *ngIf="!isDragging">
          <ngt-mesh #fixed="ngtMesh" (ready)="cubeready(fixed.mesh)"
                    ngtPhysicBox [getPhysicProps]="getBoxProps"
                    [castShadow]="true">
            <ngt-box-geometry></ngt-box-geometry>
            <ngt-mesh-standard-material [parameters]="{ color: 'white' | color }"></ngt-mesh-standard-material>
          </ngt-mesh>
        </ng-container>

        <ng-container *ngIf="isDragging" ngtPhysicPointToPointConstraint [options]="options">
          <ngt-mesh #moving="ngtPhysicBox" (ready)="movingready(moving)"
                    ngtPhysicBox [getPhysicProps]="getBoxProps"
                    [castShadow]="true">
            <ngt-box-geometry></ngt-box-geometry>
            <ngt-mesh-standard-material [parameters]="{ color: 'blue' | color }"></ngt-mesh-standard-material>
          </ngt-mesh>
        </ng-container>

Here's the physics properties and constraint options

  getBoxProps: GetByIndex<BoxProps> = () => (
    {
      mass: 1,
      args: [1, 1, 1],
      position: this.position,
      angularFactor: [0, 0, 0] as NgtTriplet, // prevent it spinning while dragging
      velocity: this.velocity,
    }
  )
  get options(): Record<string, any> {
    return {
      pivotA: [0, 0, 0],
      pivotB: [0, 0, 0],
    }
  }

ng3 physics examples here. See mousemove example here. Click the box to pick up and throw around.