{"id":4784,"date":"2024-11-06T11:57:34","date_gmt":"2024-11-06T03:57:34","guid":{"rendered":"https:\/\/www.hightopo.com\/blog\/?p=4784"},"modified":"2024-11-06T11:58:45","modified_gmt":"2024-11-06T03:58:45","slug":"%e5%8a%a8%e6%80%81%e9%81%bf%e9%9a%9c-%e5%9b%be%e6%89%91%e8%87%aa%e5%8a%a8%e5%af%bb%e8%b7%af-3d-%e5%8f%af%e8%a7%86%e5%8c%96","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/4784.html","title":{"rendered":"\u52a8\u6001\u907f\u969c-\u56fe\u6251\u81ea\u52a8\u5bfb\u8def 3D \u53ef\u89c6\u5316"},"content":{"rendered":"\n

\u81ea\u52a8\u5bfb\u8def\u662f\u673a\u5668\u4eba\u5bfc\u822a\u7684\u6838\u5fc3\u6280\u672f\uff0c\u5176\u539f\u7406\u4e3b\u8981\u6d89\u53ca\u673a\u5668\u4eba\u4e0e\u73af\u5883\u4e4b\u95f4\u7684\u590d\u6742\u4fe1\u606f\u4ea4\u4e92\u4e0e\u5904\u7406<\/strong>\u3002\u5728\u81ea\u52a8\u5bfb\u8def\u8fc7\u7a0b\u4e2d\uff0c\u673a\u5668\u4eba\u4f9d\u9760\u5148\u8fdb\u7684\u4f20\u611f\u5668\u7cfb\u7edf\uff0c\u5982\u9ad8\u6e05\u6444\u50cf\u5934\u3001\u7cbe\u5bc6\u6fc0\u5149\u96f7\u8fbe\u548c\u7075\u654f\u8d85\u58f0\u6ce2\u88c5\u7f6e\uff0c\u5168\u65b9\u4f4d\u611f\u77e5\u5468\u56f4\u73af\u5883\u3002\u8fd9\u4e9b\u4f20\u611f\u5668\u80fd\u591f\u5b9e\u65f6\u6355\u6349\u5e76\u5206\u6790\u73af\u5883\u4e2d\u7684\u969c\u788d\u7269\u3001\u5730\u5f62\u53d8\u5316\u548c\u5173\u952e\u8def\u6807\uff0c\u4e3a\u673a\u5668\u4eba\u63d0\u4f9b\u7cbe\u786e\u7684\u5bfc\u822a\u6570\u636e\u3002<\/p>\n\n\n\n

\u81ea\u52a8\u5bfb\u8def\u5728\u591a\u4e2a\u9886\u57df\u53d1\u6325\u7740\u5173\u952e\u4f5c\u7528\uff0c\u4ece\u56fe\u6251\u7684\u6570\u636e\u4e2d\u5fc3\u673a\u623f\u7684\u81ea\u52a8\u5316\u5de1\u68c0\u7cfb\u7edf\uff0c\u5230\u667a\u80fd\u673a\u5668\u4eba\u7684\u5bfc\u822a\u7cfb\u7edf\uff0c\u518d\u5230\u667a\u6167\u7801\u5934\u5806\u573a\u7684\u667a\u80fd\u5316\u7ba1\u7406\uff0c\u81ea\u52a8\u5bfb\u8def\u6280\u672f\u65e0\u5904\u4e0d\u5728\u3002\u8be5\u529f\u80fd\u4e0d\u4ec5\u80fd\u89c4\u5212\u51fa\u6700\u4f18\u8def\u7ebf<\/strong>\uff0c\u8fd8\u80fd\u5b9e\u65f6\u8003\u8651\u969c\u788d\u7269\u907f\u8ba9<\/strong>\u7b49\u590d\u6742\u7684\u5b9e\u9645\u56e0\u7d20\uff0c\u7075\u6d3b\u8c03\u6574\u8def\u5f84\u4ee5\u786e\u4fdd\u5b89\u5168\u548c\u6548\u7387\u3002<\/p>\n\n\n\n

\u4e4d\u542c\u4e4b\u4e0b\uff0c\u81ea\u52a8\u5bfb\u8def\u529f\u80fd\u7565\u663e\u590d\u6742\uff0c\u5b9e\u73b0\u8fc7\u7a0b\u4e2d\u4e5f\u786e\u5b9e\u6d89\u53ca\u4e86\u4e00\u4e9b\u7b97\u6cd5\u3002\u5728\u5177\u4f53\u5b9e\u65bd\u4e4b\u524d\uff0c\u6211\u4eec\u9700\u8981\u5148\u89e3\u51b3\u4e24\u4e2a\u5173\u952e\u95ee\u9898\uff1a<\/p>\n\n\n\n

1. \u5982\u4f55\u907f\u5f00\u573a\u666f\u4e2d\u7684\u969c\u788d\u7269\uff1f<\/p>\n\n\n\n

2. \u5982\u4f55\u8ba1\u7b97\u6700\u4f73\u8def\u5f84\uff1f<\/p>\n\n\n\n

\u9488\u5bf9\u8fd9\u4e24\u5904\u95ee\u9898\uff0c\u6211\u4eec\u53ef\u4ee5\u5229\u7528\u56fe\u6251\u8f6f\u4ef6\u81ea\u7814 HT for Web \u63d0\u4f9b\u7684 ht-astar.js \u63d2\u4ef6\u3002\u8be5\u63d2\u4ef6\u5177\u5907\u521d\u59cb\u5316\u7f51\u683c\u548c\u81ea\u52a8\u641c\u7d22\u8def\u5f84<\/strong>\u7b49\u529f\u80fd\uff0c\u9ad8\u6548\u7b80\u5316\u4e86\u81ea\u52a8\u5bfb\u8def\u7684\u5b9e\u73b0\u8fc7\u7a0b\u3002<\/p>\n\n\n\n

\u7cfb\u7edf\u5206\u6790<\/h1>\n\n\n\n

\u573a\u666f\u7f51\u683c\u5316<\/h2>\n\n\n\n

\u5148\u5c06\u573a\u666f\u5212\u5206\u6210\u4e8c\u7ef4\u7f51\u683c\uff0c\u969c\u788d\u7269\u5206\u5e03\u4e8e\u4e0d\u540c\u7684\u7f51\u683c\u5355\u5143\u4e0a\uff0c\u90e8\u5206\u8f83\u5927\u7684\u969c\u788d\u7269\u53ef\u80fd\u4f1a\u5360\u636e\u591a\u4e2a\u7f51\u683c\u5355\u5143\u3002\u8def\u5f84\u8ba1\u7b97\u5b9e\u9645\u4e0a\u662f\u5206\u6790\u7f51\u683c\u7684\u5360\u7528\u60c5\u51b5\uff0c\u5f53\u5e73\u53f0\u76d1\u6d4b\u5230\u67d0\u4e2a\u7f51\u683c\u88ab\u5360\u7528\u65f6\uff0c\u7cfb\u7edf\u4f1a\u81ea\u52a8\u5bfb\u627e\u62e9\u4f18\u751f\u6210\u4e00\u6761\u7ed5\u884c\u8def\u5f84\u3002<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\u5728\u5f00\u53d1\u65f6\uff0c\u9996\u5148\u9700\u8981\u53bb\u5b9e\u4f8b\u5316 ht.Astar.Finder(view, params)\u3002\u5176\u4e2d view \u53ef\u4ee5\u662f ht.graph.GraphView \u6216\u8005 ht.graph3d.Graph3dView\u3002params \u662f\u4e00\u4e2a\u5305\u542b\u57fa\u7840\u5c5e\u6027\u8bbe\u7f6e\u7684\u5bf9\u8c61\u3002\u4ee5\u4e0b\u5217\u4e3e\u4e86\u4e00\u4e9b<\/strong> params <\/strong>\u7684\u5e38\u7528\u53c2\u6570\uff1a<\/strong><\/p>\n\n\n\n

\u2727simplify:\u662f\u5426\u542f\u7528\u8def\u5f84\u7b80\u5316\u3002<\/p>\n\n\n\n

\u2727closest:\u662f\u5426\u542f\u7528\u6700\u8fd1\u8def\u5f84\u4f18\u5316\u3002<\/p>\n\n\n\n

\u2727nodeRectExtend:\u6269\u5c55\u8282\u70b9\u8303\u56f4\u3002<\/p>\n\n\n\n

\u2727gridSizeY:\u7f51\u683c\u5728 Y \u65b9\u5411\u4e0a\u7684\u5927\u5c0f\u3002<\/p>\n\n\n\n

\u2727gridSizeX:\u7f51\u683c\u5728 X \u65b9\u5411\u4e0a\u7684\u5927\u5c0f\u3002<\/p>\n\n\n\n

\u2727diagonal:\u662f\u5426\u5141\u8bb8\u6cbf\u5bf9\u89d2\u7ebf\u65b9\u5411\u79fb\u52a8\u3002<\/p>\n\n\n\n

\u2727fastOverlap:\u662f\u5426\u542f\u7528\u5feb\u901f\u76d1\u6d4b\u91cd\u53e0\u7b97\u6cd5\u3002<\/p>\n\n\n\n

\u2727filter:\u8fc7\u6ee4\u51fd\u6570\u7528\u4e8e\u5728\u8def\u5f84\u8ba1\u7b97\u8fc7\u7a0b\u4e2d\u8fc7\u6ee4\u7279\u5b9a\u8282\u70b9\u3002<\/p>\n\n\n\n

\u2727turnPunish:\u8f6c\u5f2f\u60e9\u7f5a\u7cfb\u6570\uff0c\u6570\u503c\u8d8a\u9ad8\u8868\u793a\u8d8a\u503e\u5411\u4e8e\u76f4\u7ebf\u8def\u5f84\u3002<\/p>\n\n\n\n

\u5177\u4f53\u4ee3\u7801\u5b9e\u73b0\uff1a<\/p>\n\n\n\n

const hindrance = dm.getDataByTag(\u2018hindrance\u2019);\nconst astar = new ht.Astar.Finder(view, {\n    gridSizeX: 50, \/\/ \u7f51\u683c \n    gridSizeY: 50,\n    nodeRectExtend: 50,\n    fastOverlap: false,\n    filter: function (data) {\n        return data.isDescendantOf(hindrance);\n    }\n});<\/code><\/pre>\n\n\n\n
\u8def\u5f84\u8ba1\u7b97<\/strong><\/p>\n\n\n\n
\u5728\u8def\u5f84\u8ba1\u7b97\u8fc7\u7a0b\u4e2d\uff0c\u7cfb\u7edf\u9700\u8981\u5b9e\u65f6\u76d1\u6d4b\u6bcf\u4e2a\u7f51\u683c\u5355\u5143\u7684\u5360\u7528\u72b6\u6001\u3002\u82e5\u89c4\u5212\u7684\u8def\u5f84\u9047\u5230\u88ab\u969c\u788d\u7269\u5360\u7528\u7684\u7f51\u683c\uff0c\u7cfb\u7edf\u4f1a\u81ea\u52a8\u5bfb\u627e\u7ed5\u884c\u8def\u5f84\uff0c\u4ee5\u52a8\u6001\u907f\u5f00\u969c\u788d\u7269<\/strong>\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u76d1\u542c\u573a\u666f\u80cc\u666f\u7684\u70b9\u51fb\u4e8b\u4ef6<\/strong>\uff0c\u83b7\u53d6\u70b9\u51fb\u4f4d\u7f6e\u7684\u5750\u6807\u3002\u7136\u540e\uff0c\u7ed3\u5408\u8d77\u70b9\u5750\u6807\uff0c\u901a\u8fc7 astar.findPath(pFrom, pTo) \u51fd\u6570\u8ba1\u7b97\u51fa\u5177\u4f53\u8def\u5f84\u3002\u8ba1\u7b97\u5f97\u5230\u7684\u8def\u5f84\u662f\u4e00\u7ec4\u70b9\u4f4d\u6570\u636e\uff0c\u53ef\u4ee5\u5229\u7528\u8fd9\u4e9b\u6570\u636e\u5728\u573a\u666f\u4e2d\u7ed8\u5236\u51fa\u4e00\u6761\u8def\u5f84\u7ba1\u9053\u3002\u5177\u4f53\u4ee3\u7801\u5b9e\u73b0\uff1a<\/p>\n\n\n\n
view.mi(function (e) {\n    const { kind, data, event } = e;\n    if (kind === 'clickBackground') {\n        const animOb = view.dm().getDataByTag('people'); \/\/ \u83b7\u53d6\u4eba\u7269\u8282\u70b9\n        let pFrom = animOb.p3(); \/\/ \u83b7\u53d6\u4eba\u7269\u8282\u70b9\u7684\u5750\u6807\uff08\u8d77\u70b9\u5750\u6807\uff09\n        pFrom = { x: pFrom[0], y: pFrom[2] };\n        let position = view.getHitPosition(event); \/\/ \u6839\u636e\u9f20\u6807\u4e8b\u4ef6\u83b7\u53d6\u573a\u666f\u4e2d\u7684\u903b\u8f91\u5750\u6807\n        const pTo = { x: position[0], y: position[2] };\n        const path = astar.findPath(pFrom, pTo); \/\/ \u83b7\u53d6\u8def\u5f84\n        createPloyline(path); \/\/ \u751f\u6210\u7ba1\u9053\n      }\n})\n\/\/ \u751f\u6210\u7ba1\u9053\ncreatePloyline(){\n  const points: any = [];\n  path.forEach((p: any, i: number) => {\n      points.push({ x: p.x, y: p.y, e: 0 });\n  })\n  const polyline = new ht.Polyline();\n  polyline.s({\n      \"shape3d\": false,\n  });\n  polyline.setPoints(points);\n  view.dm().add(polyline);\n}<\/code><\/pre>\n\n\n\n
\u8def\u5f84\u52a8\u753b<\/h2>\n\n\n\n
\u5728\u573a\u666f\u4e2d\u751f\u6210\u7ba1\u9053\u540e\uff0c\u4eba\u7269\u8282\u70b9\u53ef\u6cbf\u6b64\u7ba1\u9053\u79fb\u52a8\u3002\u4eba\u7269\u8282\u70b9\u6cbf\u7ba1\u9053\u8fd0\u52a8\u7684\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n
const animOb = dm.getDataByTag('people');\nanimOb.playAnimation('walk'); \/\/ \u793a\u4f8b\u4e2d\u4eba\u7269\u6a21\u578b\u4f7f\u7528\u7684\u662f fbx \u6a21\u578b\uff0c\u53ef\u64ad\u653e\u8282\u70b9\u4e0a\u7684\u52a8\u753b\nconst length = view.getLineLength(polyline);\nlet moveAnim = null;\nconst params = {\n    delay: 100,\n    duration: 1000 * (length \/ 200), \/\/ \u6839\u636e\u7ba1\u9053\u7684\u957f\u5ea6\u8bbe\u5b9a\u52a8\u753b\u5468\u671f\n    easing: function (t) { return t },\n    action: function (v, t) {\n        var offset = view.getLineOffset(polyline, length * v);\n        if (offset) {\n            var point = offset.point,\n                px = point.x,\n                py = point.y,\n                pz = point.z,\n                tangent = offset.tangent,\n                tx = tangent.x,\n                ty = tangent.y,\n                tz = tangent.z;\n            animOb.lookAt([px + tx, py + ty, pz + tz], 'front');\n            animOb.p3(px, py, pz);\n        }\n        \/\/ \u4eba\u7269\u8fd0\u52a8\u65f6\uff0c\u89c6\u89d2\u59cb\u7ec8\u8ddf\u968f\n        view.setCenter([px, py, pz]); \n        view.setEye([px + 400, py + 800, pz + 400]);\n},\nfinishFunc: () => {\n    moveAnim = null;\n    \/\/ \u5207\u6362\u573a\u666f\u89c6\u89d2\n    view.moveCamera([-84, 3435, 3142],  [-28, -821, -160], {\n         duration: 1000\n    })\n    animOb.pauseAnimation(); \/\/ \u6682\u505c\u4eba\u7269\u6a21\u578b\u52a8\u753b\n  }\n};\nmoveAnim = ht.Default.startAnim(params);<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u4f18\u5316\u89c6\u89c9\u6548\u679c<\/strong><\/p>\n\n\n\n
\u57fa\u4e8e\u4e0a\u8ff0\uff0c\u6211\u4eec\u5df2\u5b9e\u73b0\u4e86\u57fa\u672c\u7684\u81ea\u52a8\u5bfb\u8def\u529f\u80fd\u3002\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u4ecd\u9700\u63d0\u5347\u4e00\u5b9a\u7684\u89c6\u89c9\u6548\u679c\uff0c\u8ba9\u5c55\u793a\u9875\u9762\u8db3\u591f\u7f8e\u89c2\uff0c\u6211\u4eec\u53ef\u4ee5\u91c7\u53d6\u4ee5\u4e0b\u7b56\u7565\uff1a<\/p>\n\n\n\n