【recast-navigation-js】使用three.js辅助绘制Agent寻路路径

目录

说在前面

setAgentTarget

  • 使用recast navigation接口requestMoveTarget设置agent的目标位置

    typescript 复制代码
    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绘制寻路路径

    typescript 复制代码
    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,每帧重新绘制寻路路径

    typescript 复制代码
    public update(delta: number, scene: Scene) {
        this._crowd.update(delta)
        this.crowdHelper.update()
        this._updatePath(scene)
    }

结果

  • 鼠标右键设置agent起始位置
  • 鼠标左键设置agent目标位置

问题

  • 最开始使用Teleport方法设置agent起点的时候,发现有些地方不太对,比如点击下图红色位置传送不过去

    寻路也不对

  • 后来发现是创建DebugDrawer的时候自己把它的位置做了下偏移

    typescript 复制代码
    const tmpDebugDrawer = new DebugDrawer();
        tmpDebugDrawer.drawNavMesh(mesh);
        tmpDebugDrawer.position.z += 10
  • 导致实际点击得到的位置也有一定的偏移,所以在传给recastnavigation使用的时候需要将这个偏移去掉,或者在创建的时候不要加偏移

其他

  • 完整代码再等等
相关推荐
Mintopia6 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙6 分钟前
JS设计模式指南
前端·javascript
Mintopia13 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人19 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom22 分钟前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
鹏多多25 分钟前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
吃饺子不吃馅1 小时前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
mCell9 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip9 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript