【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使用的时候需要将这个偏移去掉,或者在创建的时候不要加偏移

其他

  • 完整代码再等等
相关推荐
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜2 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
艾小码2 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了12 小时前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码2 小时前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰2 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba2 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
小帆聊前端2 小时前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript
子兮曰2 小时前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
召摇2 小时前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js