{"id":269,"date":"2014-11-24T18:00:24","date_gmt":"2014-11-24T10:00:24","guid":{"rendered":"http:\/\/www.hightopo.com\/blog\/?p=269"},"modified":"2014-11-24T18:00:40","modified_gmt":"2014-11-24T10:00:40","slug":"%e5%9f%ba%e4%ba%8ewebgl%e7%9a%843d%e5%91%88%e7%8e%b0a-search-algorithm","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/269.html","title":{"rendered":"\u57fa\u4e8eHT for Web\u76843D\u5448\u73b0A* Search Algorithm"},"content":{"rendered":"<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-272\" alt=\"IMG_1486\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486.png\" width=\"700\" height=\"395\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486.png 700w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486-300x169.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486-200x112.png 200w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>\u6700\u8fd1\u641e\u4e2a\u6e38\u620f\u9047\u5230\u6700\u77ed\u8def\u5f84\u7684\u5e38\u89c4\u6e38\u620f\u95ee\u9898\uff0c\u6b63\u5de7\u770b\u5230\u8001\u540c\u4e8b\u5199\u76843D\u673a\u623f\u6700\u77ed\u8def\u5f84\u5de1\u7ebf\u6587\u7ae0\uff0c\u4e00\u65f6\u8d77\u5174\u57fa\u4e8e<a href=\"http:\/\/hightopo.com\/\">HT for Web<\/a>\u5199\u4e86\u4e2aA*\u7b97\u6cd5\u7684WebGL 3D\u5448\u73b0\uff0c\u7b97\u6cd5\u57fa\u4e8e\u5f00\u6e90\u00a0<a href=\"https:\/\/github.com\/bgrins\/javascript-astar\">https:\/\/github.com\/bgrins\/javascript-astar<\/a>\u00a0\u7684javascript\u5b9e\u73b0\uff0c\u5176\u5b9e\u4f5c\u8005\u4e5f\u6709\u4e2a\u4e0d\u9519\u76842D\u4f8b\u5b50\u5b9e\u73b0\u00a0<a href=\"http:\/\/www.briangrinstead.com\/files\/astar\/\">http:\/\/www.briangrinstead.com\/files\/astar\/<\/a>\u00a0\uff0c\u53ea\u4e0d\u8fc7\u89c9\u5f97\u6240\u6709A*\u7b97\u6cd5\u7684\u53ef\u89c6\u5316\u5b9e\u73b0\u90fd\u662f\u5e73\u9762\u7684\u4e0d\u591f\u9177\uff0c\u53e6\u5916\u8fd8\u6709\u4e0d\u5c11\u53c2\u6570\u9700\u8981\u8c03\u8282\u63a7\u5236\uff0c\u8fd8\u662f\u503c\u5f97\u597d\u597d\u641e\u4e2a\u5168\u9762\u7684Demo\uff0c\u5148\u4e0a\u5f202D\u548c3D\u4f8b\u5b50\u7684\u5bf9\u7167\u56fe\u3002<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-270\" alt=\"Screen Shot 2014-11-24 at 5.36.33 PM\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM.png\" width=\"844\" height=\"873\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM.png 844w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM-290x300.png 290w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM-193x200.png 193w\" sizes=\"(max-width: 844px) 100vw, 844px\" \/><\/a><\/p>\n<p>\u5b9e\u73b0\u4ee3\u7801\u6bd4\u8f83\u5bb9\u6613\u4e00\u767e\u591a\u884c\uff0c\u4e0d\u8fc7\u7b97\u6cd5\u6838\u5fc3\u5728astar.js\u4e86\uff0c\u754c\u9762\u6838\u5fc3\u5728<a href=\"http:\/\/hightopo.com\/\">ht.js<\/a>\u91cc\u9762\u4e86\uff0c\u6211\u53ea\u9700\u8981\u6784\u5efa\u7f51\u683c\u4fe1\u606f\uff0c\u53ea\u9700\u76d1\u542c\u7528\u6237\u70b9\u51fb\uff0c\u7136\u540e\u8c03\u7528astar.js\u8fdb\u884c\u6700\u77ed\u8def\u5f84\u8ba1\u7b97\uff0c\u5c06\u7ed3\u679c\u901a\u8fc7\u52a8\u753b\u7684\u65b9\u5f0f\u5448\u73b0\u51fa\u8d70\u52a8\u7684\u8fc7\u7a0b\uff0c\u6240\u6709\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre class=\"&quot;brush:javascript\u201d\">function init() {                \r\n\tw = 40; m = 20; d = w * m \/ 2;            \r\n\tgridRows = [];                        \r\n\tdm = new ht.DataModel();             \r\n\tg3d = new ht.graph3d.Graph3dView(dm);                \r\n\tg3d.setGridVisible(true);\r\n\tg3d.setGridColor('#BBBBBB');\r\n\tg3d.setGridSize(m);\r\n\tg3d.setGridGap(w);            \r\n\tg3d.addToDOM();                                                                                                        \r\n\tg3d.sm().setSelectionMode('none');            \r\n\tanim = startBall = endBall = null;                        \r\n\tg3d.getView().addEventListener(ht.Default.isTouchable ? 'touchstart' : 'mousedown', function(e){                \r\n\t\tif(!anim){\r\n\t\t\tvar p = g3d.getHitPosition(e);\r\n\t\t\tvar x = Math.floor((p[0] + d)\/ w);\r\n\t\t\tvar y = Math.floor((p[2] + d)\/ w);\r\n\t\t\tvar endBall = dm.getDataByTag(\"cell_\" + x + \"_\" + y);\r\n\t\t\tif(endBall &amp;&amp; endBall.s('batch') !== 'wall'){                      \r\n\t\t\t\tif(startBall.a('x') === x &amp;&amp; startBall.a('y') === y){\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}                        \r\n\t\t\t\tvar g = new Graph(gridRows, { \r\n\t\t\t\t\tdiagonal: formPane.v('diagonal') \r\n\t\t\t\t});\r\n\t\t\t\tvar start = g.grid[startBall.a('x')][startBall.a('y')];\r\n\t\t\t\tvar end = g.grid[x][y];\r\n\t\t\t\tvar result = astar.search(g, start, end, {\r\n\t\t\t\t\tclosest: formPane.v('closest')                            \r\n\t\t\t\t});  \r\n\t\t\t\tif(!result.length){\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\tx = result[result.length-1].x;\r\n\t\t\t\ty = result[result.length-1].y;\r\n\t\t\t\tendBall = dm.getDataByTag(\"cell_\" + x + \"_\" + y);\r\n\t\t\t\tendBall.s('3d.visible', true);\r\n\t\t\t\tstartBall.s('3d.visible', false);\r\n\t\t\t\tformPane.setDisabled(true);\r\n\t\t\t\tanim = ht.Default.startAnim({\r\n\t\t\t\t\tduration: 700,\r\n\t\t\t\t\tfinishFunc: function(){  \r\n\t\t\t\t\t\tfor(var i=0; i&lt;result.length; i++){\r\n\t\t\t\t\t\t\tvar ball = dm.getDataByTag(\"cell_\" + result[i].x + \"_\" + result[i].y);\r\n\t\t\t\t\t\t\tball.s({\r\n\t\t\t\t\t\t\t\t'3d.visible': false,\r\n\t\t\t\t\t\t\t\t'shape3d.opacity': 1,\r\n\t\t\t\t\t\t\t\t'shape3d.transparent': false\r\n\t\t\t\t\t\t\t}); \r\n\t\t\t\t\t\t\tstartBall.p3(-d+w*x+w\/2, w\/2, -d+w*y+w\/2);\r\n\t\t\t\t\t\t\tstartBall.a({x: x, y: y});\r\n\t\t\t\t\t\t\tstartBall.s('3d.visible', true);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tanim = null;\r\n\t\t\t\t\t\tformPane.setDisabled(false);\r\n\t\t\t\t\t},\r\n\t\t\t\t\taction: function(v){\r\n\t\t\t\t\t\tvar index = Math.round(v*result.length);\r\n\t\t\t\t\t\tfor(var i=0; i&lt;index; i++){\r\n\t\t\t\t\t\t\tvar ball = dm.getDataByTag(\"cell_\" + result[i].x + \"_\" + result[i].y);\r\n\t\t\t\t\t\t\tball.s({\r\n\t\t\t\t\t\t\t\t'3d.visible': true,\r\n\t\t\t\t\t\t\t\t'shape3d.opacity': i\/index*0.3 + 0.7,\r\n\t\t\t\t\t\t\t\t'shape3d.transparent': true\r\n\t\t\t\t\t\t\t});                                    \r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t});                                                \r\n\t\t\t}\r\n\t\t}               \r\n\t}, false);                                    \r\n\tcreateFormPane();\r\n\tcreateGrid();                                \r\n}                \r\nfunction createGrid(){\r\n\tdm.clear();            \r\n\tvar ball;\r\n\tgridRows.length = 0;\r\n\tfor(var x = 0; x &lt; m; x++) {\r\n\t\tvar nodeRow = [];\r\n\t\tgridRows.push(nodeRow);\r\n\t\tfor(var y = 0; y &lt; m; y++) {                                \r\n\t\t\tvar isWall = Math.floor(Math.random()*(1\/formPane.v('frequency')));\r\n\t\t\tif(isWall === 0){\r\n\t\t\t\tnodeRow.push(0);\r\n\t\t\t\tcreateNode(x, y).s({\r\n\t\t\t\t\t'batch': 'wall',\r\n\t\t\t\t\t'all.color': '#9CA69D'\r\n\t\t\t\t});\r\n\t\t\t}else{\r\n\t\t\t\tnodeRow.push(1);\r\n\t\t\t\tball = createNode(x, y).s({\r\n\t\t\t\t\t'shape3d': 'sphere',  \r\n\t\t\t\t\t'shape3d.color': '#FF703F',\r\n\t\t\t\t\t'3d.visible': false\r\n\t\t\t\t});\r\n\t\t\t}            \r\n\t\t}       \r\n\t}\r\n\tif(!ball){\r\n\t\tcreateGrid();\r\n\t\treturn;\r\n\t}            \r\n\tstartBall = createNode(ball.a('x'), ball.a('y'), 'start').s({\r\n\t\t'shape3d': 'sphere',  \r\n\t\t'shape3d.color': '#FF703F'                    \r\n\t});  \r\n\r\n\tshape = new ht.Shape();\r\n\tshape.setPoints(new ht.List([\r\n\t\t{x: -d, y: d},\r\n\t\t{x: d, y: d},\r\n\t\t{x: d, y: -d},\r\n\t\t{x: -d, y: -d},\r\n\t\t{x: -d, y: d}\r\n\t]));\r\n\tshape.setThickness(4);\r\n\tshape.setTall(w);\r\n\tshape.setElevation(w\/2);\r\n\tshape.setClosePath(true);\r\n\tshape.s({\r\n\t\t'all.color': 'rgba(187, 187, 187, 0.8)', \r\n\t\t'all.transparent': true, \r\n\t\t'all.reverse.cull': true\r\n\t});\r\n\tdm.add(shape);                            \r\n}\r\nfunction createNode(x, y, tag){\r\n\tvar node = new ht.Node();\r\n\ttag = tag || \"cell_\" + x + \"_\" + y;               \r\n\tnode.setTag(tag);            \r\n\tnode.a({ x: x,  y: y });\r\n\tnode.s3(w*0.9, w*0.9, w*0.9);\r\n\tnode.p3(-d+w*x+w\/2, w\/2, -d+w*y+w\/2);\r\n\tnode.s({\r\n\t\t'all.reverse.cull': true,\r\n\t\t'shape3d.reverse.cull': true\r\n\t});\r\n\tdm.add(node);\r\n\treturn node;\r\n}                       \r\nfunction createFormPane() {           \r\n\tformPane = new ht.widget.FormPane();\r\n\tformPane.setWidth(230);\r\n\tformPane.setHeight(70);\r\n\tformPane.getView().className = 'formpane';\r\n\tdocument.body.appendChild(formPane.getView());            \r\n\tformPane.addRow(['Wall Frequency', {\r\n\t\tid: 'frequency',\r\n\t\tslider: {\r\n\t\t\tmin: 0,\r\n\t\t\tmax: 0.8,\r\n\t\t\tvalue: 0.1,                            \r\n\t\t\tonValueChanged: function(){\r\n\t\t\t\tcreateGrid();\r\n\t\t\t}\r\n\t\t}\r\n\t}], [100, 0.1]);                               \r\n\tformPane.addRow([\r\n\t\t{\r\n\t\t\tid: 'closest',\r\n\t\t\tcheckBox: {\r\n\t\t\t\tlabel: 'Try Closest'\r\n\t\t\t}\r\n\t\t},\r\n\t\t{\r\n\t\t\tid: 'diagonal',\r\n\t\t\tcheckBox: {\r\n\t\t\t\tlabel: 'Allow Diagonal'\r\n\t\t\t}        \r\n\t\t}\r\n\t], [0.1, 0.1]);\r\n}<\/pre>\n<p>\u53ea\u4eceiOS8\u652f\u6301WebGL\u540e\u5728\u79fb\u52a8\u7ec8\u7aef\u4e0a\u6d4b\u8bd53D\u5e94\u7528\u6bd4\u5f53\u524d\u7684\u5927\u90e8\u5206Android\u5e73\u677f\u8212\u670d\u591a\u4e86\uff0c\u4ee5\u4e0a\u7684\u4f8b\u5b50\u5728iOS\u7cfb\u7edf\u4e0b\u5448\u73b0\u548c\u7b97\u6cd5\u90fd\u633a\u6d41\u7545\uff0c<a href=\"http:\/\/v.youku.com\/v_show\/id_XODMzOTU1Njcy.html\">http:\/\/v.youku.com\/v_show\/id_XODMzOTU1Njcy.html<\/a>\uff0c\u5f53\u7136\u8fd9\u4e2a\u5c0f\u4f8b\u5b50\u6570\u636e\u91cf\u4e5f\u4e0d\u5927\uff0c\u672c\u8d28\u5176\u5b9e\u8fd8\u662f2D\u7684\u6700\u77ed\u8def\u5f84\u7b97\u6cd5\uff0c\u5e76\u975e\u771f\u6b63\u610f\u4e49\u76843D\u7a7a\u95f4\u6700\u77ed\u8def\u5f84\uff0c\u4f46\u8fd8\u662f\u8db3\u591f\u89e3\u51b3\u5f88\u591a\u5b9e\u9645\u5e94\u7528\u95ee\u9898\u4e86\u3002<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-271\" alt=\"Screen Shot 2014-11-24 at 5.09.13 PM\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM.png\" width=\"708\" height=\"421\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM.png 708w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM-300x178.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM-200x118.png 200w\" sizes=\"(max-width: 708px) 100vw, 708px\" \/><\/a><\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/player.youku.com\/embed\/XODMzOTU1Njcy\" height=\"498\" width=\"510\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-272\" alt=\"IMG_1486\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486.png\" width=\"700\" height=\"395\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486.png 700w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486-300x169.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/IMG_1486-200x112.png 200w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>\u6700\u8fd1\u641e\u4e2a\u6e38\u620f\u9047\u5230\u6700\u77ed\u8def\u5f84\u7684\u5e38\u89c4\u6e38\u620f\u95ee\u9898\uff0c\u6b63\u5de7\u770b\u5230\u8001\u540c\u4e8b\u5199\u76843D\u673a\u623f\u6700\u77ed\u8def\u5f84\u5de1\u7ebf\u6587\u7ae0\uff0c\u4e00\u65f6\u8d77\u5174\u57fa\u4e8e<a href=\"http:\/\/hightopo.com\/\">HT for Web<\/a>\u5199\u4e86\u4e2aA*\u7b97\u6cd5\u7684WebGL 3D\u5448\u73b0\uff0c\u7b97\u6cd5\u57fa\u4e8e\u5f00\u6e90\u00a0<a href=\"https:\/\/github.com\/bgrins\/javascript-astar\">https:\/\/github.com\/bgrins\/javascript-astar<\/a>\u00a0\u7684javascript\u5b9e\u73b0\uff0c\u5176\u5b9e\u4f5c\u8005\u4e5f\u6709\u4e2a\u4e0d\u9519\u76842D\u4f8b\u5b50\u5b9e\u73b0\u00a0<a href=\"http:\/\/www.briangrinstead.com\/files\/astar\/\">http:\/\/www.briangrinstead.com\/files\/astar\/<\/a>\u00a0\uff0c\u53ea\u4e0d\u8fc7\u89c9\u5f97\u6240\u6709A*\u7b97\u6cd5\u7684\u53ef\u89c6\u5316\u5b9e\u73b0\u90fd\u662f\u5e73\u9762\u7684\u4e0d\u591f\u9177\uff0c\u53e6\u5916\u8fd8\u6709\u4e0d\u5c11\u53c2\u6570\u9700\u8981\u8c03\u8282\u63a7\u5236\uff0c\u8fd8\u662f\u503c\u5f97\u597d\u597d\u641e\u4e2a\u5168\u9762\u7684Demo\uff0c\u5148\u4e0a\u5f202D\u548c3D\u4f8b\u5b50\u7684\u5bf9\u7167\u56fe\u3002<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-270\" alt=\"Screen Shot 2014-11-24 at 5.36.33 PM\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM.png\" width=\"844\" height=\"873\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM.png 844w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM-290x300.png 290w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.36.33-PM-193x200.png 193w\" sizes=\"(max-width: 844px) 100vw, 844px\" \/><\/a><\/p>\n<p>\u5b9e\u73b0\u4ee3\u7801\u6bd4\u8f83\u5bb9\u6613\u4e00\u767e\u591a\u884c\uff0c\u4e0d\u8fc7\u7b97\u6cd5\u6838\u5fc3\u5728astar.js\u4e86\uff0c\u754c\u9762\u6838\u5fc3\u5728<a href=\"http:\/\/hightopo.com\/\">ht.js<\/a>\u91cc\u9762\u4e86\uff0c\u6211\u53ea\u9700\u8981\u6784\u5efa\u7f51\u683c\u4fe1\u606f\uff0c\u53ea\u9700\u76d1\u542c\u7528\u6237\u70b9\u51fb\uff0c\u7136\u540e\u8c03\u7528astar.js\u8fdb\u884c\u6700\u77ed\u8def\u5f84\u8ba1\u7b97\uff0c\u5c06\u7ed3\u679c\u901a\u8fc7\u52a8\u753b\u7684\u65b9\u5f0f\u5448\u73b0\u51fa\u8d70\u52a8\u7684\u8fc7\u7a0b\uff0c\u6240\u6709\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre class=\"&quot;brush:javascript\u201d\">function init() {                \r\n\tw = 40; m = 20; d = w * m \/ 2;            \r\n\tgridRows = [];                        \r\n\tdm = new ht.DataModel();             \r\n\tg3d = new ht.graph3d.Graph3dView(dm);                \r\n\tg3d.setGridVisible(true);\r\n\tg3d.setGridColor('#BBBBBB');\r\n\tg3d.setGridSize(m);\r\n\tg3d.setGridGap(w);            \r\n\tg3d.addToDOM();                                                                                                        \r\n\tg3d.sm().setSelectionMode('none');            \r\n\tanim = startBall = endBall = null;                        \r\n\tg3d.getView().addEventListener(ht.Default.isTouchable ? 'touchstart' : 'mousedown', function(e){                \r\n\t\tif(!anim){\r\n\t\t\tvar p = g3d.getHitPosition(e);\r\n\t\t\tvar x = Math.floor((p[0] + d)\/ w);\r\n\t\t\tvar y = Math.floor((p[2] + d)\/ w);\r\n\t\t\tvar endBall = dm.getDataByTag(\"cell_\" + x + \"_\" + y);\r\n\t\t\tif(endBall &amp;&amp; endBall.s('batch') !== 'wall'){                      \r\n\t\t\t\tif(startBall.a('x') === x &amp;&amp; startBall.a('y') === y){\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}                        \r\n\t\t\t\tvar g = new Graph(gridRows, { \r\n\t\t\t\t\tdiagonal: formPane.v('diagonal') \r\n\t\t\t\t});\r\n\t\t\t\tvar start = g.grid[startBall.a('x')][startBall.a('y')];\r\n\t\t\t\tvar end = g.grid[x][y];\r\n\t\t\t\tvar result = astar.search(g, start, end, {\r\n\t\t\t\t\tclosest: formPane.v('closest')                            \r\n\t\t\t\t});  \r\n\t\t\t\tif(!result.length){\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\tx = result[result.length-1].x;\r\n\t\t\t\ty = result[result.length-1].y;\r\n\t\t\t\tendBall = dm.getDataByTag(\"cell_\" + x + \"_\" + y);\r\n\t\t\t\tendBall.s('3d.visible', true);\r\n\t\t\t\tstartBall.s('3d.visible', false);\r\n\t\t\t\tformPane.setDisabled(true);\r\n\t\t\t\tanim = ht.Default.startAnim({\r\n\t\t\t\t\tduration: 700,\r\n\t\t\t\t\tfinishFunc: function(){  \r\n\t\t\t\t\t\tfor(var i=0; i&lt;result.length; i++){\r\n\t\t\t\t\t\t\tvar ball = dm.getDataByTag(\"cell_\" + result[i].x + \"_\" + result[i].y);\r\n\t\t\t\t\t\t\tball.s({\r\n\t\t\t\t\t\t\t\t'3d.visible': false,\r\n\t\t\t\t\t\t\t\t'shape3d.opacity': 1,\r\n\t\t\t\t\t\t\t\t'shape3d.transparent': false\r\n\t\t\t\t\t\t\t}); \r\n\t\t\t\t\t\t\tstartBall.p3(-d+w*x+w\/2, w\/2, -d+w*y+w\/2);\r\n\t\t\t\t\t\t\tstartBall.a({x: x, y: y});\r\n\t\t\t\t\t\t\tstartBall.s('3d.visible', true);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tanim = null;\r\n\t\t\t\t\t\tformPane.setDisabled(false);\r\n\t\t\t\t\t},\r\n\t\t\t\t\taction: function(v){\r\n\t\t\t\t\t\tvar index = Math.round(v*result.length);\r\n\t\t\t\t\t\tfor(var i=0; i&lt;index; i++){\r\n\t\t\t\t\t\t\tvar ball = dm.getDataByTag(\"cell_\" + result[i].x + \"_\" + result[i].y);\r\n\t\t\t\t\t\t\tball.s({\r\n\t\t\t\t\t\t\t\t'3d.visible': true,\r\n\t\t\t\t\t\t\t\t'shape3d.opacity': i\/index*0.3 + 0.7,\r\n\t\t\t\t\t\t\t\t'shape3d.transparent': true\r\n\t\t\t\t\t\t\t});                                    \r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t});                                                \r\n\t\t\t}\r\n\t\t}               \r\n\t}, false);                                    \r\n\tcreateFormPane();\r\n\tcreateGrid();                                \r\n}                \r\nfunction createGrid(){\r\n\tdm.clear();            \r\n\tvar ball;\r\n\tgridRows.length = 0;\r\n\tfor(var x = 0; x &lt; m; x++) {\r\n\t\tvar nodeRow = [];\r\n\t\tgridRows.push(nodeRow);\r\n\t\tfor(var y = 0; y &lt; m; y++) {                                \r\n\t\t\tvar isWall = Math.floor(Math.random()*(1\/formPane.v('frequency')));\r\n\t\t\tif(isWall === 0){\r\n\t\t\t\tnodeRow.push(0);\r\n\t\t\t\tcreateNode(x, y).s({\r\n\t\t\t\t\t'batch': 'wall',\r\n\t\t\t\t\t'all.color': '#9CA69D'\r\n\t\t\t\t});\r\n\t\t\t}else{\r\n\t\t\t\tnodeRow.push(1);\r\n\t\t\t\tball = createNode(x, y).s({\r\n\t\t\t\t\t'shape3d': 'sphere',  \r\n\t\t\t\t\t'shape3d.color': '#FF703F',\r\n\t\t\t\t\t'3d.visible': false\r\n\t\t\t\t});\r\n\t\t\t}            \r\n\t\t}       \r\n\t}\r\n\tif(!ball){\r\n\t\tcreateGrid();\r\n\t\treturn;\r\n\t}            \r\n\tstartBall = createNode(ball.a('x'), ball.a('y'), 'start').s({\r\n\t\t'shape3d': 'sphere',  \r\n\t\t'shape3d.color': '#FF703F'                    \r\n\t});  \r\n\r\n\tshape = new ht.Shape();\r\n\tshape.setPoints(new ht.List([\r\n\t\t{x: -d, y: d},\r\n\t\t{x: d, y: d},\r\n\t\t{x: d, y: -d},\r\n\t\t{x: -d, y: -d},\r\n\t\t{x: -d, y: d}\r\n\t]));\r\n\tshape.setThickness(4);\r\n\tshape.setTall(w);\r\n\tshape.setElevation(w\/2);\r\n\tshape.setClosePath(true);\r\n\tshape.s({\r\n\t\t'all.color': 'rgba(187, 187, 187, 0.8)', \r\n\t\t'all.transparent': true, \r\n\t\t'all.reverse.cull': true\r\n\t});\r\n\tdm.add(shape);                            \r\n}\r\nfunction createNode(x, y, tag){\r\n\tvar node = new ht.Node();\r\n\ttag = tag || \"cell_\" + x + \"_\" + y;               \r\n\tnode.setTag(tag);            \r\n\tnode.a({ x: x,  y: y });\r\n\tnode.s3(w*0.9, w*0.9, w*0.9);\r\n\tnode.p3(-d+w*x+w\/2, w\/2, -d+w*y+w\/2);\r\n\tnode.s({\r\n\t\t'all.reverse.cull': true,\r\n\t\t'shape3d.reverse.cull': true\r\n\t});\r\n\tdm.add(node);\r\n\treturn node;\r\n}                       \r\nfunction createFormPane() {           \r\n\tformPane = new ht.widget.FormPane();\r\n\tformPane.setWidth(230);\r\n\tformPane.setHeight(70);\r\n\tformPane.getView().className = 'formpane';\r\n\tdocument.body.appendChild(formPane.getView());            \r\n\tformPane.addRow(['Wall Frequency', {\r\n\t\tid: 'frequency',\r\n\t\tslider: {\r\n\t\t\tmin: 0,\r\n\t\t\tmax: 0.8,\r\n\t\t\tvalue: 0.1,                            \r\n\t\t\tonValueChanged: function(){\r\n\t\t\t\tcreateGrid();\r\n\t\t\t}\r\n\t\t}\r\n\t}], [100, 0.1]);                               \r\n\tformPane.addRow([\r\n\t\t{\r\n\t\t\tid: 'closest',\r\n\t\t\tcheckBox: {\r\n\t\t\t\tlabel: 'Try Closest'\r\n\t\t\t}\r\n\t\t},\r\n\t\t{\r\n\t\t\tid: 'diagonal',\r\n\t\t\tcheckBox: {\r\n\t\t\t\tlabel: 'Allow Diagonal'\r\n\t\t\t}        \r\n\t\t}\r\n\t], [0.1, 0.1]);\r\n}<\/pre>\n<p>\u53ea\u4eceiOS8\u652f\u6301WebGL\u540e\u5728\u79fb\u52a8\u7ec8\u7aef\u4e0a\u6d4b\u8bd53D\u5e94\u7528\u6bd4\u5f53\u524d\u7684\u5927\u90e8\u5206Android\u5e73\u677f\u8212\u670d\u591a\u4e86\uff0c\u4ee5\u4e0a\u7684\u4f8b\u5b50\u5728iOS\u7cfb\u7edf\u4e0b\u5448\u73b0\u548c\u7b97\u6cd5\u90fd\u633a\u6d41\u7545\uff0c<a href=\"http:\/\/v.youku.com\/v_show\/id_XODMzOTU1Njcy.html\">http:\/\/v.youku.com\/v_show\/id_XODMzOTU1Njcy.html<\/a>\uff0c\u5f53\u7136\u8fd9\u4e2a\u5c0f\u4f8b\u5b50\u6570\u636e\u91cf\u4e5f\u4e0d\u5927\uff0c\u672c\u8d28\u5176\u5b9e\u8fd8\u662f2D\u7684\u6700\u77ed\u8def\u5f84\u7b97\u6cd5\uff0c\u5e76\u975e\u771f\u6b63\u610f\u4e49\u76843D\u7a7a\u95f4\u6700\u77ed\u8def\u5f84\uff0c\u4f46\u8fd8\u662f\u8db3\u591f\u89e3\u51b3\u5f88\u591a\u5b9e\u9645\u5e94\u7528\u95ee\u9898\u4e86\u3002<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-271\" alt=\"Screen Shot 2014-11-24 at 5.09.13 PM\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM.png\" width=\"708\" height=\"421\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM.png 708w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM-300x178.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-24-at-5.09.13-PM-200x118.png 200w\" sizes=\"(max-width: 708px) 100vw, 708px\" \/><\/a><\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/player.youku.com\/embed\/XODMzOTU1Njcy\" height=\"498\" width=\"510\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/269"}],"collection":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":2,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"predecessor-version":[{"id":274,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/269\/revisions\/274"}],"wp:attachment":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}