我在开发大富翁游戏中,希望骰子能跟现实一样投掷,因为three.js中并没有物理引擎的引入,所以我需要引入cannon.js
cannon.js属于一个轻量级引擎,对cpu的性能要求比较低,非常适合放在web游戏中使用.
简单记录一下cannon.js使用过程中的要点,以便后面查阅.
大富翁源码地址:https://github.com/aoobao/backpacker
cannon.js 文档地址: https://schteppe.github.io/cannon.js
创建物理引擎世界
this.world = new CANNON.World()
this.world.gravity.set(0, 0, -9.8 * 70) // 重力加速度设置 这里乘以70是因为之前创建的物体设置的比较大,所以需要加大重力加速度矫正
创建刚体
// 设置材质 这里设置了地面,墙壁,骰子三种材质
const cubeMaterial = new CANNON.Material('cube')
const material = new CANNON.Material('ground')
const wallMaterial = new CANNON.Material('wall')
// 地面
const bodyGround = new CANNON.Body({
mass: 0,
position: new CANNON.Vec3(0, 0, 0.1),
shape: new CANNON.Plane(),
material: material,
})
const wall1 = new CANNON.Body({
mass: 0,
position: new CANNON.Vec3(WIDTH / 2, 0, 0),
shape: new CANNON.Plane(),
material: wallMaterial,
})
wall1.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), -Math.PI / 2)
// 注意CANNON.Plane底部是包含材质的,并不是只有一个平面,假设 position: new CANNON.Vec3(0, 0, 0), 那么z方向<0的都是存在材质,物体如果在z方向<0 会被挤到上来,在z+方向有一个力
// 设置两个材质之间的参数值,因为我不希望骰子斜靠在墙上,所以墙壁和骰子的摩擦力设置成了0.
const groundContactMaterial = new CANNON.ContactMaterial(material, cubeMaterial, {
friction: 0.1, // 摩擦力
restitution: 0.5, // 弹性
})
const wallContactMaterial = new CANNON.ContactMaterial(wallMaterial, cubeMaterial, {
friction: 0,
restitution: 1,
})
创建骰子,并给予初速度及角速度
addBox(cube: Cube, speed = 1) {
return new Promise<void>((resolve, reject) => {
const pos = cube.instance.position
const qua = cube.instance.quaternion
const size = cube.size
const halfExtents = new CANNON.Vec3(size / 2, size / 2, size / 2)
const bodyBox = new CANNON.Body({
mass: 5,
position: new CANNON.Vec3(pos.x, pos.y, pos.z),
shape: new CANNON.Box(halfExtents),
quaternion: new CANNON.Quaternion(qua.x, qua.y, qua.z, qua.w),
linearDamping: 0.01,
angularDamping: 0.05,
material: cubeMaterial,
})
const x = 500 * speed * randPM()
const y = 500 * speed * randPM()
const z = 300 + 300 * speed
bodyBox.velocity.set(x, y, z)
bodyBox.angularVelocity.set(rendAngular(), rendAngular(), (50 + 50 * Math.random()) * randPM())
function rendAngular() {
return (10 + 10 * Math.random()) * randPM()
}
const box: PhysicsBody = {
type: 'cube',
cube,
bodyBox,
resolve,
reject,
timer: new Date().getTime(),
}
this.world.addBody(bodyBox)
this.bodyList.push(box)
})
}每帧渲染的时候更新计算
// updatePhysics
render(res: any) {
const delta = res.delta as number
if (delta) {
// console.log(delta)
this.world.step(fixedTimeStep, delta, maxSubSteps)
for (let i = this.bodyList.length - 1; i >= 0; i--) {
const box = this.bodyList[i]
// 将物理引擎中的计算值同步到threejs中的对象中(position,quaternion),并判断CANNON.Body的速度和角速度是否低于某个阈值,
// 如果低于阈值后,则可以认为骰子已经停止运动了,可以读取骰子的朝向及点数值了.
if (this.syncInstanceValue(box)) {
this.bodyList.splice(i, 1)
// 延迟去除,多个骰子
setTimeout(() => {
this.world.remove(box.bodyBox)
}, 5000)
box.resolve()
}
}
}
}