目录
- 说在前面
- setAgentTarget
- 绘制寻路路径
- 结果
- 问题
- 其他
说在前面
- 操作系统:windows 11
- 浏览器:edge版本 124.0.2478.97
- recast-navigation-js版本:0.29.0
- golang版本:1.21.5
- 上一篇:【recast-navigation-js】使用three.js辅助绘制Agent
setAgentTarget
- 使用
recast navigation
接口requestMoveTarget
设置agent
的目标位置public setAgentTarget(pos: Vector3) { const { point: target } = this._meshQuery.findClosestPoint(pos); this._agent.requestMoveTarget(target); this._agentTarget = new Vector3().copy(target as Vector3) }
绘制寻路路径
- 使用
three.js
中的Line
绘制寻路路径private _updatePath(scene: Scene) { if (!this._agentTarget) { return } const path = []//[this._agent.position(), ...this._agent.corners()]; path.push(new Vector3().set(this._agent.position().x, this._agent.position().y, this._agent.position().z)) this._agent.corners().forEach((v) => { path.push(new Vector3().set(v.x, v.y, v.z)) }) if (path.length <= 1) { return } const spline = new CatmullRomCurve3(path); const samples = spline.getPoints(path.length * 12); const geometrySpline = new BufferGeometry().setFromPoints(samples); const line = new Line(geometrySpline, new LineDashedMaterial({ color: 0x66ccff, dashSize: 1, gapSize: 0.5 })); line.computeLineDistances(); if (this.crowdPathLine) { scene.remove(this.crowdPathLine) } this.crowdPathLine = line scene.add(line) }
CatmullRomCurve3
给定输入点,创建相对平滑的曲线(实际上可以不用这个,使用实际的寻路关键点更能反映寻路结果)LineDashedMaterial
虚线材质- update,每帧重新绘制寻路路径
public update(delta: number, scene: Scene) { this._crowd.update(delta) this.crowdHelper.update() this._updatePath(scene) }
结果
- 鼠标右键设置agent起始位置
- 鼠标左键设置agent目标位置
问题
- 最开始使用Teleport方法设置agent起点的时候,发现有些地方不太对,比如点击下图红色位置传送不过去
寻路也不对
- 后来发现是创建
DebugDrawer
的时候自己把它的位置做了下偏移const tmpDebugDrawer = new DebugDrawer(); tmpDebugDrawer.drawNavMesh(mesh); tmpDebugDrawer.position.z += 10
- 导致实际点击得到的位置也有一定的偏移,所以在传给
recastnavigation
使用的时候需要将这个偏移去掉,或者在创建的时候不要加偏移
其他
- 完整代码再等等