Special Offer

Zabbix Monitoring Course Discount $11.99
https://www.udemy.com/course/zabbix-monitoring/?couponCode=607976806882D016D221
Offer expires in hours. Be quick and share with your friends and colleagues.

Special Offer

Grafana Course Discount $13.99
https://www.udemy.com/course/grafana-tutorial/?couponCode=D04B41D2EF297CC83032
Offer expires in hours. Be quick and share with your friends and colleagues.

Special Offer

Prometheus Course Discount $9.99
https://www.udemy.com/course/prometheus/?couponCode=EB3123B9535131F1237F
Offer expires in hours. Be quick and share with your friends and colleagues.

Special Offer

Threejs Course Discount $9.99
https://www.udemy.com/course/threejs-tutorials/?couponCode=416F66CD4614B1E0FD02
Offer expires in hours. Be quick and share with your friends and colleagues.

Cannon Debug Renderer

Video Lecture

Description

The original Cannon.js also contained a script to help debug what the physics world sees. I have re-written that script as a TypeScript file which we can add to our project so that we can visualize the physics shapes better.

React Three Fiber version

Start Scripts

./src/client/client.ts

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'dat.gui'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import * as CANNON from 'cannon-es'
import CannonUtils from './utils/cannonUtils'
import CannonDebugRenderer from './utils/cannonDebugRenderer'

const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))

const light1 = new THREE.SpotLight()
light1.position.set(2.5, 5, 5)
light1.angle = Math.PI / 4
light1.penumbra = 0.5
light1.castShadow = true
light1.shadow.mapSize.width = 1024
light1.shadow.mapSize.height = 1024
light1.shadow.camera.near = 0.5
light1.shadow.camera.far = 20
scene.add(light1)

const light2 = new THREE.SpotLight()
light2.position.set(-2.5, 5, 5)
light2.angle = Math.PI / 4
light2.penumbra = 0.5
light2.castShadow = true
light2.shadow.mapSize.width = 1024
light2.shadow.mapSize.height = 1024
light2.shadow.camera.near = 0.5
light2.shadow.camera.far = 20
scene.add(light2)

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.set(0, 3, 6)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.target.y = 0.5

const world = new CANNON.World()
world.gravity.set(0, -9.82, 0)
// world.broadphase = new CANNON.NaiveBroadphase()
// ;(world.solver as CANNON.GSSolver).iterations = 10
// world.allowSleep = true

const normalMaterial = new THREE.MeshNormalMaterial()
const phongMaterial = new THREE.MeshPhongMaterial()

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMesh = new THREE.Mesh(cubeGeometry, normalMaterial)
cubeMesh.position.x = -4
cubeMesh.position.y = 3
cubeMesh.castShadow = true
scene.add(cubeMesh)
const cubeShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5))
const cubeBody = new CANNON.Body({ mass: 1 })
cubeBody.addShape(cubeShape)
cubeBody.position.x = cubeMesh.position.x
cubeBody.position.y = cubeMesh.position.y
cubeBody.position.z = cubeMesh.position.z
world.addBody(cubeBody)

const sphereGeometry = new THREE.SphereGeometry()
const sphereMesh = new THREE.Mesh(sphereGeometry, normalMaterial)
sphereMesh.position.x = -2
sphereMesh.position.y = 3
sphereMesh.castShadow = true
scene.add(sphereMesh)
const sphereShape = new CANNON.Sphere(1)
const sphereBody = new CANNON.Body({ mass: 1 })
sphereBody.addShape(sphereShape)
sphereBody.position.x = sphereMesh.position.x
sphereBody.position.y = sphereMesh.position.y
sphereBody.position.z = sphereMesh.position.z
world.addBody(sphereBody)

const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 8)
const cylinderMesh = new THREE.Mesh(cylinderGeometry, normalMaterial)
cylinderMesh.position.x = 0
cylinderMesh.position.y = 3
cylinderMesh.castShadow = true
scene.add(cylinderMesh)
const cylinderShape = new CANNON.Cylinder(1, 1, 2, 8)
const cylinderBody = new CANNON.Body({ mass: 1 })
cylinderBody.addShape(cylinderShape)
cylinderBody.position.x = cylinderMesh.position.x
cylinderBody.position.y = cylinderMesh.position.y
cylinderBody.position.z = cylinderMesh.position.z
world.addBody(cylinderBody)

const icosahedronGeometry = new THREE.IcosahedronGeometry(1, 0)
const icosahedronMesh = new THREE.Mesh(icosahedronGeometry, normalMaterial)
icosahedronMesh.position.x = 2
icosahedronMesh.position.y = 3
icosahedronMesh.castShadow = true
scene.add(icosahedronMesh)
const icosahedronShape = CannonUtils.CreateConvexPolyhedron(
    icosahedronMesh.geometry
)
const icosahedronBody = new CANNON.Body({ mass: 1 })
icosahedronBody.addShape(icosahedronShape)
icosahedronBody.position.x = icosahedronMesh.position.x
icosahedronBody.position.y = icosahedronMesh.position.y
icosahedronBody.position.z = icosahedronMesh.position.z
world.addBody(icosahedronBody)

const torusKnotGeometry = new THREE.TorusKnotGeometry()
const torusKnotMesh = new THREE.Mesh(torusKnotGeometry, normalMaterial)
torusKnotMesh.position.x = 4
torusKnotMesh.position.y = 3
torusKnotMesh.castShadow = true
scene.add(torusKnotMesh)
const torusKnotShape = CannonUtils.CreateTrimesh(torusKnotMesh.geometry)
const torusKnotBody = new CANNON.Body({ mass: 1 })
torusKnotBody.addShape(torusKnotShape)
torusKnotBody.position.x = torusKnotMesh.position.x
torusKnotBody.position.y = torusKnotMesh.position.y
torusKnotBody.position.z = torusKnotMesh.position.z
world.addBody(torusKnotBody)

let monkeyMesh: THREE.Object3D
let monkeyBody: CANNON.Body
let monkeyLoaded = false
const objLoader = new OBJLoader()
objLoader.load(
    'models/monkey.obj',
    (object) => {
        scene.add(object)
        monkeyMesh = object.children[0]
        ;(monkeyMesh as THREE.Mesh).material = normalMaterial
        monkeyMesh.position.x = -2
        monkeyMesh.position.y = 20
        const monkeyShape = CannonUtils.CreateTrimesh(
            (monkeyMesh as THREE.Mesh).geometry
        )
        // const monkeyShape = CannonUtils.CreateConvexPolyhedron(
        //     (monkeyMesh as THREE.Mesh).geometry
        // )
        monkeyBody = new CANNON.Body({ mass: 1 })
        monkeyBody.addShape(monkeyShape)
        // monkeyBody.addShape(cubeShape)
        // monkeyBody.addShape(sphereShape)
        // monkeyBody.addShape(cylinderShape)
        // monkeyBody.addShape(icosahedronShape)
        // monkeyBody.addShape(new CANNON.Plane())
        // monkeyBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), Math.PI / 2)
        monkeyBody.position.x = monkeyMesh.position.x
        monkeyBody.position.y = monkeyMesh.position.y
        monkeyBody.position.z = monkeyMesh.position.z
        world.addBody(monkeyBody)
        monkeyLoaded = true
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
    },
    (error) => {
        console.log('An error happened')
    }
)

const planeGeometry = new THREE.PlaneGeometry(25, 25)
const planeMesh = new THREE.Mesh(planeGeometry, phongMaterial)
planeMesh.position.y = -0.01
planeMesh.rotateX(-Math.PI / 2)
planeMesh.receiveShadow = true
scene.add(planeMesh)
const planeShape = new CANNON.Plane()
const planeBody = new CANNON.Body({ mass: 0 })
planeBody.addShape(planeShape)
planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2)
world.addBody(planeBody)

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

const stats = new Stats()
document.body.appendChild(stats.dom)

const gui = new GUI()
const physicsFolder = gui.addFolder('Physics')
physicsFolder.add(world.gravity, 'x', -10.0, 10.0, 0.1)
physicsFolder.add(world.gravity, 'y', -10.0, 10.0, 0.1)
physicsFolder.add(world.gravity, 'z', -10.0, 10.0, 0.1)
physicsFolder.open()

const clock = new THREE.Clock()
let delta

// const cannonDebugRenderer = new CannonDebugRenderer(scene, world)

function animate() {
    requestAnimationFrame(animate)

    controls.update()

    delta = Math.min(clock.getDelta(), 0.1)
    world.step(delta)

    // cannonDebugRenderer.update()

    // Copy coordinates from Cannon to Three.js
    cubeMesh.position.set(
        cubeBody.position.x,
        cubeBody.position.y,
        cubeBody.position.z
    )
    cubeMesh.quaternion.set(
        cubeBody.quaternion.x,
        cubeBody.quaternion.y,
        cubeBody.quaternion.z,
        cubeBody.quaternion.w
    )
    sphereMesh.position.set(
        sphereBody.position.x,
        sphereBody.position.y,
        sphereBody.position.z
    )
    sphereMesh.quaternion.set(
        sphereBody.quaternion.x,
        sphereBody.quaternion.y,
        sphereBody.quaternion.z,
        sphereBody.quaternion.w
    )
    cylinderMesh.position.set(
        cylinderBody.position.x,
        cylinderBody.position.y,
        cylinderBody.position.z
    )
    cylinderMesh.quaternion.set(
        cylinderBody.quaternion.x,
        cylinderBody.quaternion.y,
        cylinderBody.quaternion.z,
        cylinderBody.quaternion.w
    )
    icosahedronMesh.position.set(
        icosahedronBody.position.x,
        icosahedronBody.position.y,
        icosahedronBody.position.z
    )
    icosahedronMesh.quaternion.set(
        icosahedronBody.quaternion.x,
        icosahedronBody.quaternion.y,
        icosahedronBody.quaternion.z,
        icosahedronBody.quaternion.w
    )
    torusKnotMesh.position.set(
        torusKnotBody.position.x,
        torusKnotBody.position.y,
        torusKnotBody.position.z
    )
    torusKnotMesh.quaternion.set(
        torusKnotBody.quaternion.x,
        torusKnotBody.quaternion.y,
        torusKnotBody.quaternion.z,
        torusKnotBody.quaternion.w
    )
    if (monkeyLoaded) {
        monkeyMesh.position.set(
            monkeyBody.position.x,
            monkeyBody.position.y,
            monkeyBody.position.z
        )
        monkeyMesh.quaternion.set(
            monkeyBody.quaternion.x,
            monkeyBody.quaternion.y,
            monkeyBody.quaternion.z,
            monkeyBody.quaternion.w
        )
    }

    render()

    stats.update()
}

function render() {
    renderer.render(scene, camera)
}

animate()

./src/client/utils/cannonUtils.ts

//MIT License
//Copyright (c) 2020-2021 Sean Bradley
import * as THREE from 'three'
import * as CANNON from 'cannon-es'

interface Face3 {
    a: number
    b: number
    c: number
    normals: THREE.Vector3[]
}

class CannonUtils {
    public static CreateTrimesh(
        geometry: THREE.BufferGeometry
    ): CANNON.Trimesh {
        let vertices
        if (geometry.index === null) {
            vertices = (geometry.attributes.position as THREE.BufferAttribute).array as number[]
        } else {
            vertices = (geometry.clone().toNonIndexed().attributes.position as THREE.BufferAttribute).array as number[]
        }
        const indices = Object.keys(vertices).map(Number)
        return new CANNON.Trimesh(vertices, indices)
    }

    public static CreateConvexPolyhedron(
        geometry: THREE.BufferGeometry
    ): CANNON.ConvexPolyhedron {
        const position = geometry.attributes.position as THREE.BufferAttribute
        const normal = geometry.attributes.normal as THREE.BufferAttribute
        const vertices: THREE.Vector3[] = []
        for (let i = 0; i < position.count; i++) {
            vertices.push(new THREE.Vector3().fromBufferAttribute(position, i))
        }
        const faces: Face3[] = []
        for (let i = 0; i < position.count; i += 3) {
            const vertexNormals =
                normal === undefined
                    ? []
                    : [
                          new THREE.Vector3().fromBufferAttribute(normal, i),
                          new THREE.Vector3().fromBufferAttribute(
                              normal,
                              i + 1
                          ),
                          new THREE.Vector3().fromBufferAttribute(
                              normal,
                              i + 2
                          ),
                      ]
            const face: Face3 = {
                a: i,
                b: i + 1,
                c: i + 2,
                normals: vertexNormals,
            }
            faces.push(face)
        }

        const verticesMap: { [key: string]: number } = {}
        const points: CANNON.Vec3[] = []
        const changes: number[] = []
        for (let i = 0, il = vertices.length; i < il; i++) {
            const v = vertices[i]
            const key =
                Math.round(v.x * 100) +
                '_' +
                Math.round(v.y * 100) +
                '_' +
                Math.round(v.z * 100)
            if (verticesMap[key] === undefined) {
                verticesMap[key] = i
                points.push(
                    new CANNON.Vec3(vertices[i].x, vertices[i].y, vertices[i].z)
                )
                changes[i] = points.length - 1
            } else {
                changes[i] = changes[verticesMap[key]]
            }
        }

        const faceIdsToRemove = []
        for (let i = 0, il = faces.length; i < il; i++) {
            const face = faces[i]
            face.a = changes[face.a]
            face.b = changes[face.b]
            face.c = changes[face.c]
            const indices = [face.a, face.b, face.c]
            for (let n = 0; n < 3; n++) {
                if (indices[n] === indices[(n + 1) % 3]) {
                    faceIdsToRemove.push(i)
                    break
                }
            }
        }

        for (let i = faceIdsToRemove.length - 1; i >= 0; i--) {
            const idx = faceIdsToRemove[i]
            faces.splice(idx, 1)
        }

        const cannonFaces: number[][] = faces.map(function (f) {
            return [f.a, f.b, f.c]
        })

        return new CANNON.ConvexPolyhedron({
            vertices: points,
            faces: cannonFaces,
        })
    }

    public static offsetCenterOfMass(
        body: CANNON.Body,
        centreOfMass: CANNON.Vec3
    ): void {
        body.shapeOffsets.forEach(function (offset) {
            centreOfMass.vadd(offset, centreOfMass)
        })
        centreOfMass.scale(1 / body.shapes.length, centreOfMass)
        body.shapeOffsets.forEach(function (offset) {
            offset.vsub(centreOfMass, offset)
        })
        const worldCenterOfMass = new CANNON.Vec3()
        body.vectorToWorldFrame(centreOfMass, worldCenterOfMass)
        body.position.vadd(worldCenterOfMass, body.position)
    }
}

export default CannonUtils

./src/client/utils/cannonDebugRenderer.ts

// MIT License
// Original file https://github.com/schteppe/cannon.js/blob/908aa1e954b54d05a43dd708584e882dfe30ae29/tools/threejs/CannonDebugRenderer.js CopyRight https://github.com/schteppe
// Differences Copyright 2020-2021 Sean Bradley : https://sbcode.net/threejs/
// - Added import statements for THREE
// - Converted to a class with a default export,
// - Converted to TypeScript
// - Updated to support THREE.BufferGeometry (r125)
// - added support for CANNON.Cylinder
// - Updated to use cannon-es

import * as THREE from 'three'
import * as CANNON from 'cannon-es'

export default class CannonDebugRenderer {
    public scene: THREE.Scene
    public world: CANNON.World
    private _meshes: THREE.Mesh[] | THREE.Points[]
    private _material: THREE.MeshBasicMaterial
    private _particleMaterial = new THREE.PointsMaterial()
    private _sphereGeometry: THREE.SphereGeometry
    private _boxGeometry: THREE.BoxGeometry
    private _cylinderGeometry: THREE.CylinderGeometry
    private _planeGeometry: THREE.PlaneGeometry
    private _particleGeometry: THREE.BufferGeometry

    private tmpVec0: CANNON.Vec3 = new CANNON.Vec3()
    private tmpVec1: CANNON.Vec3 = new CANNON.Vec3()
    private tmpVec2: CANNON.Vec3 = new CANNON.Vec3()
    private tmpQuat0: CANNON.Quaternion = new CANNON.Quaternion()

    constructor(scene: THREE.Scene, world: CANNON.World, options?: object) {
        options = options || {}

        this.scene = scene
        this.world = world

        this._meshes = []

        this._material = new THREE.MeshBasicMaterial({
            color: 0x00ff00,
            wireframe: true,
        })
        this._particleMaterial = new THREE.PointsMaterial({
            color: 0xff0000,
            size: 10,
            sizeAttenuation: false,
            depthTest: false,
        })
        this._sphereGeometry = new THREE.SphereGeometry(1)
        this._boxGeometry = new THREE.BoxGeometry(1, 1, 1)
        this._cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 8)
        this._planeGeometry = new THREE.PlaneGeometry(10, 10, 10, 10)
        this._particleGeometry = new THREE.BufferGeometry()
        this._particleGeometry.setFromPoints([new THREE.Vector3(0, 0, 0)])
    }

    public update() {
        const bodies: CANNON.Body[] = this.world.bodies
        const meshes: THREE.Mesh[] | THREE.Points[] = this._meshes
        const shapeWorldPosition: CANNON.Vec3 = this.tmpVec0
        const shapeWorldQuaternion: CANNON.Quaternion = this.tmpQuat0

        let meshIndex = 0

        for (let i = 0; i !== bodies.length; i++) {
            const body = bodies[i]

            for (let j = 0; j !== body.shapes.length; j++) {
                const shape = body.shapes[j]

                this._updateMesh(meshIndex, body, shape)

                const mesh = meshes[meshIndex]

                if (mesh) {
                    // Get world position
                    body.quaternion.vmult(
                        body.shapeOffsets[j],
                        shapeWorldPosition
                    )
                    body.position.vadd(shapeWorldPosition, shapeWorldPosition)

                    // Get world quaternion
                    body.quaternion.mult(
                        body.shapeOrientations[j],
                        shapeWorldQuaternion
                    )

                    // Copy to meshes
                    mesh.position.x = shapeWorldPosition.x
                    mesh.position.y = shapeWorldPosition.y
                    mesh.position.z = shapeWorldPosition.z
                    mesh.quaternion.x = shapeWorldQuaternion.x
                    mesh.quaternion.y = shapeWorldQuaternion.y
                    mesh.quaternion.z = shapeWorldQuaternion.z
                    mesh.quaternion.w = shapeWorldQuaternion.w
                }

                meshIndex++
            }
        }

        for (let i = meshIndex; i < meshes.length; i++) {
            const mesh: THREE.Mesh | THREE.Points = meshes[i]
            if (mesh) {
                this.scene.remove(mesh)
            }
        }

        meshes.length = meshIndex
    }

    private _updateMesh(index: number, body: CANNON.Body, shape: CANNON.Shape) {
        let mesh = this._meshes[index]
        if (!this._typeMatch(mesh, shape)) {
            if (mesh) {
                //console.log(shape.type)
                this.scene.remove(mesh)
            }
            mesh = this._meshes[index] = this._createMesh(shape)
        }
        this._scaleMesh(mesh, shape)
    }

    private _typeMatch(
        mesh: THREE.Mesh | THREE.Points,
        shape: CANNON.Shape
    ): boolean {
        if (!mesh) {
            return false
        }
        const geo: THREE.BufferGeometry = mesh.geometry
        return (
            (geo instanceof THREE.SphereGeometry &&
                shape instanceof CANNON.Sphere) ||
            (geo instanceof THREE.BoxGeometry && shape instanceof CANNON.Box) ||
            (geo instanceof THREE.CylinderGeometry &&
                shape instanceof CANNON.Cylinder) ||
            (geo instanceof THREE.PlaneGeometry &&
                shape instanceof CANNON.Plane) ||
            shape instanceof CANNON.ConvexPolyhedron ||
            (geo.id === shape.id && shape instanceof CANNON.Trimesh) ||
            (geo.id === shape.id && shape instanceof CANNON.Heightfield)
        )
    }

    private _createMesh(shape: CANNON.Shape): THREE.Mesh | THREE.Points {
        let mesh: THREE.Mesh | THREE.Points
        let geometry: THREE.BufferGeometry
        let v0: CANNON.Vec3
        let v1: CANNON.Vec3
        let v2: CANNON.Vec3
        const material: THREE.MeshBasicMaterial = this._material
        let points: THREE.Vector3[] = []

        switch (shape.type) {
            case CANNON.Shape.types.SPHERE:
                mesh = new THREE.Mesh(this._sphereGeometry, material)
                break

            case CANNON.Shape.types.BOX:
                mesh = new THREE.Mesh(this._boxGeometry, material)
                break

            case CANNON.Shape.types.CYLINDER:
                geometry = new THREE.CylinderGeometry(
                    (shape as CANNON.Cylinder).radiusTop,
                    (shape as CANNON.Cylinder).radiusBottom,
                    (shape as CANNON.Cylinder).height,
                    (shape as CANNON.Cylinder).numSegments
                )
                mesh = new THREE.Mesh(geometry, material)
                break

            case CANNON.Shape.types.PLANE:
                mesh = new THREE.Mesh(this._planeGeometry, material)
                break

            case CANNON.Shape.types.PARTICLE:
                mesh = new THREE.Points(
                    this._particleGeometry,
                    this._particleMaterial
                )
                break

            case CANNON.Shape.types.CONVEXPOLYHEDRON:
                // Create mesh
                geometry = new THREE.BufferGeometry()
                shape.id = geometry.id
                points = []
                for (
                    let i = 0;
                    i < (shape as CANNON.ConvexPolyhedron).vertices.length;
                    i += 1
                ) {
                    const v = (shape as CANNON.ConvexPolyhedron).vertices[i]
                    points.push(new THREE.Vector3(v.x, v.y, v.z))
                }
                geometry.setFromPoints(points)

                const indices = []
                for (
                    let i = 0;
                    i < (shape as CANNON.ConvexPolyhedron).faces.length;
                    i++
                ) {
                    const face = (shape as CANNON.ConvexPolyhedron).faces[i]
                    const a = face[0]
                    for (let j = 1; j < face.length - 1; j++) {
                        const b = face[j]
                        const c = face[j + 1]
                        indices.push(a, b, c)
                    }
                }

                geometry.setIndex(indices)

                mesh = new THREE.Mesh(geometry, material)

                break

            case CANNON.Shape.types.TRIMESH:
                geometry = new THREE.BufferGeometry()
                shape.id = geometry.id
                points = []
                for (
                    let i = 0;
                    i < (shape as CANNON.Trimesh).vertices.length;
                    i += 3
                ) {
                    points.push(
                        new THREE.Vector3(
                            (shape as CANNON.Trimesh).vertices[i],
                            (shape as CANNON.Trimesh).vertices[i + 1],
                            (shape as CANNON.Trimesh).vertices[i + 2]
                        )
                    )
                }
                geometry.setFromPoints(points)
                mesh = new THREE.Mesh(geometry, material)

                break

            case CANNON.Shape.types.HEIGHTFIELD:
                geometry = new THREE.BufferGeometry()

                v0 = this.tmpVec0
                v1 = this.tmpVec1
                v2 = this.tmpVec2
                for (
                    let xi = 0;
                    xi < (shape as CANNON.Heightfield).data.length - 1;
                    xi++
                ) {
                    for (
                        let yi = 0;
                        yi < (shape as CANNON.Heightfield).data[xi].length - 1;
                        yi++
                    ) {
                        for (let k = 0; k < 2; k++) {
                            ;(
                                shape as CANNON.Heightfield
                            ).getConvexTrianglePillar(xi, yi, k === 0)
                            v0.copy(
                                (shape as CANNON.Heightfield).pillarConvex
                                    .vertices[0]
                            )
                            v1.copy(
                                (shape as CANNON.Heightfield).pillarConvex
                                    .vertices[1]
                            )
                            v2.copy(
                                (shape as CANNON.Heightfield).pillarConvex
                                    .vertices[2]
                            )
                            v0.vadd(
                                (shape as CANNON.Heightfield).pillarOffset,
                                v0
                            )
                            v1.vadd(
                                (shape as CANNON.Heightfield).pillarOffset,
                                v1
                            )
                            v2.vadd(
                                (shape as CANNON.Heightfield).pillarOffset,
                                v2
                            )
                            points.push(
                                new THREE.Vector3(v0.x, v0.y, v0.z),
                                new THREE.Vector3(v1.x, v1.y, v1.z),
                                new THREE.Vector3(v2.x, v2.y, v2.z)
                            )
                            //const i = geometry.vertices.length - 3
                            //geometry.faces.push(new THREE.Face3(i, i + 1, i + 2))
                        }
                    }
                }
                geometry.setFromPoints(points)
                //geometry.computeBoundingSphere()
                //geometry.computeFaceNormals()
                mesh = new THREE.Mesh(geometry, material)
                shape.id = geometry.id
                break
            default:
                mesh = new THREE.Mesh()
                break
        }

        if (mesh && mesh.geometry) {
            this.scene.add(mesh)
        }

        return mesh
    }

    private _scaleMesh(mesh: THREE.Mesh | THREE.Points, shape: CANNON.Shape) {
        let radius: number
        let halfExtents: CANNON.Vec3
        let scale: CANNON.Vec3

        switch (shape.type) {
            case CANNON.Shape.types.SPHERE:
                radius = (shape as CANNON.Sphere).radius
                mesh.scale.set(radius, radius, radius)
                break

            case CANNON.Shape.types.BOX:
                halfExtents = (shape as CANNON.Box).halfExtents
                mesh.scale.copy(
                    new THREE.Vector3(
                        halfExtents.x,
                        halfExtents.y,
                        halfExtents.z
                    )
                )
                mesh.scale.multiplyScalar(2)
                break

            case CANNON.Shape.types.CONVEXPOLYHEDRON:
                mesh.scale.set(1, 1, 1)
                break

            case CANNON.Shape.types.TRIMESH:
                scale = (shape as CANNON.Trimesh).scale
                mesh.scale.copy(new THREE.Vector3(scale.x, scale.y, scale.z))
                break

            case CANNON.Shape.types.HEIGHTFIELD:
                mesh.scale.set(1, 1, 1)
                break
        }
    }
}

Final Script

./src/client/client.ts

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'dat.gui'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import * as CANNON from 'cannon-es'
import CannonUtils from './utils/cannonUtils'
import CannonDebugRenderer from './utils/cannonDebugRenderer'

const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))

const light1 = new THREE.SpotLight()
light1.position.set(2.5, 5, 5)
light1.angle = Math.PI / 4
light1.penumbra = 0.5
light1.castShadow = true
light1.shadow.mapSize.width = 1024
light1.shadow.mapSize.height = 1024
light1.shadow.camera.near = 0.5
light1.shadow.camera.far = 20
scene.add(light1)

const light2 = new THREE.SpotLight()
light2.position.set(-2.5, 5, 5)
light2.angle = Math.PI / 4
light2.penumbra = 0.5
light2.castShadow = true
light2.shadow.mapSize.width = 1024
light2.shadow.mapSize.height = 1024
light2.shadow.camera.near = 0.5
light2.shadow.camera.far = 20
scene.add(light2)

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.set(0, 3, 6)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.target.y = 0.5

const world = new CANNON.World()
world.gravity.set(0, -9.82, 0)
// world.broadphase = new CANNON.NaiveBroadphase()
// ;(world.solver as CANNON.GSSolver).iterations = 10
// world.allowSleep = true

const normalMaterial = new THREE.MeshNormalMaterial()
const phongMaterial = new THREE.MeshPhongMaterial()

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMesh = new THREE.Mesh(cubeGeometry, normalMaterial)
cubeMesh.position.x = -4
cubeMesh.position.y = 3
cubeMesh.castShadow = true
scene.add(cubeMesh)
const cubeShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5))
const cubeBody = new CANNON.Body({ mass: 1 })
cubeBody.addShape(cubeShape)
cubeBody.position.x = cubeMesh.position.x
cubeBody.position.y = cubeMesh.position.y
cubeBody.position.z = cubeMesh.position.z
world.addBody(cubeBody)

const sphereGeometry = new THREE.SphereGeometry()
const sphereMesh = new THREE.Mesh(sphereGeometry, normalMaterial)
sphereMesh.position.x = -2
sphereMesh.position.y = 3
sphereMesh.castShadow = true
scene.add(sphereMesh)
const sphereShape = new CANNON.Sphere(1)
const sphereBody = new CANNON.Body({ mass: 1 })
sphereBody.addShape(sphereShape)
sphereBody.position.x = sphereMesh.position.x
sphereBody.position.y = sphereMesh.position.y
sphereBody.position.z = sphereMesh.position.z
world.addBody(sphereBody)

const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 8)
const cylinderMesh = new THREE.Mesh(cylinderGeometry, normalMaterial)
cylinderMesh.position.x = 0
cylinderMesh.position.y = 3
cylinderMesh.castShadow = true
scene.add(cylinderMesh)
const cylinderShape = new CANNON.Cylinder(1, 1, 2, 8)
const cylinderBody = new CANNON.Body({ mass: 1 })
cylinderBody.addShape(cylinderShape, new CANNON.Vec3())
cylinderBody.position.x = cylinderMesh.position.x
cylinderBody.position.y = cylinderMesh.position.y
cylinderBody.position.z = cylinderMesh.position.z
world.addBody(cylinderBody)

const icosahedronGeometry = new THREE.IcosahedronGeometry(1, 0)
const icosahedronMesh = new THREE.Mesh(icosahedronGeometry, normalMaterial)
icosahedronMesh.position.x = 2
icosahedronMesh.position.y = 3
icosahedronMesh.castShadow = true
scene.add(icosahedronMesh)
const icosahedronShape = CannonUtils.CreateConvexPolyhedron(
    icosahedronMesh.geometry
)
const icosahedronBody = new CANNON.Body({ mass: 1 })
icosahedronBody.addShape(icosahedronShape)
icosahedronBody.position.x = icosahedronMesh.position.x
icosahedronBody.position.y = icosahedronMesh.position.y
icosahedronBody.position.z = icosahedronMesh.position.z
world.addBody(icosahedronBody)

const torusKnotGeometry = new THREE.TorusKnotGeometry()
const torusKnotMesh = new THREE.Mesh(torusKnotGeometry, normalMaterial)
torusKnotMesh.position.x = 4
torusKnotMesh.position.y = 3
torusKnotMesh.castShadow = true
scene.add(torusKnotMesh)
const torusKnotShape = CannonUtils.CreateTrimesh(torusKnotMesh.geometry)
const torusKnotBody = new CANNON.Body({ mass: 1 })
torusKnotBody.addShape(torusKnotShape)
torusKnotBody.position.x = torusKnotMesh.position.x
torusKnotBody.position.y = torusKnotMesh.position.y
torusKnotBody.position.z = torusKnotMesh.position.z
world.addBody(torusKnotBody)

let monkeyMesh: THREE.Object3D
let monkeyBody: CANNON.Body
let monkeyLoaded = false
const objLoader = new OBJLoader()
objLoader.load(
    'models/monkey.obj',
    (object) => {
        scene.add(object)
        monkeyMesh = object.children[0]
        ;(monkeyMesh as THREE.Mesh).material = normalMaterial
        monkeyMesh.position.x = -2
        monkeyMesh.position.y = 20
        // const monkeyShape = CannonUtils.CreateTrimesh(
        //     (monkeyMesh as THREE.Mesh).geometry
        // )
        // const monkeyShape = CannonUtils.CreateConvexPolyhedron(
        //     (monkeyMesh as THREE.Mesh).geometry
        // )
        monkeyBody = new CANNON.Body({ mass: 1 })
        // monkeyBody.addShape(monkeyShape)
        // monkeyBody.addShape(cubeShape)
        // monkeyBody.addShape(sphereShape)
        // monkeyBody.addShape(cylinderShape)
        monkeyBody.addShape(icosahedronShape)
        // monkeyBody.addShape(new CANNON.Plane())
        // monkeyBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), Math.PI / 2)
        monkeyBody.position.x = monkeyMesh.position.x
        monkeyBody.position.y = monkeyMesh.position.y
        monkeyBody.position.z = monkeyMesh.position.z
        world.addBody(monkeyBody)
        monkeyLoaded = true
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
    },
    (error) => {
        console.log('An error happened')
    }
)

const planeGeometry = new THREE.PlaneGeometry(25, 25)
const planeMesh = new THREE.Mesh(planeGeometry, phongMaterial)
planeMesh.position.y = -0.01
planeMesh.rotateX(-Math.PI / 2)
planeMesh.receiveShadow = true
scene.add(planeMesh)
const planeShape = new CANNON.Plane()
const planeBody = new CANNON.Body({ mass: 0 })
planeBody.addShape(planeShape)
planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2)
world.addBody(planeBody)

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

const stats = new Stats()
document.body.appendChild(stats.dom)

const gui = new GUI()
const physicsFolder = gui.addFolder('Physics')
physicsFolder.add(world.gravity, 'x', -10.0, 10.0, 0.1)
physicsFolder.add(world.gravity, 'y', -10.0, 10.0, 0.1)
physicsFolder.add(world.gravity, 'z', -10.0, 10.0, 0.1)
physicsFolder.open()

const clock = new THREE.Clock()
let delta

const cannonDebugRenderer = new CannonDebugRenderer(scene, world)

function animate() {
    requestAnimationFrame(animate)

    controls.update()

    delta = Math.min(clock.getDelta(), 0.1)
    world.step(delta)

    cannonDebugRenderer.update()

    // Copy coordinates from Cannon to Three.js
    cubeMesh.position.set(
        cubeBody.position.x,
        cubeBody.position.y,
        cubeBody.position.z
    )
    cubeMesh.quaternion.set(
        cubeBody.quaternion.x,
        cubeBody.quaternion.y,
        cubeBody.quaternion.z,
        cubeBody.quaternion.w
    )
    sphereMesh.position.set(
        sphereBody.position.x,
        sphereBody.position.y,
        sphereBody.position.z
    )
    sphereMesh.quaternion.set(
        sphereBody.quaternion.x,
        sphereBody.quaternion.y,
        sphereBody.quaternion.z,
        sphereBody.quaternion.w
    )
    cylinderMesh.position.set(
        cylinderBody.position.x,
        cylinderBody.position.y,
        cylinderBody.position.z
    )
    cylinderMesh.quaternion.set(
        cylinderBody.quaternion.x,
        cylinderBody.quaternion.y,
        cylinderBody.quaternion.z,
        cylinderBody.quaternion.w
    )
    icosahedronMesh.position.set(
        icosahedronBody.position.x,
        icosahedronBody.position.y,
        icosahedronBody.position.z
    )
    icosahedronMesh.quaternion.set(
        icosahedronBody.quaternion.x,
        icosahedronBody.quaternion.y,
        icosahedronBody.quaternion.z,
        icosahedronBody.quaternion.w
    )
    torusKnotMesh.position.set(
        torusKnotBody.position.x,
        torusKnotBody.position.y,
        torusKnotBody.position.z
    )
    torusKnotMesh.quaternion.set(
        torusKnotBody.quaternion.x,
        torusKnotBody.quaternion.y,
        torusKnotBody.quaternion.z,
        torusKnotBody.quaternion.w
    )
    if (monkeyLoaded) {
        monkeyMesh.position.set(
            monkeyBody.position.x,
            monkeyBody.position.y,
            monkeyBody.position.z
        )
        monkeyMesh.quaternion.set(
            monkeyBody.quaternion.x,
            monkeyBody.quaternion.y,
            monkeyBody.quaternion.z,
            monkeyBody.quaternion.w
        )
    }

    render()

    stats.update()
}

function render() {
    renderer.render(scene, camera)
}

animate()

Useful Links

Supported Cannon.js Shape Collisions

TypeScript Module Resolution

React Three Fiber Version