@kite3d/engine 0.15.0

package/src/plugins/cannon/Cannon3DShapeComponent.ts

@@ -0,0 +1,258 @@
+import {
+    AHelperWidget,
+    ComponentDefn,
+    ComponentJSON,
+    EntityComponentPlugin, Group,
+    IMaterial,
+    IObject3D,
+    literalStrings,
+    Mesh,
+    Object3DComponent, Object3DWidgetsPlugin,
+    PartialRecord
+} from "threepipe"
+import {getShapeParameters, ShapeParameters, ShapeResult, ShapeType, threeToCannon} from "./threeToCannon"
+import {Box, Quaternion as CQuaternion, Shape, Vec3} from "cannon-es"
+import {Cannon3DBodyComponent} from "./Cannon3DBodyComponent.ts";
+import {CannonDebugger} from "./helper.ts";
+
+export const typeToCannon = {
+    autoBox: ShapeType.BOX,
+    autoCylinder: ShapeType.CYLINDER,
+    autoSphere: ShapeType.SPHERE,
+    autoConvex: ShapeType.HULL,
+    autoTrimesh: ShapeType.MESH,
+    box: ShapeType.BOX,
+    sphere: ShapeType.SPHERE,
+    cylinder: ShapeType.CYLINDER,
+    convex: ShapeType.HULL,
+    trimesh: ShapeType.MESH,
+    // plane: ShapeType.PLANE,
+} as const
+
+export type CannonShapeType = keyof typeof typeToCannon
+
+export const cannonShapeTypes = Object.keys(typeToCannon) as CannonShapeType[]
+
+export const cannonShapeTypeParams: PartialRecord<CannonShapeType, ShapeParameters['params']> = {
+    box: {x: 1, y: 1, z: 1},
+    sphere: {radius: 1},
+    cylinder: {radiusTop: 1, radiusBottom: 1, height: 1, segments: 8},
+    convex: {vertices: new Float32Array([1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 0, 0, -1]), faces: [[0, 1, 2, 3], [4, 0, 3], [4, 3, 2], [4, 2, 1], [4, 1, 0]]},
+    trimesh: {vertices: new Float32Array([1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1]), indices: new Uint32Array([0, 1, 2, 0, 3, 1, 0, 2, 3, 1, 3, 2])},
+    // not for auto
+}
+
+export class Cannon3DShapeComponent extends Object3DComponent {
+    static ComponentType = 'Cannon3DShapeComponent'
+    static StateProperties: ComponentDefn['StateProperties'] = [{
+        key: 'type',
+        type: literalStrings(cannonShapeTypes),
+    }]
+    static EmptyResult: ShapeResult = {shape: new Box(new Vec3(0.025, 0.025, 0.025))}
+
+    result: ShapeResult = Cannon3DShapeComponent.EmptyResult
+    bodyRef: Cannon3DBodyComponent | undefined
+    type: CannonShapeType = 'autoBox'
+    params: ShapeParameters | null = null
+
+    constructor() {
+        super()
+        this.onStateChange('type', () => {
+            // const shapeType = typeToCannon[this.shapeType]
+            const params = cannonShapeTypeParams[this.type]
+            if (params) {
+                const params1 = {}
+                Object.entries(params).forEach(([k, v]) => {
+                    (params1 as any)[k] = (v as Array<any>).slice ? (v as Array<any>).slice() : v
+                })
+                this.params = {
+                    type: typeToCannon[this.type],
+                    params: params1 as any,
+                    offset: new Vec3(),
+                    orientation: new CQuaternion(),
+                }
+            } else {
+                this.params = null
+            }
+            if (!this.object) return
+            this.refreshShape()
+        })
+    }
+
+    // static IsCompatible(_object: IObject3D) { return true }
+
+    init(object: IObject3D, state: ComponentJSON['state']) {
+        super.init(object, state)
+        this.refreshShape(false)
+        const body = EntityComponentPlugin.GetComponentInParent(object, Cannon3DBodyComponent)
+        if (!body) {
+            // console.warn('Cannon3DShapeComponent: No Cannon3DBodyComponent found in parent hierarchy')
+        } else {
+            body.addShape(this)
+        }
+        this.object.addEventListener('objectUpdate', this.objectUpdate)
+        this.object.addEventListener('childadded', this.childadded)
+        this.object.addEventListener('childremoved', this.childremoved)
+        this.ctx.viewer.addEventListener('preFrame', this.preFrame)
+    }
+
+    destroy(): Record<string, any> {
+        if (this.bodyRef) {
+            this.bodyRef.removeShape(this, false)
+            this.bodyRef = undefined
+        }
+        this.object.removeEventListener('objectUpdate', this.objectUpdate)
+        this.ctx.viewer.removeEventListener('preFrame', this.preFrame)
+        this.result = Cannon3DShapeComponent.EmptyResult
+        return super.destroy()
+    }
+
+    refreshShape(refreshBody = true) {
+        // todo auto refresh on geometry or hierarchy changed if set to auto
+        if (!this.object.__cannonShapes) this.object.__cannonShapes = []
+
+        if(this.result){
+            const index = this.object.__cannonShapes.indexOf(this.result)
+            if(index !== -1) this.object.__cannonShapes.splice(index, 1)
+        }
+
+        const shapeType = typeToCannon[this.type]
+        const shapeParameters = this.params ?? (shapeType ? getShapeParameters(this.object, {type: shapeType}) : null)
+
+        // console.log('shapeParameters', shapeParameters)
+        if (shapeParameters) {
+            this.result = threeToCannon(this.object, undefined, shapeParameters)!
+        } else {
+            this.result = Cannon3DShapeComponent.EmptyResult
+        }
+
+        if (!this.object.__cannonShapes.includes(this.result)) this.object.__cannonShapes.push(this.result)
+
+        if (refreshBody && this.bodyRef) this.bodyRef.refreshShapes()
+
+        this.object.setDirty?.()
+        this.ctx.plugin(Object3DWidgetsPlugin)?.refreshObject(this.object)
+    }
+
+    private _needsUpdate = false
+    objectUpdate = (e: any)=>{
+    }
+
+    childadded = (e: any)=>{
+        this._needsUpdate = true
+        e.child.addEventListener('objectUpdate', this.objectUpdate)
+        e.child.addEventListener('childadded', this.childadded)
+        e.child.addEventListener('childremoved', this.childremoved)
+        // console.log('childadded', {...e})
+    }
+    childremoved = (e: any)=>{
+        this._needsUpdate = true
+        e.child.removeEventListener('objectUpdate', this.objectUpdate)
+        e.child.removeEventListener('childadded', this.childadded)
+        e.child.removeEventListener('childremoved', this.childremoved)
+        // console.log('childremoved', {...e})
+    }
+
+    preFrame = ()=>{
+        if(this._needsUpdate){
+            this._needsUpdate = false
+            this.refreshShape()
+        }
+    }
+}
+
+export class Cannon3DShapeHelper extends AHelperWidget {
+    autoUpgradeChildren = false // used elsewhere
+    private _shapes: ShapeResult[] = []
+    private _meshes = new WeakMap<Shape, Mesh>()
+    declare object: IObject3D | undefined
+
+    private _gp = new Group()
+    constructor(object: IObject3D) {
+        super(object, false)
+
+        this.attach(object)
+        this.add(this._gp)
+        this.visible = false
+    }
+
+    update() {
+        super.update()
+
+        this._gp.scale.setFromMatrixScale(this.matrixWorld)
+        this._gp.scale.set(
+            1./this._gp.scale.x,
+            1./this._gp.scale.y,
+            1./this._gp.scale.z
+        )
+
+        const shapes = (this.object?.__cannonShapes || []) as ShapeResult[]
+        const added = shapes.filter(s => !this._shapes.includes(s))
+        const removed = this._shapes.filter(s => !shapes.includes(s))
+        if (!added.length && !removed.length) return
+
+        for (const shape of removed) {
+            const mesh = this._meshes.get(shape.shape)
+            if (mesh) {
+                this._gp.remove(mesh)
+                mesh.geometry.dispose()
+                ;(mesh.material as IMaterial).dispose()
+                this._meshes.delete(shape.shape)
+            }
+        }
+        this._shapes = []
+        for (const shape of shapes) {
+            const current = this._meshes.get(shape.shape)
+            // update
+            const mesh = CannonDebugger.updateMesh(current, shape.shape)
+            if (mesh !== current && mesh) {
+                this._gp.add(mesh)
+                if (current) {
+                    current.removeFromParent()
+                    current.geometry.dispose()
+                    ;(current.material as IMaterial).dispose()
+                }
+                this._meshes.set(shape.shape, mesh)
+            }
+            if(mesh){
+                if(shape.offset){
+                    mesh.position.set(shape.offset.x, shape.offset.y, shape.offset.z)
+                }
+                if(shape.orientation){
+                    mesh.quaternion.set(shape.orientation.x, shape.orientation.y, shape.orientation.z, shape.orientation.w)
+                }
+            }
+            this._shapes.push(shape)
+        }
+
+    }
+
+    dispose() {
+        this._shapes = []
+        this.children.forEach(c => {
+            if (c instanceof Mesh) {
+                c.geometry.dispose()
+                ;(c.material as IMaterial).dispose()
+            }
+        })
+        super.dispose()
+    }
+
+    static Check(obj: IObject3D) {
+        return !!EntityComponentPlugin.GetComponentData(obj, Cannon3DShapeComponent)
+    }
+
+    static Create(obj: IObject3D) {
+        return new Cannon3DShapeHelper(obj as any)
+    }
+}
+
+declare module 'threepipe' {
+    interface IObject3D{
+        /**
+         * Shapes associated with this object
+         * @internal - for cannon js physics
+         */
+        ['__cannonShapes']?: ShapeResult[]
+    }
+}

package/src/plugins/cannon/CannonPhysicsPlugin.ts

@@ -0,0 +1,409 @@
+import {Body, ContactMaterial, Material as CannonMaterial, Shape, World} from "cannon-es"
+import {
+    AViewerPluginSync,
+    EntityComponentPlugin,
+    FrameFadePlugin, generateUUID,
+    IObject3D,
+    IViewerEvent,
+    Matrix4,
+    Object3DWidgetsPlugin,
+    Quaternion,
+    serialize,
+    ThreeSerialization,
+    ThreeViewer,
+    TObject3DComponent,
+    TypeSystem,
+    uiConfig,
+    uiFolderContainer, uiInput, uiMonitor, uiNumber,
+    uiToggle,
+    Vector3
+} from "threepipe"
+import {Cannon3DShapeComponent, Cannon3DShapeHelper} from "./Cannon3DShapeComponent.ts";
+import {Cannon3DBodyComponent} from "./Cannon3DBodyComponent.ts";
+import {CannonRagdollComponent} from "./CannonRagdollComponent.ts";
+
+@uiFolderContainer('Cannon Material')
+export class CannonMaterial2 extends CannonMaterial{
+    @uiInput()
+    declare name: string
+    @uiMonitor()
+    uuid: string = generateUUID()
+    @uiNumber()
+    declare friction
+    @uiNumber()
+    declare restitution
+}
+ThreeSerialization.MakeSerializable(CannonMaterial as any, 'CannonMaterial', ['friction', 'restitution']) // this is not needed actually, but just in case
+ThreeSerialization.MakeSerializable(CannonMaterial2 as any, 'CannonMaterial', ['name', 'uuid', 'friction', 'restitution']) // this should be after CannonMaterial
+ThreeSerialization.MakeSerializable(ContactMaterial as any, 'CannonContactMaterial', [/* 'materials', */'friction', 'restitution', 'contactEquationStiffness', 'contactEquationRelaxation', 'frictionEquationStiffness', 'frictionEquationRelaxation'])
+TypeSystem.AddClass({
+    key: 'CannonMaterial',
+    getId(obj: CannonMaterial2) {
+        return obj.uuid
+    },
+    getLabel(obj?: CannonMaterial2) {
+        return obj ? obj.name : 'Cannon Material'
+    },
+    setName(obj: CannonMaterial2, name: string) {
+        obj.name = name
+    },
+    ctor: CannonMaterial2,
+})
+
+// uses https://github.com/pmndrs/cannon-es
+
+@uiFolderContainer('Physics')
+export class CannonPhysicsPlugin extends AViewerPluginSync {
+    public static readonly PluginType = 'CannonPhysicsPlugin'
+    private _world: World = new World()
+    get world() { return this._world }
+    // dependencies: Class<IViewerPlugin<any>>[]
+
+    @serialize()
+    @uiToggle()
+    enabled = true
+
+    static CannonTypes = {
+        Body, Shape, World, Material: CannonMaterial, ContactMaterial,
+    }
+    @uiToggle('Running', (_that: CannonPhysicsPlugin)=>({onChange: ()=>{return}}))
+    running = true
+
+    nextSteps = 0
+
+    @uiConfig()
+        stepPhysics: any = {
+            stepCount: 100,
+            delta: 0.1,
+            step: () => {
+                this.nextSteps = this.stepPhysics.stepCount
+            },
+        }
+
+    @uiConfig()
+    @serialize()
+        defaultMaterial = new CannonMaterial2('default')
+
+    // @uiButton('Make Root Bodies')
+    //     makeRootBodies = () => {
+    //         this._viewer?.scene.modelRoot.children.forEach((child) => {
+    //             this.makeBody(child)
+    //         })
+    //     }
+
+    // stepMultiple = () => {
+    //     console.log(this.enabled, this.nextSteps)
+    //     if (this.enabled) return
+    //     this.nextSteps = 100
+    //     // this.enabled = true
+    //     // this._viewer?.doOnce('postFrame', () => {
+    //     //     // Step the physics world
+    //     //     for (let i = 0; i < 100; i++) {
+    //     //         this._world.step(0.1)
+    //     //     }
+    //     //     // this._viewer?.doOnce('postFrame', () => {
+    //     //     //     this.enabled = false
+    //     //     // })
+    //     // })
+    //     // this._viewer?.setDirty()
+    // }
+
+    constructor(enabled = true, running = false) {
+        super()
+        this.enabled = enabled
+        this.running = running
+
+        // replaced for UI
+        this.defaultMaterial.friction = 0
+        this.defaultMaterial.restitution = 0
+        this._world.defaultMaterial = this.defaultMaterial
+        this._world.defaultContactMaterial.materials = [this.defaultMaterial, this.defaultMaterial]
+
+        const collisionEv: CollisionEvent = {} as any
+        this._world.addEventListener('beginContact', (e: any)=>{
+            const compA = this.cannonBodies.get(e.bodyA)
+            const compB = this.cannonBodies.get(e.bodyB)
+            if(!compA || !compB){
+                console.warn('[CannonPhysicsPlugin] Contact bodies not managed by plugin', e.bodyA, e.bodyB)
+                return
+            }
+            collisionEv.object = compB.object
+            collisionEv.body = compB
+            EntityComponentPlugin.ObjectDispatch(compA.object, 'onBeginContact', collisionEv)
+            collisionEv.object = compA.object
+            collisionEv.body = compA
+            EntityComponentPlugin.ObjectDispatch(compB.object, 'onBeginContact', collisionEv)
+        })
+        this._world.addEventListener('endContact', (e: any)=>{
+            const compA = this.cannonBodies.get(e.bodyA)
+            const compB = this.cannonBodies.get(e.bodyB)
+            if(!compA || !compB){
+                console.warn('[CannonPhysicsPlugin] Contact bodies not managed by plugin', e.bodyA, e.bodyB)
+                return
+            }
+            collisionEv.object = compB.object
+            collisionEv.body = compB
+            EntityComponentPlugin.ObjectDispatch(compA.object, 'onEndContact', collisionEv)
+            collisionEv.object = compA.object
+            collisionEv.body = compA
+            EntityComponentPlugin.ObjectDispatch(compB.object, 'onEndContact', collisionEv)
+        })
+        // this._world.addEventListener('beginShapeContact', (e)=>{
+        //     console.log(e)
+        // })
+        // this._world.addEventListener('endShapeContact', (e)=>{
+        //     console.log(e)
+        // })
+        // this._world.addEventListener(Body.COLLIDE_EVENT_NAME, (e)=>{
+        //     console.log(e)
+        // })
+        this._world.gravity.set(0, -9.81, 0)
+        // this._world.gravity.set(0, 0, 0)
+
+        //
+        // // Max solver iterations: Use more for better force propagation, but keep in mind that it's not very computationally cheap!
+        // this._world.solver.iterations = 20
+        //
+        // // Tweak contact properties.
+        // // Contact stiffness - use to make softer/harder contacts
+        // this._world.defaultContactMaterial.contactEquationStiffness = 1e10
+        // this._world.defaultContactMaterial.contactEquationRelaxation = 10
+        //
+
+        // coeff of restitution: 0 = no bounce, 1 = perfect bounce
+
+        // test
+
+        // const mat = new CannonMaterial('defaultMat')
+        // mat.friction = 0.351
+        // mat.restitution = 0.63
+        // const contactMat = new ContactMaterial(mat, mat, {friction: 0.13, restitution: 0.563})
+        //
+        // const mjson = ThreeSerialization.Serialize(mat)
+        // const mat2 = ThreeSerialization.Deserialize(mjson, null) as CannonMaterial
+        // const mat3 = ThreeSerialization.Deserialize(mjson, mat) as CannonMaterial
+        // console.log(mjson, mat2, mat3, mat3 === mat)
+        //
+        // const cmjson = ThreeSerialization.Serialize(contactMat)
+        // const contactMat2 = ThreeSerialization.Deserialize(cmjson, null) as ContactMaterial
+        // const contactMat3 = ThreeSerialization.Deserialize(cmjson, contactMat) as ContactMaterial
+        // console.log(cmjson, contactMat2, contactMat3, contactMat3 === contactMat)
+
+    }
+
+    dependencies = [EntityComponentPlugin]
+
+    // private _bodyMeshMap = new WeakMap<Body, Object3D>()
+
+    private _v1 = new Vector3()
+    private _v2 = new Vector3()
+    private _s2 = new Vector3()
+    private _q1 = new Quaternion()
+    private _q2 = new Quaternion()
+    private _m1 = new Matrix4()
+    private _m2 = new Matrix4()
+    frameFadeToggled = false
+
+    protected _preFrame = (e: IViewerEvent) => {
+        const viewer = this._viewer
+        if (!viewer) return
+        if(this.isDisabled()) return
+        const frameFadePlugin = viewer.getPlugin(FrameFadePlugin)
+        // todo use isDisabled
+        if (!this.running) {
+            if (this.nextSteps > 0) this.running = true
+            else {
+                if (frameFadePlugin && this.frameFadeToggled) {
+                    frameFadePlugin.enable(CannonPhysicsPlugin.PluginType)
+                    this.frameFadeToggled = false
+                }
+                this._dirty = false
+                return
+            }
+        }
+        if (frameFadePlugin && !this.frameFadeToggled) {
+            frameFadePlugin.disable(CannonPhysicsPlugin.PluginType)
+        }
+
+        try {
+            // Step the physics world
+            if (this.nextSteps > 0) {
+                for (let i = 0; i < this.stepPhysics.stepCount; i++) {
+                    this._world.step(this.stepPhysics.delta)
+                }
+            } else {
+                // todo use dt
+                // const dt = e.deltaTime
+                this._world.fixedStep()
+            }
+        }catch (e) {
+            console.error('[CannonPhysicsPlugin] Error stepping physics world')
+            console.error(e)
+        }
+
+        this._dirty = false
+        let dirty = false
+        // Update the bodies
+        for (const bodyC of this.bodyComponents.values()) {
+            if (bodyC.mass === 0) continue
+            const mesh = bodyC.object
+            const body = bodyC.body
+            if (!mesh) continue
+            dirty = false
+            mesh.updateWorldMatrix(true, false)
+            mesh.getWorldPosition(this._v2)
+            mesh.getWorldQuaternion(this._q2)
+            mesh.getWorldScale(this._s2)
+            this._v1.copy(body.position)
+            if (!dirty && this._v2.manhattanDistanceTo(this._v1) > 0) {
+                dirty = true
+                // world = parent.local
+                // parent-1 . world = local
+            }
+            this._q1.copy(body.quaternion as any)
+            if (!dirty && this._q2.angleTo(this._q1) > 0) {
+                dirty = true
+            }
+            if (dirty) {
+                this._m1.compose(this._v1, this._q1, this._s2)
+                if (!mesh.parent) {
+                    // throw new Error('no parent')
+                    console.error('[CannonPhysicsPlugin] Mesh has no parent, cannot set world transform', mesh)
+                }else {
+                    this._m2.copy(mesh.parent.matrixWorld).invert()
+                    this._m2.multiply(this._m1)
+                    this._m2.decompose(this._v1, this._q1, this._s2)
+                    mesh.position.copy(this._v1)
+                    mesh.quaternion.copy(this._q1)
+                    mesh.setDirty && mesh.setDirty({change: 'transform', source: 'CannonPhysicsPlugin'})
+                }
+            }
+        }
+        this._dirty = dirty
+        viewer.setDirty()
+        // viewer.scene.setDirty({sceneUpdate: false})
+        viewer.renderManager.resetShadows()
+
+        if (this.nextSteps > 0) {
+            this.running = false
+            this.nextSteps = 0
+        }
+    }
+
+    private _onRemove: (()=>void)[] = []
+
+    async onAdded(viewer: ThreeViewer): Promise<
+        void> {
+        super.onAdded(viewer)
+
+        const offUpdate = viewer.on('preFrame', {
+            order: -1, // before most things
+            callback: this._preFrame,
+        })
+        if (offUpdate) this._onRemove.push(offUpdate)
+
+        Object.values(this.componentTypes).forEach((compType) => {
+            viewer.getPlugin(EntityComponentPlugin)?.addComponentType(compType)
+        })
+
+        viewer.object3dManager.getObjects().forEach(object=>this._objectAdd({object}))
+        viewer.object3dManager.addEventListener('objectAdd', this._objectAdd)
+        viewer.object3dManager.addEventListener('objectRemove', this._objectRemove)
+
+        viewer.forPlugin(Object3DWidgetsPlugin, (wplugin) => {
+            wplugin.helpers.push(Cannon3DShapeHelper)
+        }, (wplugin)=>{
+            const i = wplugin.helpers.indexOf(Cannon3DShapeHelper)
+            if (i >= 0) wplugin.helpers.splice(i, 1)
+        })
+
+        // viewer.scene.addEventListener('update', (e) => {
+        //     this._bodyMeshMap.forEach((mesh, body) => {
+        //         body.velocity.set(0, 0, 0)
+        //         body.angularVelocity.set(0, 0, 0)
+        //     })
+        // })
+    }
+
+    private _objectAdd = (e: {object?: IObject3D})=>{
+        const obj = e.object
+        // console.log('pbject add', obj?.name, obj?.userData, obj)
+        if (obj?.userData?.physicsMass === undefined) return
+        const ecs = this._viewer?.getPlugin(EntityComponentPlugin)
+        if (!ecs) return
+        const existing = EntityComponentPlugin.GetComponentData(obj, this.componentTypes.body)
+        if (existing) return
+        // const pBody = ecs.addComponent(obj, this.componentTypes.body).component
+        // const pShape = ecs.addComponent(obj, this.componentTypes.shape).component
+        // if (!pBody || !pShape) return
+        // pBody.mass = typeof obj.userData.physicsMass === 'number' ? obj.userData.physicsMass : 0
+        // if (obj.userData.physicsBodyType !== undefined) {
+        //     if (typeof obj.userData.physicsBodyType === 'string' && physicsBodyType.includes(obj.userData.physicsBodyType as PhysicsBodyType)) {
+        //         pBody.type = obj.userData.physicsBodyType as PhysicsBodyType
+        //     }
+        // }
+        // if (obj.userData.physicsShape !== undefined) {
+        //     if (typeof obj.userData.physicsShape === 'string' && cannonShapeTypes.includes(obj.userData.physicsShape as CannonShapeType)) {
+        //         pShape.type = obj.userData.physicsShape as CannonShapeType
+        //     }
+        // }
+    }
+
+    private _objectRemove = (e: {object?: IObject3D})=>{
+        const obj = e.object
+        if (!obj?.userData?.physicsMass === undefined) return
+
+    }
+
+    onRemove(viewer: ThreeViewer) {
+        this._onRemove.forEach(off=>off())
+        Object.values(this.componentTypes).forEach((compType) => {
+            viewer.getPlugin(EntityComponentPlugin)?.removeComponentType(compType)
+        })
+        viewer.object3dManager.removeEventListener('objectAdd', this._objectAdd)
+        viewer.object3dManager.removeEventListener('objectRemove', this._objectRemove)
+        viewer.object3dManager.getObjects().forEach(object=>this._objectRemove({object}))
+
+        // todo assert all bodies removed?
+
+        super.onRemove(viewer)
+    }
+
+    readonly componentTypes = {
+        body: Cannon3DBodyComponent,
+        shape: Cannon3DShapeComponent,
+        ragdoll: CannonRagdollComponent,
+    } satisfies Record<string, TObject3DComponent>
+
+    bodyComponents = new Set<Cannon3DBodyComponent>()
+    cannonBodies = new WeakMap<Body, Cannon3DBodyComponent>()
+    addBody(body: Cannon3DBodyComponent) {
+        if (this.bodyComponents.has(body)) return
+        this.bodyComponents.add(body)
+        this._world.addBody(body.body)
+        this.cannonBodies.set(body.body, body)
+        // this._bodyMeshMap.set(body.body, body.object)
+        // this._viewer?.setDirty()
+    }
+    removeBody(body: Cannon3DBodyComponent) {
+        if (!this.bodyComponents.has(body)) return
+        this.bodyComponents.delete(body)
+        this._world.removeBody(body.body)
+        this.cannonBodies.delete(body.body)
+        // this._bodyMeshMap.delete(body.body)
+        // this._viewer?.setDirty()
+    }
+
+}
+
+export interface CollisionEvent{
+    object: IObject3D
+    body: Cannon3DBodyComponent
+}
+declare module 'threepipe'{
+    interface Object3DComponent{
+        onBeginContact?(collisionEvent: any):void
+        onEndContact?(collisionEvent: any):void
+
+    }
+}