0 前言

本文是“初见物理引擎库Cannon.js”系列的第三篇文章，在本文中主要讲解CannonDebugRenderer的基本使用方法。

1 CannonDebugRenderer简介

CannonDebugRenderer能够在Cannon.js的物体表面生成线框，用于对物理场景中的物体进行调试，如下图所示：

在Three.js中可以为材质添加wireframe属性，为Mesh提供线框材质：

new THREE.MeshPhongMaterial({
  color: 0x00ff00,
  wireframe: true, // 材质线框
}),
1
2
3
4

不同于Three.js中的材质线框，CannonDebugRenderer所绘制的线框是基于Cannon.js物体的。

2 在线地址

[ Live Demo ]：Cannon.js - debug (syzdev.cn)

3 使用方法

3.1 引入CannonDebugRenderer

3.1.1 CDN引入

<script src="https://cdn.jsdelivr.net/npm/cannon@0.6.2/tools/threejs/CannonDebugRenderer.js">script>
1

3.1.2 NPM引入

由于原作者并未提供NPM的引入方式，因此暂时只能使用基于cannon-es的cannon-es-debugger。

npm i cannon-es-debugger
1

使用方式与CDN引入略有不同，具体可查阅cannon-es-debugger的API文档。

3.2 初始化

以CDN引入为例，首先需要初始化一个cannonDebugger对象，需要传入两个参数：

1. Three.js的场景对象scene；
2. Cannon.js的物理世界对象world。

const cannonDebugger = new THREE.CannonDebugRenderer(three.scene, cannon.world)
1

3.3 更新场景

在render方法中添加cannonDebugger.update()：

const render = () => {
  // ...
  requestAnimationFrame(render)
  cannonDebugger.update()
  three.renderer.render(three.scene, three.camera)
  // ...
}
1
2
3
4
5
6
7