Cannon Debug Renderer

Tip

This course was updated in 2024. For the newer content, please visit Rapier 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(0xffffff, 100)
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(0xffffff, 100)
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
    } else {
      vertices = (geometry.clone().toNonIndexed().attributes.position as THREE.BufferAttribute).array
    }
    const indices = Object.keys(vertices).map(Number)
    return new CANNON.Trimesh(vertices as unknown as number[], 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: CANNON.Vec3) {
      centreOfMass.vadd(offset, centreOfMass)
    })
    centreOfMass.scale(1 / body.shapes.length, centreOfMass)
    body.shapeOffsets.forEach(function (offset: CANNON.Vec3) {
      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(0xffffff, 100)
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(0xffffff, 100)
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

Comments