簡介一套面向WebGL與前端開發(fā)者的three.js算法尋路綜合示例結(jié)合Vue框架搭建可交互的3D場景演示A算法與DFS/BFS遍歷在路徑規(guī)劃中的表現(xiàn)適用于游戲開發(fā)、VR/AR項(xiàng)目中的尋路技術(shù)驗(yàn)證與學(xué)習(xí)。壓縮包共71個(gè)文件其中22個(gè)PNG、16個(gè)SVG、11個(gè)JPG主要承擔(dān)紋理素材與界面圖標(biāo)8個(gè)JS文件與5個(gè)Vue組件負(fù)責(zé)三維邏輯和交互界面另有說明文檔、樣式文件等整體大小約3.56MB結(jié)構(gòu)清晰方便直接運(yùn)行或二次修改。目前已有778人學(xué)習(xí)下載。通過該示例可以掌握three.js構(gòu)建含障礙物的三維場景、Vue管理界面狀態(tài)并讓用戶自由切換算法理解A算法如何結(jié)合啟發(fā)函數(shù)在3D空間中尋找最優(yōu)路徑亦可對照DFS/BFS輸出區(qū)別不同搜索策略的耗時(shí)與路徑質(zhì)量適合希望快速上手WebGL尋路實(shí)戰(zhàn)并兼顧前端工程化細(xì)節(jié)的開發(fā)者。1. three.js 算法尋路示例先讓角色找到路再談走得好不好剛寫完角色移動(dòng)控制的那個(gè)晚上我把速度拉滿想試手感結(jié)果 NPC 一頭撞在墻上推都推不開。前后找了一小時(shí)最后發(fā)現(xiàn)是轉(zhuǎn)向邏輯里少判斷了一步。這是做 three.js 算法尋路示例時(shí)的常態(tài)模型會(huì)跑不會(huì)找路。真正能落地的方案不是去調(diào)大量轉(zhuǎn)向邏輯而是把尋路從 3D 空間降維成 2D 問題用規(guī)則網(wǎng)格表示地圖可走性用 A* 求出路徑點(diǎn)再讓角色沿著路徑點(diǎn)移動(dòng)。接下來按這條路線我給出一份可直接照做的 three.js 實(shí)現(xiàn)覆蓋選型、代碼和避坑適合剛把 three.js 基礎(chǔ)跑通、想讓 NPC 或玩家角色自動(dòng)找路的開發(fā)者。2. 為什么先用 2D 網(wǎng)格尋路three.js 里的算法選型與降維思路2.1 三種地圖表示對比網(wǎng)格搜索、導(dǎo)航網(wǎng)格與路點(diǎn)圖在開始敲代碼前先明確一件事three.js 本身不提供尋路能力它只負(fù)責(zé)渲染。尋路要在它外面算好路徑再把路徑數(shù)據(jù)喂給場景里的對象。最常見的三種做法是規(guī)則網(wǎng)格搜索、導(dǎo)航網(wǎng)格和路點(diǎn)圖。網(wǎng)格搜索是把地面切成等大的格子每個(gè)格子標(biāo)記可走或不可走然后跑圖搜索算法導(dǎo)航網(wǎng)格是用凸多邊形把可走區(qū)域包裹起來在這些多邊形上做圖搜索路點(diǎn)圖則是手工在場景里放若干個(gè)路標(biāo)點(diǎn)連成圖再搜索。三種方式的選擇直接決定后面開發(fā)量參考對比如下對比維度網(wǎng)格搜索導(dǎo)航網(wǎng)格路點(diǎn)圖three.js 落地難度最低網(wǎng)格可直接對應(yīng)數(shù)組中等需要生成和烘焙最低路徑質(zhì)量折線需要平滑貼合地形平滑度高取決于路點(diǎn)密度動(dòng)態(tài)障礙處理需要更新網(wǎng)格數(shù)據(jù)需要更新導(dǎo)航網(wǎng)格難以動(dòng)態(tài)處理適用場景中小型固定地圖大型復(fù)雜地形簡單原型演示如果你的項(xiàng)目是中小場景、障礙物數(shù)量可控我建議先用網(wǎng)格搜索把主流程跑通。這是多數(shù) three.js 尋路項(xiàng)目的起步方案也是本文后面代碼采用的方式。導(dǎo)航網(wǎng)格質(zhì)量更高但它引入的生成工具鏈、離線烘焙和動(dòng)態(tài)維護(hù)復(fù)雜度對初版來說負(fù)擔(dān)不小。把網(wǎng)格搜索做好以后換導(dǎo)航網(wǎng)格也容易因?yàn)?A* 搜索邏輯可以復(fù)用。網(wǎng)上討論時(shí)很多人把「導(dǎo)航網(wǎng)格」和「尋路算法」混為一談其實(shí)它們是兩件事導(dǎo)航網(wǎng)格是地圖的數(shù)據(jù)結(jié)構(gòu)A* 是跑在這個(gè)圖上的搜索算法。理解這一點(diǎn)再看各種資料會(huì)順很多。2.2 降維到 XZ 平面對 three.js 意味著什么three.js 世界坐標(biāo)里 Y 軸朝上地面上的普通尋路只關(guān)心水平方向的移動(dòng)。把三維坐標(biāo)直接放進(jìn) A* 是很吃虧的搜索空間從二維多出一層 Y 方向維度路徑會(huì)繞到空中而且計(jì)算量成倍增加。所以常規(guī)做法是尋路計(jì)算限制在 XZ 平面算完后把網(wǎng)格坐標(biāo)恢復(fù)成 Y0或通過高度采樣得到真實(shí) Y 值的世界坐標(biāo)。這里有個(gè)容易被忽視的細(xì)節(jié)場景地形如果是起伏的不能直接把 Y 設(shè)成 0否則角色會(huì)走進(jìn)地面。我一般會(huì)在路徑生成后做一次高度采樣// 從地形幾何中采樣 Y 值 function getHeightAt(x, z) { const raycaster new THREE.Raycaster(); raycaster.set(new THREE.Vector3(x, 100, z), new THREE.Vector3(0, -1, 0)); const hit raycaster.intersectObject(terrainMesh); return hit.length ? hit[0].point.y : 0; }這段代碼把射線從高空垂直向下打取第一個(gè)交點(diǎn)作為地面高度。這樣網(wǎng)格尋路只管 XZ最后再把 Y 填上既保留算法效率又適配了起伏地形。多層建筑的做法是拆成多個(gè)水平層每層一張獨(dú)立的 XZ 網(wǎng)格層間用樓梯或電梯點(diǎn)銜接。新手最常見的翻車是把樓板和樓梯全部丟進(jìn)一個(gè)三維網(wǎng)格里搜出來的路徑又慢又怪我見過某個(gè)項(xiàng)目把三維網(wǎng)格邊長調(diào)到 0.1尋路一次要半秒完全無法實(shí)時(shí)使用。2.3 定參數(shù)再寫代碼網(wǎng)格邊長、鄰域、啟發(fā)式與移動(dòng)代價(jià)這四個(gè)參數(shù)決定尋路效率和路徑質(zhì)量建議在寫代碼前就定好。網(wǎng)格邊長單位是 three.js 場景坐標(biāo)。常見初始值是 0.5 或 1。邊長越小路徑越精細(xì)但格子數(shù)量按平方增長A* 的開銷也隨之變大。0.25 以下的邊長適合幾十米范圍的小場景超過 100 米的地圖就建議緩存或換導(dǎo)航網(wǎng)格。做示例時(shí) 0.5 是平衡點(diǎn)障礙物邊界誤差在可接受范圍內(nèi)10×10 的場景只有 400 個(gè)格子A* 跑一次幾乎無感。鄰域4 鄰域只允許上下左右走路徑簡單無斜穿但看起來生硬8 鄰域允許斜向路徑更自然代價(jià)是允許對角穿墻后面避坑章節(jié)會(huì)補(bǔ)判斷。真實(shí)項(xiàng)目里超過 90% 會(huì)選 8 鄰域因?yàn)榻巧敝吒鲿?。啟發(fā)函數(shù)4 鄰域選曼哈頓距離8 鄰域選切比雪夫或歐幾里得距離。啟發(fā)必須小于等于真實(shí)代價(jià)否則尋路會(huì)退化成貪心路徑明顯變差。移動(dòng)代價(jià)正交移動(dòng)為 1斜向?yàn)镸ath.SQRT2約 1.414。不區(qū)分會(huì)讓路徑走向發(fā)飄搜索順序也不穩(wěn)定。完成這些參數(shù)設(shè)置后就可以進(jìn)入代碼了。常見做法是先寫一個(gè)純 JavaScript 的 A* 模塊它完全不知道 three.js 存在再寫坐標(biāo)轉(zhuǎn)換層把網(wǎng)格路徑換算成世界坐標(biāo)。兩者分開后算法單元測試好寫網(wǎng)格邏輯出錯(cuò)能立刻定位。我一般把 A* 放在astar.js把 three.js 初始化和動(dòng)畫放在主文件這樣數(shù)據(jù)與渲染解耦后面換導(dǎo)航網(wǎng)格也不用重寫核心算法。3. 搭建 three.js 尋路場景從空場景到可走性網(wǎng)格數(shù)據(jù)3.1 初始化場景和軌道控制器調(diào)試視角怎么搭先寫一個(gè)最基礎(chǔ)的三維場景固定好一個(gè)便于觀察的初始視角。import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; let scene, camera, renderer, controls; function initScene() { scene new THREE.Scene(); scene.background new THREE.Color(0x222222); camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); camera.position.set(14, 10, 14); camera.lookAt(0, 0, 0); renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); controls new OrbitControls(camera, renderer.domElement); controls.target.set(0, 0, 0); const ambient new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambient); const dir new THREE.DirectionalLight(0xffffff, 0.8); dir.position.set(5, 10, 7); scene.add(dir); // 網(wǎng)格輔助線方便核對格子的實(shí)際邊界 const gridHelper new THREE.GridHelper(20, 40, 0xcccccc, 0x555555); scene.add(gridHelper); renderer.setAnimationLoop(animate); } function animate() { controls.update(); renderer.render(scene, camera); } initScene();邏輯說明固定初始視角加軌道控制器的目的是為了在調(diào)試時(shí)隨時(shí)旋轉(zhuǎn)觀察路徑點(diǎn)與障礙物的貼合程度。GridHelper把地面按每格 0.5 單位畫出網(wǎng)格線正好對應(yīng)我們后面設(shè)定的網(wǎng)格邊長 0.5能直觀看出「格子」與「障礙物」的邊界關(guān)系。燈光用環(huán)境光加方向光組合避免場景過暗影響判斷。setAnimationLoop比requestAnimationFrame更適合 WebXR 和需要幀率控制的場景。參數(shù)說明camera.position.set(14, 10, 14)讓相機(jī)位于場景對角線上方透視效果能同時(shí)看到 X 和 Z 兩個(gè)方向的延伸。GridHelper(20, 40)表示總長 20每邊 40 格。如果后面把網(wǎng)格邊長改成 1輔助線的分割數(shù)也要改成 20否則看不出格子邊界調(diào)試會(huì)非常吃力。3.2 生成障礙物與包圍盒把場景對象變成尋路數(shù)據(jù)尋路邏輯其實(shí)不關(guān)心渲染它只關(guān)心「哪里能走」。障礙物的 Box3 包圍盒就是最直接的攔路數(shù)據(jù)。// 記錄所有動(dòng)態(tài)障礙物 const obstacles []; function createBoxObstacle(x, z, w, h, d) { const geo new THREE.BoxGeometry(w, h, d); const mat new THREE.MeshStandardMaterial({ color: 0xcc5522, roughness: 0.7 }); const mesh new THREE.Mesh(geo, mat); mesh.position.set(x, h / 2, z); // 底部貼地 scene.add(mesh); // 統(tǒng)一保存包圍盒后續(xù)網(wǎng)格標(biāo)記直接用 mesh.userData.bounds new THREE.Box3().setFromObject(mesh); obstacles.push(mesh); // 調(diào)試畫出包圍盒確認(rèn)阻擋范圍 const boxHelper new THREE.BoxHelper(mesh, 0xffaa00); scene.add(boxHelper); return mesh; } // 示例場景三堵墻和一個(gè)方塊 createBoxObstacle(-2, -1, 4, 1.5, 0.6); createBoxObstacle(1, 2, 0.6, 1.5, 3); createBoxObstacle(4, 0, 2, 1, 2);邏輯說明BoxHelper會(huì)繪制障礙物的包圍盒線框。A* 尋路不需要場景對象只需要每個(gè)障礙物在 XZ 平面的投影范圍。我把包圍盒存進(jìn)userData.bounds生成網(wǎng)格時(shí)就不用遍歷場景里所有 Object3D只遍歷這個(gè)obstacles數(shù)組即可。參數(shù)說明h / 2是因?yàn)锽oxGeometry的中心在幾何體中心要讓底部貼地必須把 Y 上移半高。障礙物數(shù)量少時(shí)逐個(gè)創(chuàng)建完全夠用如果場景里有幾百個(gè)障礙建議直接用一個(gè)數(shù)組保存包圍盒數(shù)據(jù)跳過 Mesh 創(chuàng)建因?yàn)閷ぢ凡魂P(guān)心渲染層這樣能省掉大量 GPU 內(nèi)存占用。3.3 生成二維網(wǎng)格把障礙物投影到可走性數(shù)組現(xiàn)在把場景地圖拆成一個(gè)二維數(shù)組。數(shù)組的行對應(yīng) Z 方向列對應(yīng) X 方向值 1 表示障礙。const GRID_SIZE 0.5; // 每格邊長 const MAP_WIDTH 10; // X 方向范圍 const MAP_DEPTH 10; // Z 方向范圍 const GRID_COLS Math.ceil(MAP_WIDTH / GRID_SIZE); const GRID_ROWS Math.ceil(MAP_DEPTH / GRID_SIZE); // walkableGrid[row][col]1 表示障礙物0 表示可走 const walkableGrid Array.from({ length: GRID_ROWS }, () Array.from({ length: GRID_COLS }, () 0) ); function buildWalkableGrid() { for (let r 0; r GRID_ROWS; r) { for (let c 0; c GRID_COLS; c) { walkableGrid[r][c] 0; // 重置 const x c * GRID_SIZE GRID_SIZE / 2 - MAP_WIDTH / 2; const z r * GRID_SIZE GRID_SIZE / 2 - MAP_DEPTH / 2; const testPoint new THREE.Vector3(x, 0, z); for (const obstacle of obstacles) { const b obstacle.userData.bounds; // 包圍盒投影到 XZ 平面只看水平范圍 if (x b.min.x x b.max.x z b.min.z z b.max.z) { walkableGrid[r][c] 1; break; } } } } } buildWalkableGrid();邏輯說明這里取格子中心點(diǎn)判斷它是否落在障礙物包圍盒的水平投影范圍內(nèi)。行號對應(yīng) Z、列號對應(yīng) X是因?yàn)閟etFromObject返回的 Box3 是世界坐標(biāo)。后續(xù)我們把網(wǎng)格坐標(biāo)轉(zhuǎn)回世界坐標(biāo)時(shí)必須按同一套約定否則路徑會(huì)橫向反轉(zhuǎn)或前后來回錯(cuò)亂。參數(shù)說明GRID_SIZE是尋路的空間分辨率它必須和障礙物最小厚度匹配。如果墻厚 0.6 而網(wǎng)格邊長是 0.5格子中心可能落在墻外 0.3 的位置導(dǎo)致角色走到墻和障礙之間的夾縫里。安全做法是讓GRID_SIZE小于等于障礙物最小厚度的一半或者判斷時(shí)把包圍盒向外擴(kuò)半格。我在避坑章節(jié)會(huì)詳細(xì)展開這里先知道有這個(gè)隱患就好。4. 在 three.js 里實(shí)現(xiàn) A* 并驅(qū)動(dòng)角色移動(dòng)4.1 純 JavaScript A* 實(shí)現(xiàn)開集合、閉集合與啟發(fā)式A* 模塊不依賴 three.js這樣純算法邏輯可以單獨(dú)測試。代碼里我用開集合存待考察節(jié)點(diǎn)用cameFrom記錄前驅(qū)用gScore和fScore做代價(jià)評估。// astar.js —— 純算法模塊不依賴 three.js function heuristic(a, b) { // 八鄰域使用切比雪夫距離避免高估真實(shí)代價(jià) return Math.max(Math.abs(a.r - b.r), Math.abs(a.c - b.c)); } function aStar(grid, start, end) { const rows grid.length; const cols grid[0].length; const key (r, c) r * cols c; const openSet []; const cameFrom new Map(); const gScore new Map(); const fScore new Map(); gScore.set(key(start.r, start.c), 0); fScore.set(key(start.r, start.c), heuristic(start, end)); openSet.push(start); while (openSet.length 0) { // 每次取 fScore 最小的節(jié)點(diǎn)線性掃描即可 let bestIdx 0; for (let i 1; i openSet.length; i) { if (fScore.get(key(openSet[i].r, openSet[i].c)) fScore.get(key(openSet[bestIdx].r, openSet[bestIdx].c))) { bestIdx i; } } const current openSet[bestIdx]; openSet.splice(bestIdx, 1); if (current.r end.r current.c end.c) { return reconstructPath(cameFrom, current, cols); } // 八方向鄰居 const dirs [ [1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [1, -1], [-1, 1], [-1, -1], ]; for (const [dr, dc] of dirs) { const nr current.r dr; const nc current.c dc; if (nr 0 || nr rows || nc 0 || nc cols) continue; if (grid[nr][nc] 1) continue; // 障礙不可走 // 八鄰域穿墻檢查斜向移動(dòng)時(shí)拐角兩側(cè)都必須可走 if (dr ! 0 dc ! 0) { if (grid[current.r][nc] 1 || grid[nr][current.c] 1) continue; } const moveCost (dr ! 0 dc ! 0) ? Math.SQRT2 : 1; const tentativeG (gScore.get(key(current.r, current.c)) ?? Infinity) moveCost; const nk key(nr, nc); if (!gScore.has(nk) || tentativeG gScore.get(nk)) { cameFrom.set(nk, current); gScore.set(nk, tentativeG); fScore.set(nk, tentativeG heuristic({ r: nr, c: nc }, end)); if (!openSet.some(n n.r nr n.c nc)) { openSet.push({ r: nr, c: nc }); } } } } return null; // 沒有可達(dá)路徑 } function reconstructPath(cameFrom, current, cols) { const path [current]; let cur current; while (cameFrom.has(cur.r * cols cur.c)) { cur cameFrom.get(cur.r * cols cur.c); path.push(cur); } return path.reverse(); }邏輯說明openSet每次取 fScore 最小的節(jié)點(diǎn)節(jié)點(diǎn)少時(shí)線性掃描完全夠用。cameFrom用 Map 存前驅(qū)鍵是行 * 列數(shù) 列避免把整個(gè)對象當(dāng)鍵造成內(nèi)存浪費(fèi)。八鄰域穿墻檢查是這段代碼里最關(guān)鍵的細(xì)節(jié)從(r, c)斜向(r1, c1)時(shí)必須確認(rèn)(r, c1)和(r1, c)都不是墻否則路徑會(huì)貼著墻角斜切運(yùn)行時(shí)視覺上非常怪。參數(shù)說明Math.SQRT2是內(nèi)置常量保證斜向移動(dòng)代價(jià)為 1.414啟發(fā)函數(shù)用切比雪夫距離在八鄰域下不會(huì)高估真實(shí)代價(jià)搜索方向也會(huì)更偏向目標(biāo)。?? Infinity用于gScore尚未賦值的節(jié)點(diǎn)未探索節(jié)點(diǎn)代價(jià)視為無窮大。如果節(jié)點(diǎn)數(shù)量超過 5000建議把openSet改成二叉堆避免每次線性掃全集合否則單次搜索可能突破幾十毫秒。4.2 網(wǎng)格坐標(biāo)與世界坐標(biāo)互轉(zhuǎn)偏置必須成對出現(xiàn)A* 算出來的結(jié)果是網(wǎng)格行列號喂給 three.js 角色前必須轉(zhuǎn)成世界坐標(biāo)。轉(zhuǎn)換函數(shù)要保證偏移邏輯一致。function worldToGrid(x, z) { const col Math.floor((x MAP_WIDTH / 2) / GRID_SIZE); const row Math.floor((z MAP_DEPTH / 2) / GRID_SIZE); // 防止越界索引直接夾回有效范圍 return { r: Math.min(GRID_ROWS - 1, Math.max(0, row)), c: Math.min(GRID_COLS - 1, Math.max(0, col)), }; } function gridToWorld(row, col) { const x col * GRID_SIZE GRID_SIZE / 2 - MAP_WIDTH / 2; const z row * GRID_SIZE GRID_SIZE / 2 - MAP_DEPTH / 2; // 高度默認(rèn)填 0起伏地形請用 getHeightAt 采樣真實(shí) Y return new THREE.Vector3(x, 0, z); } const start worldToGrid(-2, -3); const end worldToGrid(3, 2); const gridPath aStar(walkableGrid, start, end); const worldPath (gridPath || []).map(p gridToWorld(p.r, p.c));邏輯說明worldToGrid把世界坐標(biāo)平移到地圖中心后除以格子邊長并向下取整。格子中心是col * GRID_SIZE GRID_SIZE / 2起點(diǎn)在-MAP_WIDTH / 2這個(gè)偏置必須同時(shí)出現(xiàn)在正向和反向兩個(gè)函數(shù)里否則路徑會(huì)整體偏移半格看起來就像角色總是貼著障礙物邊緣走。參數(shù)說明worldToGrid里的Math.max(0, row)是防止角色點(diǎn)到地圖外時(shí)出現(xiàn)負(fù)索引。實(shí)際項(xiàng)目中如果不做夾取A* 會(huì)直接越界然后崩潰這個(gè)問題非常隱蔽。gridToWorld的 Y 值默認(rèn)設(shè)為 0如果你的地圖有起伏這里要調(diào)用 2.2 節(jié)的getHeightAt(x, z)去采樣真實(shí)高度。4.3 創(chuàng)建角色并沿路徑移動(dòng)速度與到達(dá)判定有了世界坐標(biāo)路徑還需要一個(gè)占位角色和逐幀移動(dòng)邏輯。// 創(chuàng)建一個(gè)占位角色用圓柱體表示 const player new THREE.Mesh( new THREE.CylinderGeometry(0.3, 0.3, 0.8, 8), new THREE.MeshStandardMaterial({ color: 0x33ccff }) ); player.position.set(-2, 0.4, -3); scene.add(player); let pathIndex 0; const moveSpeed 3; // 場景單位 / 秒 function updatePlayer(playerMesh, pathWorld, delta) { if (pathIndex pathWorld.length) return; const target pathWorld[pathIndex]; const toTarget new THREE.Vector3().subVectors(target, playerMesh.position); const distance toTarget.length(); if (distance 0.05) { // 達(dá)到當(dāng)前目標(biāo)點(diǎn)切換到下一個(gè) pathIndex; } else { const step Math.min(moveSpeed * delta, distance); toTarget.normalize().multiplyScalar(step); playerMesh.position.add(toTarget); playerMesh.lookAt(target); } } const clock new THREE.Clock(); function animate() { const delta clock.getDelta(); updatePlayer(player, worldPath, delta); controls.update(); renderer.render(scene, camera); }邏輯說明updatePlayer向量化的方式是new THREE.Vector3().subVectors(target, position)得到從角色指向目標(biāo)點(diǎn)的向量。用Math.min(moveSpeed * delta, distance)限制單幀移動(dòng)量可以避免角色在高速移動(dòng)時(shí)直接越過路徑點(diǎn)來回?cái)[動(dòng)。lookAt讓角色的正前方朝向目標(biāo)。參數(shù)說明0.05是到達(dá)判定半徑。路徑點(diǎn)密集時(shí)這個(gè)值要調(diào)小否則角色會(huì)在拐彎前提前轉(zhuǎn)向速度越快判定值要適當(dāng)調(diào)大否則角色會(huì)錯(cuò)過目標(biāo)點(diǎn)。clock.getDelta()在setAnimationLoop回調(diào)里獲取是 WebXR 和普通動(dòng)畫循環(huán)都適用的一幀間隔。速度3意味著每秒移動(dòng) 3 個(gè)場景單位在實(shí)際項(xiàng)目里一般會(huì)換算成玩家配置屬性方便調(diào)參。5. 避坑指南three.js 尋路的 5 個(gè)常見問題與排查5.1 網(wǎng)格邊長大于障礙物寬度導(dǎo)致穿?，F(xiàn)象尋路結(jié)果明明繞開了障礙但角色移動(dòng)時(shí)還是卡在墻邊或穿到墻里。原因GRID_SIZE比障礙物厚度還大格子的中心點(diǎn)可能落在障礙物之外但格子的面積同時(shí)覆蓋了障礙物邊緣導(dǎo)致路徑貼著墻走。解決把障礙物包圍盒向外擴(kuò)展半個(gè)格再判斷。最簡單的方式是在buildWalkableGrid里讓b.min.x - GRID_SIZE / 2b.max.x GRID_SIZE / 2Z 方向同理。更嚴(yán)謹(jǐn)?shù)淖龇ㄊ前呀巧霃揭布舆M(jìn)擴(kuò)展量確保角色模型不會(huì)和障礙物產(chǎn)生視覺交叉。5.2 八鄰域未做穿墻檢查路徑斜切墻角現(xiàn)象路徑會(huì)從一個(gè)墻角斜著切過去運(yùn)行時(shí)角色明顯被碰撞擋住但尋路結(jié)果卻一直選這條路。原因八鄰域允許對角移動(dòng)卻沒有檢查拐角兩側(cè)的三個(gè)格子尤其是對角相鄰的兩個(gè)格子。斜向移動(dòng)時(shí)路徑從墻角的頂點(diǎn)穿過去了。解決在擴(kuò)展鄰居時(shí)增加穿墻檢測也就是 4.1 節(jié)代碼里的if (grid[current.r][nc] 1 || grid[nr][current.c] 1) continue。缺少這一步任何八鄰域?qū)ぢ范紩?huì)出現(xiàn)「抄近路」問題。這類問題很多人第一天發(fā)現(xiàn)不了等角色一多就開始穿模屬于最容易翻車的隱藏坑。5.3 路徑點(diǎn)過密角色高頻轉(zhuǎn)向像「抽風(fēng)」現(xiàn)象角色移動(dòng)時(shí)每個(gè)格點(diǎn)都轉(zhuǎn)一次方向視覺上像小步亂戳轉(zhuǎn)彎不自然。原因A* 在網(wǎng)格上輸出的路徑包含大量相鄰格點(diǎn)每個(gè)格點(diǎn)都做了一次轉(zhuǎn)向。格點(diǎn)間距小于角色步長時(shí)轉(zhuǎn)向頻率就非常高。解決對路徑做一次「視線剔除」。從當(dāng)前點(diǎn)出發(fā)嘗試直接連線到更遠(yuǎn)的路徑點(diǎn)如果直線經(jīng)過的格子全部可走就跳過中間的格點(diǎn)。簡化后路徑點(diǎn)數(shù)通常能減少 60% 以上再配合下一章的曲線平滑移動(dòng)觀感會(huì)干凈很多。判斷直線是否可走可以采樣直線上多個(gè)點(diǎn)逐一檢查所在格子的可走性。5.4 動(dòng)態(tài)障礙刷新走全量幀率突然暴跌現(xiàn)象某個(gè)障礙物被移動(dòng)后整個(gè)尋路系統(tǒng)卡頓 1 到 2 秒。原因buildWalkableGrid每次全量重建O(行 × 列) 加上每個(gè)格子遍歷障礙物幾千個(gè)格子的場景重跑一次就掉幀了。解決不要每次移動(dòng)都全量重建改為局部更新。靜態(tài)部分提前烘焙進(jìn)網(wǎng)格動(dòng)態(tài)障礙只在自身包圍盒覆蓋的格子范圍內(nèi)改寫。如果場景實(shí)在很小、格子不超過幾百個(gè)全量重建也能接受但GRID_SIZE不要低于 0.25否則格子數(shù)量會(huì)突增到上萬個(gè)任何手機(jī)瀏覽器都會(huì)卡。這個(gè)坑在 PC 上可能不明顯移動(dòng)端一測就露餡。5.5 把 Y 軸混進(jìn)搜索維度的「飛天」繞路現(xiàn)象兩點(diǎn)在同一水平面路徑卻先高后低甚至從半空中繞過去角色移動(dòng)時(shí)像在飛。原因?qū)ぢ肪W(wǎng)格被做成了三維數(shù)組把 Y 也放進(jìn)搜索空間。three.js 的 Y 軸是高度方向直接搜三維網(wǎng)格會(huì)把現(xiàn)實(shí)中不可達(dá)的區(qū)域也納入候選。解決約定所有尋路都發(fā)生在 XZ 平面。分樓層場景就拆多層每層做一次二維 A*層與層之間用樓梯或電梯點(diǎn)銜接。如果必須支持坡道建議改用導(dǎo)航網(wǎng)格不要硬磕三維網(wǎng)格 A*。這個(gè)問題我在 2.2 小節(jié)已經(jīng)提過但實(shí)際項(xiàng)目里還是會(huì)反復(fù)出現(xiàn)歸根結(jié)底是因?yàn)楹芏嗳四玫絼?dòng)態(tài)角色高度就順手塞進(jìn)了尋路入?yún)ⅰ?. 進(jìn)階技巧路徑平滑與角色朝向讓尋路結(jié)果不呆板6.1 用 CatmullRomCurve3 把折線路徑變成平滑曲線路徑簡化后還是折線段直接讓角色沿折線移動(dòng)會(huì)出現(xiàn)硬轉(zhuǎn)彎。常見做法是用 three.js 內(nèi)置的CatmullRomCurve3做曲線插值const curve new THREE.CatmullRomCurve3(waypoints); const pointsOnCurve curve.getPoints(50); // 采樣 50 個(gè)點(diǎn) const lineGeo new THREE.BufferGeometry().setFromPoints(pointsOnCurve); const lineMat new THREE.LineBasicMaterial({ color: 0x00ff88 }); scene.add(new THREE.Line(lineGeo, lineMat));waypoints是 4.2 節(jié)得到的worldPath數(shù)組。CatmullRomCurve3默認(rèn)穿過每個(gè)傳入點(diǎn)同時(shí)把拐角拉圓角色沿著pointsOnCurve走就不會(huì)出現(xiàn)直角急轉(zhuǎn)。注意曲線可能會(huì)把路徑拉向障礙物一側(cè)所以簡化后的 waypoints 周圍要保留至少一個(gè)格子的余量或者把轉(zhuǎn)彎點(diǎn)稍微向可走區(qū)域中心偏移。6.2 用四元數(shù)插值替代 lookAt轉(zhuǎn)身更自然當(dāng)角色移動(dòng)速度較快時(shí)直接lookAt(target)每幀轉(zhuǎn)向很生硬。用四元數(shù)插值可以讓轉(zhuǎn)身帶有慣性感const targetQuat new THREE.Quaternion().setFromUnitVectors( new THREE.Vector3(0, 0, 1), dir.clone().normalize() ); player.quaternion.slerp(targetQuat, 0.1);參數(shù)說明slerp系數(shù) 0.1 表示每幀朝目標(biāo)方向轉(zhuǎn) 10%系數(shù)越小越慢0.15 到 0.2 的手感更跟手。注意dir必須是在 XZ 平面歸一化后的方向向量否則角色會(huì)低頭或仰頭。模型面部朝向如果默認(rèn)是 X 軸正方向需要先給模型套一個(gè)父級 Object3D 做軸向修正這是 three.js 角色動(dòng)畫里最常見的玄學(xué)問題我也踩過。6.3 驗(yàn)證尋路結(jié)果的三個(gè)檢查項(xiàng)調(diào)試尋路時(shí)我會(huì)?？慈齻€(gè)值路徑總長度、轉(zhuǎn)向次數(shù)、最小障礙物距離。路徑總長度能反映鄰域設(shè)置是否合理轉(zhuǎn)向次數(shù)多說明平滑不足最小障礙物距離用于檢查是否有貼邊現(xiàn)象。把這三個(gè)值打印出來對比調(diào)整GRID_SIZE和鄰域比肉眼盯著屏幕猜問題可靠得多。經(jīng)歷過一次「鄰域改成八鄰域后路徑長度降了 30%但出現(xiàn)十幾處貼邊斜切」的事故后我把穿墻檢測、路徑簡化和 slerp 朝向插值固定成了尋路工具的標(biāo)配?；乜催@個(gè) three.js 算法尋路示例初版不要急著追求花哨的動(dòng)態(tài)避讓先把「網(wǎng)格 → A* → 坐標(biāo)互轉(zhuǎn) → 路徑移動(dòng)」這條鏈路跑通再逐步加復(fù)雜度。這個(gè)方向值不值得投入取決于你的項(xiàng)目里有多少個(gè)需要自動(dòng)尋路的角色角色一多網(wǎng)格那套很快會(huì)遇到性能瓶頸到時(shí)候自然會(huì)把視線轉(zhuǎn)向?qū)Ш骄W(wǎng)格。你在網(wǎng)格方案里踩過的那些坑換導(dǎo)航網(wǎng)格時(shí)還會(huì)再遇到一遍。我后來養(yǎng)成了每個(gè)尋路改動(dòng)先打印路徑統(tǒng)計(jì)的習(xí)慣省掉了大量深夜調(diào)試時(shí)間。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取