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