{"id":621,"date":"2019-01-28T16:11:05","date_gmt":"2019-01-28T08:11:05","guid":{"rendered":"http:\/\/www.hightopo.com\/blog\/?p=621"},"modified":"2019-02-03T21:12:28","modified_gmt":"2019-02-03T13:12:28","slug":"%e5%9f%ba%e4%ba%8e-html5-%e7%9a%84-webgl-%e6%a5%bc%e5%ae%87%e8%87%aa%e6%8e%a7-3d-%e5%8f%af%e8%a7%86%e5%8c%96%e7%9b%91%e6%8e%a7","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/621.html","title":{"rendered":"\u57fa\u4e8e HTML5 \u7684 WebGL \u697c\u5b87\u81ea\u63a7 3D \u53ef\u89c6\u5316\u76d1\u63a7"},"content":{"rendered":"<p><span style=\"font-size: 18pt;\"><strong>\u524d\u8a00<\/strong><\/span><\/p>\n<p>\u667a\u6167\u697c\u5b87\u548c\u4eba\u4eec\u7684\u751f\u6d3b\u606f\u606f\u76f8\u5173\uff0c\u697c\u5b87\u667a\u80fd\u5316\u7a0b\u5ea6\u7684\u63d0\u9ad8\uff0c\u4f1a\u6781\u5927\u7a0b\u5ea6\u7684\u6539\u5584\u4eba\u4eec\u7684\u751f\u6d3b\u54c1\u8d28\uff0c\u5728\u5f53\u524d\u5de5\u4e1a\u4e92\u8054\u7f51\u5927\u80cc\u666f\u4e0b\u53d7\u5230\u5f88\u5927\u5173\u6ce8\u3002\u76ee\u524d\u667a\u6167\u697c\u5b87\u53ef\u89c6\u5316\u76d1\u63a7\u7684\u4e3b\u8981\u4f18\u70b9\u5305\u62ec:<\/p>\n<ul>\n<li>\u667a\u6167\u5316 &#8212; \u667a\u6167\u697c\u5b87\u662f\u4e00\u4e2a\u751f\u6001\u7cfb\u7edf\uff0c\u50cf\u4eba\u4e00\u6837\u62e5\u6709\u611f\u77e5\u80fd\u529b\u3001\u81ea\u6211\u5224\u65ad\u80fd\u529b\u4ee5\u53ca\u63a7\u5236\u80fd\u529b\u3002<\/li>\n<li>\u7eff\u8272\u5316 &#8212; \u7eff\u8272\u5efa\u7b51\u5728\u8017\u80fd\u3001\u4ea7\u80fd\u4ee5\u53ca\u80fd\u6e90\u7ba1\u7406\u65b9\u9762\u5b9e\u73b0\u7eff\u8272\u5316\uff0c\u697c\u5b87\u5b89\u9632\u5b9e\u73b0\u7eff\u8272\u5316\u76d1\u63a7\u3002<\/li>\n<li>\u8fd0\u884c\u6210\u672c\u53ef\u63a7\u5236 &#8212; \u57fa\u4e8e\u53ef\u6301\u7eed\u53d1\u5c55\u7684\u8981\u6c42\uff0c\u73b0\u4ee3\u5efa\u7b51\u3001\u5546\u4e1a\u5efa\u7b51\u9700\u8fd0\u884c50\u5e74\u4ee5\u4e0a\uff0c\u5efa\u7b51\u5728\u8fd0\u884c\u8fc7\u7a0b\u4e2d\u80fd\u6e90\u6d88\u8017\u5de8\u5927\uff0c\u5982\u4f55\u964d\u4f4e\u8fd0\u8425\u6210\u672c\u964d\u4f4e\uff0c\u4f7f\u5efa\u7b51\u5728\u4f4e\u78b3\u3001\u73af\u4fdd\u7684\u72b6\u6001\u4e0b\u5065\u5eb7\u8fd0\u884c\u3002<\/li>\n<\/ul>\n<p>\u4f20\u7edf\u7684 \u667a\u6167\u697c\u5b87\/\u697c\u5b87\u81ea\u52a8\u5316\/\u697c\u5b87\u5b89\u9632\/\u667a\u6167\u56ed\u533a \u5e38\u4f1a\u91c7\u7528 BIM\uff08\u5efa\u7b51\u4fe1\u606f\u6a21\u578b Building information modeling\uff09\u8f6f\u4ef6\uff0c\u5982 Autodesk \u7684 Revit \u6216 Bentley \u8fd9\u7c7b\u5efa\u7b51\u548c\u5de5\u7a0b\u8f6f\u4ef6\uff0c\u4f46\u8fd9\u4e9b BIM \u5efa\u6a21\u6a21\u578b\u7684\u6570\u636e\u5f80\u5f80\u8fc7\u4e8e\u5e9e\u5927\u81c3\u80bf\uff0c\u7edd\u5927\u90e8\u5206\u7ec6\u8282\u4fe1\u606f\u5bf9\u697c\u5b87\u81ea\u63a7\u610f\u4e49\u4e0d\u5927\uff0c\u53cd\u800c\u5f71\u54cd\u62d6\u7d2f\u4e86\u884c\u4e1a <strong>Web SCADA<\/strong> \u6216 <strong>Web \u7ec4\u6001<\/strong>\u76d1\u63a7\u7684\u8d8b\u52bf\uff0c\u6240\u4ee5\u6211\u4eec\u91c7\u7528\u4ee5 <strong>Hightopo<\/strong> \u7684 <strong>HT for Web<\/strong> \u4ea7\u54c1\u8f7b\u91cf\u5316 HTML5\/WebGL \u5efa\u6a21\u7684\u65b9\u6848\uff0c\u5b9e\u73b0\u5feb\u901f\u5efa\u6a21\u3001\u8fd0\u884c\u65f6\u8f7b\u91cf\u5316\u5230\u751a\u81f3\u624b\u673a\u7ec8\u7aef\u6d4f\u89c8\u5668\u5373\u53ef 3D \u53ef\u89c6\u5316\u8fd0\u7ef4\u7684\u826f\u597d\u6548\u679c\u3002<\/p>\n<p>\u672c\u7bc7\u6587\u7ae0\u901a\u8fc7\u5bf9\u667a\u80fd\u5efa\u7b51\u7684\u5efa\u6a21\uff0c\u9875\u9762\u52a8\u753b\u6548\u679c\u7684\u5b9e\u73b0\uff0c\u4ee5\u53ca\u9875\u9762\u4e3b\u8981\u529f\u80fd\u70b9\u8fdb\u884c\u9610\u8ff0\uff0c\u5e2e\u52a9\u6211\u4eec\u4e86\u89e3\u5982\u4f55\u4f7f\u7528\u00a0<a title=\"HT\" href=\"https:\/\/hightopo.com\/\" target=\"_blank\">HT<\/a>\u00a0\u5b9e\u73b0\u4e00\u4e2a\u7b80\u5355\u7684\u667a\u6167\u697c\u5b87\u53ef\u89c6\u5316\u76d1\u63a7\uff0c\u4ee5\u53ca\u5e2e\u52a9\u6211\u4eec\u4e86\u89e3\u667a\u6167\u697c\u5b87\uff0c\u697c\u5b87\u81ea\u52a8\u5316\u7684\u4f18\u52bf\u3002<\/p>\n<p>\u9884\u89c8\u5730\u5740\uff1a<a title=\"\u57fa\u4e8e HTML5 \u7684 WebGL \u697c\u5b87\u81ea\u63a7 3D \u53ef\u89c6\u5316\u76d1\u63a7\" href=\"http:\/\/www.hightopo.com\/demo\/ht-smart-building\/\" target=\"_blank\">\u57fa\u4e8e HTML5 \u7684 WebGL \u697c\u5b87\u81ea\u63a7 3D \u53ef\u89c6\u5316\u76d1\u63a7<\/a>\u00a0<a href=\"http:\/\/www.hightopo.com\/demo\/ht-smart-building\/\" target=\"_blank\">http:\/\/www.hightopo.com\/demo\/ht-smart-building\/<\/a><\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u754c\u9762\u7b80\u4ecb\u53ca\u6548\u679c\u9884\u89c8<\/strong><\/span><\/p>\n<p>\u754c\u9762\u901a\u8fc7 2d \u56fe\u7eb8\u53e0\u52a0\u5728 3d \u573a\u666f\u4e0a\u6765\u5b9e\u73b0 2d \u754c\u9762 \u4e0e 3d \u573a\u666f\u7684\u878d\u5408\uff0c2d \u754c\u9762\u901a\u8fc7\u81ea\u52a8\u5e03\u5c40\u7684\u673a\u5236\u5b9e\u73b0\u4e86\u624b\u673a\u7aef\u4e0e\u7535\u8111\u7aef\u7684\u54cd\u5e94\u5f0f\u5448\u73b0\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u754c\u9762\u521d\u59cb\u5316\u6548\u679c<\/strong><\/span><\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f291.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-634\" alt=\"\u538b\u7f291\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f291.gif\" width=\"640\" height=\"329\" \/><\/a><\/p>\n<p>\u754c\u9762\u521d\u59cb\u5316\u8fc7\u7a0b\u4e2d\u7684\u52a8\u753b\u5305\u62ec\u5730\u9762\u8def\u5f84\u7684\u5b9e\u65f6\u6e32\u67d3\uff0c\u697c\u5c42\u7684\u5c55\u5f00\uff0c\u697c\u5c42\u7684\u8f89\u5149\u626b\u63cf\uff0c\u697c\u5c42\u62a5\u8b66\u70b9\u52a8\u6001\u6c34\u6ce2\uff0c\u697c\u5c42\u76d1\u6d4b\u6570\u636e\u9762\u677f\u7684\u5b9e\u65f6\u53d8\u5316\u7b49\u7b49\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u76d1\u63a7\u754c\u9762\u6548<strong>\u679c<\/strong><\/strong><\/span><\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/3f22955eb2d08063085ff88b4dbe5424.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-638\" alt=\"3f22955eb2d08063085ff88b4dbe5424\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/3f22955eb2d08063085ff88b4dbe5424.gif\" width=\"640\" height=\"329\" \/><\/a><\/p>\n<p><strong>\u76d1\u63a7\u754c\u9762\u5305\u62ec\uff1a<\/strong><\/p>\n<ol>\n<li>\u4eba\u5458\u8fdb\u5165\u5927\u53a6\u7684\u5b9e\u65f6\u76d1\u63a7\uff0c\u9762\u677f\u4e2d\u52a8\u6001\u5237\u65b0\u4eba\u5458\u8fdb\u5165\u5927\u53a6\u7684\u5934\u50cf\u4ee5\u53ca\u5f53\u524d\u5927\u53a6\u4eba\u6570\u7b49\u5b9e\u65f6\u4fe1\u606f\u3002<\/li>\n<li>\u5927\u53a6\u7535\u68af\u8fd0\u884c\u60c5\u51b5\u5b9e\u65f6\u76d1\u63a7\uff0c\u7cfb\u7edf\u4e2d\u5c55\u793a\u7535\u68af\u5f53\u524d\u7684\u8fd0\u884c\u4f4d\u7f6e\u4ee5\u53ca\u662f\u5426\u5728\u8fd0\u884c\u7b49\u4fe1\u606f\u3002<\/li>\n<li>\u5927\u53a6\u67d0\u4e2a\u5177\u4f53\u697c\u5c42\u76d1\u63a7\u6570\u636e\u7684\u5b9e\u65f6\u76d1\u63a7\uff0c\u901a\u8fc7\u67f1\u72b6\u56fe\u7684\u5f62\u5f0f\u5c55\u793a\u4e86\u5f53\u524d\u697c\u5c42\u5177\u4f53\u4fe1\u606f\u7684\u5927\u5c0f\u3002<\/li>\n<li>\u5927\u53a6\u7ba1\u9053\u7684\u5b9e\u65f6\u76d1\u63a7\uff0c\u5c55\u793a\u4e86\u5f53\u524d\u667a\u80fd\u5efa\u7b51\u6240\u6709\u7ba1\u9053\u7684\u8fd0\u884c\u60c5\u51b5\u3002<\/li>\n<\/ol>\n<p><span style=\"font-size: 18pt;\"><strong>\u667a\u80fd\u5efa\u7b51\u5efa\u6a21<\/strong><\/span><\/p>\n<p>\u8be5 3d \u573a\u666f\u4e2d\u6240\u6709\u7684\u6a21\u578b\u5747\u4e3a\u7ebf\u6bb5\u548c\u516d\u9762\u4f53\u642d\u5efa\uff0c\u76f8\u6bd4\u8f83\u901a\u8fc7 3d Max \u5efa\u6a21\u7136\u540e\u901a\u8fc7 obj \u5bfc\u5165\u6765\u8bf4\u573a\u666f\u4e2d\u7684\u4e09\u89d2\u9762\u4f1a\u5c11\u5f88\u591a\uff0c\u66f4\u52a0\u7684\u8f7b\u91cf\u5316\uff0c\u4f8b\u5982\u573a\u666f\u4e2d\u5efa\u7b51\u7684\u697c\u5c42\uff0c\u901a\u8fc7 <strong>ht.Shape<\/strong>\u00a0\u7c7b\u7ed8\u5236\uff0c\u8be5\u7c7b\u4e2d\u8bb0\u5f55\u7740\u697c\u5c42 <strong>points<\/strong> \u70b9\u7684\u4fe1\u606f\u4ee5\u53ca <strong>segments<\/strong>\u00a0\u4e3a <strong>ht.List<\/strong>\u00a0\u7c7b\u578b\u7684\u7ebf\u6bb5\u6570\u7ec4\u4fe1\u606f\uff0c<strong>segments<\/strong> \u4ee3\u8868\u7740\u70b9\u7684\u8fde\u63a5\u65b9\u5f0f\uff0c\u7528\u4e8e\u544a\u8bc9 <strong>ht.Shape<\/strong>\u00a0\u5229\u7528\u70b9\u7684\u4fe1\u606f\u6765\u7ed8\u5236\u4e8c\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf\u6216\u8005\u4e09\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf\u6216\u8005\u76f4\u7ebf\u7b49\u4fe1\u606f\uff0c\u76f8\u5173\u5177\u4f53\u8bf4\u660e\u8bf7\u53c2\u8003 HT for Web \u7684<a href=\"http:\/\/www.hightopo.com\/guide\/guide\/core\/shape\/ht-shape-guide.html\" target=\"_blank\">[\u5f62\u72b6\u624b\u518c]<\/a>\uff0c\u4ee5\u4e0b\u4e3a\u7ed8\u5236\u5355\u5c42\u7684\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/20.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-631\" alt=\"20\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/20.jpg\" width=\"961\" height=\"370\" \/><\/a><\/p>\n<p>\u901a\u8fc7\u4e0a\u56fe\u53ef\u4ee5\u77e5\u9053\u6784\u5efa\u5b8c\u4e00\u5c42\u6a21\u578b\u4e4b\u540e\u5176\u5b83\u51e0\u5c42\u6a21\u578b\u5747\u4e3a\u76f8\u540c\u7684\uff0c\u53ea\u662f y \u8f74\u7684\u6570\u503c\u4e0d\u540c\uff0c\u901a\u8fc7\u53e0\u52a0\u51e0\u5c42\u4e4b\u540e\u4fbf\u53ef\u5f62\u6210\u4e00\u5e62\u5927\u697c\u7684\u8f6e\u5ed3\u3002\u5982\u679c\u7528\u6237\u9700\u8981\u642d\u5efa\u667a\u6167\u56ed\u533a\uff0c\u667a\u6167\u697c\u5b87\u7b49\u573a\u666f\uff0c\u5b8c\u5168\u53ef\u4ee5\u4f7f\u7528\u8fd9\u79cd\u57fa\u4e8e HTML5\/WebGL \u5efa\u6a21\u7684\u65b9\u6848\uff0c\u51cf\u5c11\u8003\u8651\u4f7f\u7528 BIM \u5efa\u6a21\u6a21\u578b\u3002\u573a\u666f\u4e2d\u7684\u7ba1\u9053\u4ee5\u53ca\u80cc\u666f\u5730\u56fe\u8def\u7ebf\u90fd\u4e3a\u70b9\u8fde\u7ebf\u4e4b\u540e\u6784\u6210\uff0c\u53ea\u662f\u901a\u8fc7\u4fee\u6539\u7ebf\u7684\u989c\u8272\u7c97\u7ec6\u6216\u8005\u8fdb\u884c\u8d34\u56fe\u6765\u4fee\u6539\u7ebf\u6216\u8005\u9762\u7684\u6837\u5f0f\uff0c\u573a\u666f\u4e2d\u7684\u7535\u68af\u4e3a\u4e00\u4e2a\u989c\u8272\u4e3a\u9ec4\u8272\u7684\u7b80\u5355\u516d\u9762\u4f53\uff0c\u7535\u68af\u7ebf\u4e5f\u4e3a\u4e00\u6761\u7ebf\u6bb5\u800c\u5df2\uff0c\u6240\u4ee5\u573a\u666f\u4e2d\u7684\u6a21\u578b\u90fd\u662f\u8f7b\u91cf\u5316\u7684\u5efa\u6a21\uff0c\u4f7f 3d \u573a\u666f\u8fd0\u884c\u6e32\u67d3\u7684\u66f4\u52a0\u6d41\u7545\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u573a\u666f\u5173\u952e\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>1. \u5730\u56fe\u8def\u7ebf\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>\u901a\u8fc7\u4e0a\u8ff0<strong>\u667a\u80fd\u5efa\u7b51\u5efa\u6a21<\/strong>\u7684\u5206\u6790\u6211\u4eec\u53ef\u4ee5\u77e5\u9053\u7ebf\u8def\u90fd\u662f\u4e3a\u70b9\u4e0e\u70b9\u4e4b\u95f4\u8fdb\u884c\u8fde\u7ebf\u800c\u751f\u6210\uff0c\u6240\u4ee5\u5f53\u6211\u4eec\u7ed8\u5236\u5b8c\u5730\u56fe\u7684\u8def\u5f84\u4e4b\u540e\u53ef\u4ee5\u5f97\u5230\u6240\u6709\u70b9\u7684\u4fe1\u606f\uff0c\u5047\u5982\u76f4\u7ebf <strong>AB<\/strong>\u00a0\u4e3a\u5730\u56fe\u4e2d\u7684\u67d0\u4e00\u6761\u7ebf\u6bb5\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u77e5\u9053\u70b9 <strong>A<\/strong>\u00a0\u4ee5\u53ca\u70b9 <strong>B<\/strong>\u00a0\u7684\u70b9\u7684\u5750\u6807\uff0c\u4e4b\u540e\u6211\u4eec\u53ef\u4ee5\u8ba1\u7b97 <strong>AB<\/strong> \u7ebf\u6bb5\u4e0a\u4efb\u610f\u4e00\u70b9 <strong>C<\/strong>\u00a0\u7684\u70b9\u7684\u5750\u6807\uff0c\u7136\u540e\u901a\u8fc7\u8fde\u63a5 <strong>A<\/strong>\u00a0\u70b9\u4e0e <strong>C<\/strong>\u00a0\u70b9\u6765\u5f62\u6210\u4e00\u6761\u4e0e <strong>AB<\/strong>\u00a0\u7ebf\u6bb5\u4f4d\u7f6e\u65b9\u5411\u76f8\u540c\u4f46\u662f\u5927\u5c0f\u6bd4 <strong>AB<\/strong>\u00a0\u7ebf\u6bb5\u77ed\u7684\u7ebf\uff0c\u76f4\u5230 <strong>AC<\/strong>\u00a0\u7ebf\u6bb5\u7684\u957f\u5ea6\u7b49\u4e8e <strong>AB<\/strong>\u00a0\u7ebf\u6bb5\u957f\u5ea6\u4e4b\u540e\u518d\u8fdb\u884c\u4e0b\u4e00\u6761\u8def\u5f84\u52a8\u753b\u7684\u7ed8\u5236\uff0c\u4ee5\u4e0b\u4e3a\u5173\u952e\u4f2a\u4ee3\u7801\u5c55\u793a\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> currentIndex \u4e3a\u5f53\u524d\u8def\u5f84\u7ed8\u5236\u5230\u7684\u70b9\u7684\u7d22\u5f15 <\/span>\r\n<span style=\"color: #008080;\"> 2<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> points \u4e3a\u5f53\u524d\u8def\u5f84\u6240\u6709\u70b9\u7684\u4fe1\u606f  currentPoints \u4e3a\u7ed8\u5236\u8fc7\u7a0b\u4e2d\u70b9\u7684\u4fe1\u606f <\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> segments \u4e3a\u5f53\u524d\u8def\u5f84\u6240\u6709\u70b9\u7684\u8fde\u63a5\u65b9\u5f0f\u4fe1\u606f currentSegments \u4e3a\u7ed8\u5236\u8fc7\u7a0b\u4e2d\u70b9\u7684\u8fde\u63a5\u65b9\u5f0f\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span>  \r\n<span style=\"color: #008080;\"> 5<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u8ff0\u6b64\u65f6 A \u70b9\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span> let fromPoint =<span style=\"color: #000000;\"> points[currentIndex]; \r\n<\/span><span style=\"color: #008080;\"> 7<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u8ff0\u6b64\u65f6 B \u70b9\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\"> 8<\/span> let toPoint = points[currentIndex + 1<span style=\"color: #000000;\">]; \r\n<\/span><span style=\"color: #008080;\"> 9<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u901a\u8fc7 AB \u4e24\u70b9\u4fe1\u606f\u7ec4\u6210\u4e00\u6761 AB \u65b9\u5411\u7684\u5411\u91cf<\/span>\r\n<span style=\"color: #008080;\">10<\/span> let pointVector = <span style=\"color: #0000ff;\">new<\/span> ht.Math.Vector2(toPoint.x - fromPoint.x, toPoint.y -<span style=\"color: #000000;\"> fromPoint.y); \r\n<\/span><span style=\"color: #008080;\">11<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bb0\u5f55\u8be5\u5411\u91cf\u7684\u957f\u5ea6\uff0c\u7528\u4e8e\u5224\u65ad AC \u662f\u5426\u5927\u4e8e\u7b49\u4e8e AB<\/span>\r\n<span style=\"color: #008080;\">12<\/span> let pointVectorLength =<span style=\"color: #000000;\"> pointVector.length(); \r\n<\/span><span style=\"color: #008080;\">13<\/span> \r\n<span style=\"color: #008080;\">14<\/span> let currentPoints = [], currentSegments =<span style=\"color: #000000;\"> [];\r\n<\/span><span style=\"color: #008080;\">15<\/span> \r\n<span style=\"color: #008080;\">16<\/span> <span style=\"color: #0000ff;\">for<\/span>(let i = 0; i &lt; currentIndex + 1; i++<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">17<\/span> <span style=\"color: #000000;\">    currentPoints.push({\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">      x: points[i].x,\r\n<\/span><span style=\"color: #008080;\">19<\/span> <span style=\"color: #000000;\">      y: points[i].y\r\n<\/span><span style=\"color: #008080;\">20<\/span> <span style=\"color: #000000;\">    });\r\n<\/span><span style=\"color: #008080;\">21<\/span> <span style=\"color: #000000;\">    currentSegments.push(segments[i]);\r\n<\/span><span style=\"color: #008080;\">22<\/span> }<\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4e0a\u8ff0\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u6211\u4eec\u83b7\u53d6\u5230\u4e86 currentPoints \u4ee5\u53ca currentSegments \u7684\u4fe1\u606f\u4e86\uff0c\u4e4b\u540e\u4fbf\u8981\u8ba1\u7b97\u5728 fromPoint(A\u70b9) \u4e0e toPoint(B\u70b9) \u8fde\u7ebf\u4e0a\u70b9\u7684\u5750\u6807\uff0c\u5373 C \u70b9\uff0c\u4ee5\u4e0b\u4e3a\u8ba1\u7b97 C \u70b9\u7684\u5173\u952e\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> addLength \u4e3a\u6bcf\u6b21\u589e\u52a0\u7684\u7ebf\u6bb5\u957f\u5ea6\u503c\uff0c\u8be5\u7a0b\u5e8f\u4e2d\u4f7f\u7528 500 \u5373\u6bcf\u6b21\u957f\u5ea6\u589e\u52a0 500<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span> let nextVectorLength = currentVectorLength +<span style=\"color: #000000;\"> addLength, \r\n<\/span><span style=\"color: #008080;\"> 3<\/span> <span style=\"color: #000000;\">    tempPoint;\r\n<\/span><span style=\"color: #008080;\"> 4<\/span>     \r\n<span style=\"color: #008080;\"> 5<\/span> roadData.currentVectorLength =<span style=\"color: #000000;\"> nextVectorLength;\r\n<\/span><span style=\"color: #008080;\"> 6<\/span> \r\n<span style=\"color: #008080;\"> 7<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad AC \u7ebf\u6bb5\u7684\u957f\u5ea6\u662f\u5426\u5927\u4e8e AB <\/span>\r\n<span style=\"color: #008080;\"> 8<\/span> <span style=\"color: #0000ff;\">if<\/span>(nextVectorLength &gt;<span style=\"color: #000000;\"> pointVectorLength) {\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>     nextVectorLength =<span style=\"color: #000000;\"> pointVectorLength;\r\n<\/span><span style=\"color: #008080;\">10<\/span>     roadData.currentVectorLength = 0<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">11<\/span>     roadData.currentIndex = currentIndex + 1<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">12<\/span> <span style=\"color: #000000;\">}\r\n<\/span><span style=\"color: #008080;\">13<\/span> \r\n<span style=\"color: #008080;\">14<\/span> <span style=\"color: #000000;\">pointVector.setLength(nextVectorLength);\r\n<\/span><span style=\"color: #008080;\">15<\/span> \r\n<span style=\"color: #008080;\">16<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e3a C \u70b9\u5750\u6807<\/span>\r\n<span style=\"color: #008080;\">17<\/span> tempPoint = {x: pointVector.x + fromPoint.x, y: pointVector.y +<span style=\"color: #000000;\"> fromPoint.y}; \r\n<\/span><span style=\"color: #008080;\">18<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5f80 currentPoints \u6dfb\u52a0 C \u70b9\u5750\u6807<\/span>\r\n<span style=\"color: #008080;\">19<\/span> <span style=\"color: #000000;\">currentPoints.push(tempPoint); \r\n<\/span><span style=\"color: #008080;\">20<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5f80 currentSegments \u6dfb\u52a0 C \u70b9\u8fde\u63a5\u65b9\u5f0f\uff0c\u6b64\u7a0b\u5e8f\u4e2d\u90fd\u4e3a\u76f4\u7ebf\u8fde\u63a5\uff0c\u6240\u4ee5\u503c\u90fd\u4e3a 2<\/span>\r\n<span style=\"color: #008080;\">21<\/span> currentSegments.push(2<span style=\"color: #000000;\">); \r\n<\/span><span style=\"color: #008080;\">22<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> roadNode \u5373\u4e3a ht.Shape \u7c7b \u91cd\u65b0\u8bbe\u7f6e ht.Shape \u7c7b\u70b9\u7684\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\">23<\/span> <span style=\"color: #000000;\">roadNode.setPoints(currentPoints);  \r\n<\/span><span style=\"color: #008080;\">24<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u91cd\u65b0\u8bbe\u7f6e ht.Shape \u7c7b\u70b9\u7684\u8fde\u63a5\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\">25<\/span> roadNode.setSegments(currentSegments);<\/pre>\n<\/div>\n<p>\u4ee5\u4e0b\u4e3a\u52a8\u753b\u4ee3\u7801\u6267\u884c\u6d41\u7a0b\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u52a8\u753b\u6d41\u7a0b\u56fe.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-632\" alt=\"\u52a8\u753b\u6d41\u7a0b\u56fe\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u52a8\u753b\u6d41\u7a0b\u56fe.png\" width=\"1111\" height=\"451\" \/><\/a><\/p>\n<p>\u4ee5\u4e0b\u4e3a\u7ed8\u5236\u4e00\u6761\u8def\u7ebf\u52a8\u753b\u7684\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f293.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-635\" alt=\"\u538b\u7f293\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f293.gif\" width=\"640\" height=\"331\" \/><\/a><\/p>\n<p>\u7a0b\u5e8f\u4e2d\u901a\u8fc7<strong>\u5411\u91cf<\/strong>\u7684\u8ba1\u7b97\u65b9\u5f0f\u6765\u4e0d\u65ad\u83b7\u53d6 <strong>C<\/strong>\u00a0\u70b9\u7684\u5750\u6807\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u7528\u5176\u5b83\u65b9\u5f0f\u6765\u8ba1\u7b97 <strong>C<\/strong>\u00a0\u70b9\u7684\u5750\u6807\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>2. \u6c34\u6ce2\u4ee5\u53ca\u626b\u63cf\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>\u6c34\u6ce2\u4ee5\u53ca\u626b\u63cf\u52a8\u753b\u90fd\u662f\u901a\u8fc7 <strong>HT<\/strong>\u00a0\u63d0\u4f9b\u7684\u4fee\u6539\u56fe\u6807\u77e9\u5f62\u6846\u4fe1\u606f api \u6765\u8fdb\u884c\u63a7\u5236\uff0c\u901a\u8fc7\u8c03\u5ea6\u7684\u65b9\u5f0f\u4e0d\u65ad\u4fee\u6539\u56fe\u6807\u77e9\u5f62\u6846\u5927\u5c0f\u6765\u4ea7\u751f\u6c34\u6ce2\u4ee5\u53ca\u626b\u63cf\u7684\u52a8\u753b\u6548\u679c\uff0c<strong>\u8c03\u5ea6<\/strong>\u7684\u5177\u4f53\u7528\u6cd5\u53ef\u4ee5\u53c2\u8003 HT for Web \u7684<a href=\"http:\/\/www.hightopo.com\/guide\/guide\/core\/schedule\/ht-schedule-guide.html\" target=\"_blank\">[\u8c03\u5ea6\u624b\u518c]<\/a>\uff0c\u4ee5\u4e0b\u4e3a\u6c34\u6ce2\u52a8\u753b\u7684\u5173\u952e\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> waterWaveNodes \u6240\u6709\u6c34\u6ce2\u8282\u70b9<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span> let waterWaveTask =<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 3<\/span>     interval: 100, <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6307\u6bcf\u9694 100 ms \u8c03\u7528 action \u51fd\u6570\u4e00\u6b21<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span>     action: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\">(data){\r\n<\/span><span style=\"color: #008080;\"> 5<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad waterWaveNodes \u662f\u5305\u542b data<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span>         <span style=\"color: #0000ff;\">if<\/span>(waterWaveNodes.indexOf(data) &gt; -1<span style=\"color: #000000;\">) { \r\n<\/span><span style=\"color: #008080;\"> 7<\/span>        <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u6b64\u65f6\u56fe\u6807\u77e9\u5f62\u6846\u4fe1\u606f circleRect \u662f\u4e2a\u957f\u5ea6\u4e3a 4 \u7684\u6570\u7ec4 \u5206\u522b\u8868\u793a x, y, width, height<\/span>\r\n<span style=\"color: #008080;\"> 8<\/span>             let circleRect = data.a('circleRect'<span style=\"color: #000000;\">); \r\n<\/span><span style=\"color: #008080;\"> 9<\/span>    \r\n<span style=\"color: #008080;\">10<\/span>             <span style=\"color: #0000ff;\">if<\/span><span style=\"color: #000000;\">(circleRect) {\r\n<\/span><span style=\"color: #008080;\">11<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u901a\u8fc7\u4fee\u6539\u9ad8\u5ea6\u6765\u53d8\u5927\u6c34\u6ce2\u5927\u5c0f<\/span>\r\n<span style=\"color: #008080;\">12<\/span>                 let nextHeight = circleRect[3] + 10<span style=\"color: #000000;\">; \r\n<\/span><span style=\"color: #008080;\">13<\/span>                 \r\n<span style=\"color: #008080;\">14<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u9ad8\u5ea6\u6700\u5927\u503c\u4e3a 250 <\/span>\r\n<span style=\"color: #008080;\">15<\/span>                 <span style=\"color: #0000ff;\">if<\/span>(nextHeight &lt; 250<span style=\"color: #000000;\">) { \r\n<\/span><span style=\"color: #008080;\">16<\/span>                      <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5bf9\u5e94\u4fee\u6539 y \u7684\u5927\u5c0f\uff0cy \u7684\u589e\u52a0\u5927\u5c0f\u4e3a\u9ad8\u5ea6\u7684\u4e00\u534a<\/span>\r\n<span style=\"color: #008080;\">17<\/span>                     circleRect[1] = circleRect[1] - 5<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">18<\/span>                     circleRect[3] =<span style=\"color: #000000;\"> nextHeight;\r\n<\/span><span style=\"color: #008080;\">19<\/span>                     data.a('circleRect'<span style=\"color: #000000;\">, circleRect);\r\n<\/span><span style=\"color: #008080;\">20<\/span>                     data.a('borderColor', 'rgba(255, 133, 133, ' + (1 - circleRect[3] \/ 250) + ')'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">21<\/span> <span style=\"color: #000000;\">                }\r\n<\/span><span style=\"color: #008080;\">22<\/span>                 <span style=\"color: #0000ff;\">else<\/span><span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\">23<\/span>                     data.a('circleRect', [-0.5,128,257,0<span style=\"color: #000000;\">]);\r\n<\/span><span style=\"color: #008080;\">24<\/span>                     data.a('borderColor', 'rgba(255, 133, 133)'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">25<\/span> <span style=\"color: #000000;\">                }\r\n<\/span><span style=\"color: #008080;\">26<\/span>                 \r\n<span style=\"color: #008080;\">27<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">28<\/span>             <span style=\"color: #0000ff;\">else<\/span><span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\">29<\/span>                 data.a('circleRect', [-0.5,128,257,0<span style=\"color: #000000;\">]);\r\n<\/span><span style=\"color: #008080;\">30<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">31<\/span>             \r\n<span style=\"color: #008080;\">32<\/span> <span style=\"color: #000000;\">        }\r\n<\/span><span style=\"color: #008080;\">33<\/span> <span style=\"color: #000000;\">    }    \r\n<\/span><span style=\"color: #008080;\">34<\/span> <span style=\"color: #000000;\">};\r\n<\/span><span style=\"color: #008080;\">35<\/span> dm3d.addScheduleTask(waterWaveTask); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u65b0\u589e\u8be5\u8c03\u5ea6\u4efb\u52a1<\/span><\/pre>\n<\/div>\n<p>\u4e0b\u56fe\u4e3a\u6c34\u6ce2\u5728 2d \u4e2d\u7684\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f295.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-636\" alt=\"\u538b\u7f295\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f295.gif\" width=\"494\" height=\"252\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>3. \u6570\u5b57\u53d8\u5316\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>\u4ece\u7a0b\u5e8f\u7684\u622a\u56fe\u4e2d\u53ef\u4ee5\u770b\u5230\u5728 2d \u9762\u677f\u4ee5\u53ca 3d \u573a\u666f\u4e2d\u90fd\u6709\u6570\u5b57\u5728\u52a8\u6001\u7684\u53d8\u5316\uff0c\u8fd9\u90e8\u5206\u4e3b\u8981\u901a\u8fc7\u6570\u636e\u7ed1\u5b9a\u52a8\u6001\u6765\u4fee\u6539\u6570\u503c\u7684\u5927\u5c0f\uff0c\u5173\u4e8e\u6570\u636e\u7ed1\u5b9a\u53ef\u4ee5\u53c2\u8003 HT for Web \u7684<a href=\"http:\/\/www.hightopo.com\/guide\/guide\/core\/databinding\/ht-databinding-guide.html\" target=\"_blank\">[\u6570\u636e\u7ed1\u5b9a\u624b\u518c]<\/a>\uff0c\u4e5f\u662f\u901a\u8fc7\u8c03\u5ea6\u6765\u4e0d\u65ad\u4fee\u6539\u6570\u503c\u7684\u5927\u5c0f\uff0c\u7a0b\u5e8f\u4e2d\u6211\u5c01\u88c5\u4e86\u4ea7\u751f\u968f\u673a\u6570\u7684\u4ee3\u7801\uff0c\u7528\u4e8e\u6bcf\u6b21\u4ea7\u751f\u968f\u673a\u6570\u4e4b\u540e\u7ed1\u5b9a\u5230\u5bf9\u5e94\u7684\u8282\u70b9\u4e0a\uff0c\u4ee5\u4e0b\u4e3a\u4fee\u6539 2d \u9762\u677f\u4e0a\u6570\u5b57\u7684\u53d8\u5316\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> numNode(1-7) \u4e3a 2d \u9762\u677f\u4e2d\u5bf9\u5e94\u6570\u5b57\u7684\u8282\u70b9<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> data.a('ht.value', number) \u5373\u4e3a\u52a8\u6001\u4fee\u6539 attr \u4e0a\u7684 ht.value \u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> getRandomValue \u4e3a\u81ea\u5df1\u5c01\u88c5\u7684\u4ea7\u751f\u968f\u673a\u6570\u7684\u65b9\u6cd5<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span> <span style=\"color: #0000ff;\">this<\/span>.change2dNumTask =<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 5<\/span>         interval: 1000<span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>         action: (data) =&gt;<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data === numNode1 || data ===<span style=\"color: #000000;\"> numNode2) {\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>                 data.a('ht.value', util.getRandomValue([500, 999], 5<span style=\"color: #000000;\">));\r\n<\/span><span style=\"color: #008080;\"> 9<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">10<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data === numNode3 || data ===<span style=\"color: #000000;\"> numNode4) {\r\n<\/span><span style=\"color: #008080;\">11<\/span>                 data.s('text', util.getRandomValue([0, 30], 2) + '%'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">12<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">13<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data ===<span style=\"color: #000000;\"> numNode5) {\r\n<\/span><span style=\"color: #008080;\">14<\/span>                 data.a('ht.value', util.getRandomValue([0, 99999], 5, 3<span style=\"color: #000000;\">));\r\n<\/span><span style=\"color: #008080;\">15<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">16<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data ===<span style=\"color: #000000;\"> numNode6) {\r\n<\/span><span style=\"color: #008080;\">17<\/span>                 data.a('ht.value', util.getRandomValue([0, 100], 2<span style=\"color: #000000;\">));\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">19<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data ===<span style=\"color: #000000;\"> numNode7) {\r\n<\/span><span style=\"color: #008080;\">20<\/span>                 data.a('ht.value', util.getRandomValue([0, 100], 2<span style=\"color: #000000;\">));\r\n<\/span><span style=\"color: #008080;\">21<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">22<\/span> <span style=\"color: #000000;\">       }        \r\n<\/span><span style=\"color: #008080;\">23<\/span> <span style=\"color: #000000;\">    };\r\n<\/span><span style=\"color: #008080;\">24<\/span> dm2d.addScheduleTask(<span style=\"color: #0000ff;\">this<\/span>.change2dNumTask); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u65b0\u589e\u8be5\u8c03\u5ea6\u4efb\u52a1<\/span><\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4ee5\u4e0a\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u4fee\u6539\u6570\u503c\u662f\u901a\u8fc7\u4fee\u6539\u8282\u70b9\u7684 attr \u4ee5\u53ca style \u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027\u503c\u6765\u52a8\u6001\u53d8\u5316\u6570\u503c\uff0c\u5f53\u7136\u5728\u7a0b\u5e8f\u4e2d 2d \u9762\u677f\u53ef\u80fd\u8fd8\u4f1a\u9690\u85cf\uff0c\u6b64\u65f6\u8be5\u8c03\u5ea6\u4efb\u52a1\u5c31\u4e0d\u9700\u8981\u6267\u884c\uff0c\u53ef\u4ee5\u8c03\u7528 removeScheduleTask \u65b9\u6cd5\u6765\u79fb\u9664\u6b64\u8c03\u5ea6\u4efb\u52a1\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>4. \u67f1\u72b6\u56fe\u9ad8\u5ea6\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>\u5728 3d \u573a\u666f\u4e2d\u67f1\u72b6\u4f53\u4e5f\u662f\u4e00\u4e2a\u516d\u9762\u4f53\uff0c\u53ea\u662f\u56db\u5468\u7528\u4e86\u6e10\u53d8\u7684\u8d34\u56fe\uff0c\u4ee5\u53ca\u9876\u9762\u7528\u4e86\u4e00\u5f20\u7eaf\u8272\u7684\u8d34\u56fe\u6784\u9020\u51fa\u6765\uff0c\u6bcf\u4e2a\u516d\u9762\u4f53\u90fd\u6709\u9ad8\u5ea6\u7684\u4fe1\u606f\uff0c<strong>HT<\/strong>\u00a0\u4e2d\u901a\u8fc7 <strong>node.getTall()<\/strong>\u00a0\u6765\u83b7\u53d6\u5f53\u524d\u516d\u9762\u4f53\u7684\u9ad8\u5ea6\u503c\uff0c\u6839\u636e\u4e0a\u4e00\u8282\u8bb2\u7684\u6570\u636e\u7ed1\u5b9a\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u5c55\u793a\u67f1\u72b6\u56fe\u7684\u65f6\u5019\u5faa\u73af\u83b7\u53d6\u6240\u6709\u67f1\u72b6\u4f53\u8282\u70b9\u7684\u9ad8\u5ea6\u503c\u5927\u5c0f\u5047\u5982\u547d\u540d\u4e3a <strong>tall<\/strong>\uff0c\u4e4b\u540e\u901a\u8fc7 <strong>node.a(&#8216;tall&#8217;, tall)<\/strong>\u00a0\u5c06\u8be5\u503c\u5b58\u50a8\u5230\u5f53\u524d\u67f1\u72b6\u56fe\u8282\u70b9\u7684 <strong>attr<\/strong>\u00a0\u5bf9\u8c61\u4e0a\u9762\uff0c\u4e4b\u540e\u5728\u67f1\u72b6\u4f53\u521d\u59cb\u5316\u7684\u65f6\u5019\u53ef\u4ee5\u4e0d\u65ad\u4fee\u6539\u9ad8\u5ea6\u503c\u6765\u52a8\u6001\u6539\u53d8\u9ad8\u5ea6\uff0c\u5f53\u9ad8\u5ea6\u503c\u5927\u4e8e <strong>node.a(&#8216;tall&#8217;)<\/strong>\u00a0\u5219\u8bf4\u660e\u5f53\u524d\u67f1\u72b6\u4f53\u521d\u59cb\u5316\u7684\u9ad8\u5ea6\u5df2\u7ecf\u5b8c\u6210\u3002\u4ee5\u4e0b\u4e3a\u76f8\u5173\u7684\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> charts.forEach((chart) =&gt;<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 2<\/span>     !chart.a('tall') &amp;&amp; chart.a('tall', chart.getTall()); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5c06\u9ad8\u5ea6\u5b58\u50a8\u5230 attr \u4e0a<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>     chart.setTall(0); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u521d\u59cb\u9ad8\u5ea6\u4e3a 0<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span> <span style=\"color: #000000;\">});\r\n<\/span><span style=\"color: #008080;\"> 5<\/span> <span style=\"color: #0000ff;\">this<\/span>.chartAnimteTask =<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>         interval: 25<span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>         action: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\">(data){\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>             <span style=\"color: #0000ff;\">if<\/span>(charts.indexOf(data) &gt; -1<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>                 <span style=\"color: #0000ff;\">if<\/span>(finishNum !==<span style=\"color: #000000;\"> chartLength) {\r\n<\/span><span style=\"color: #008080;\">10<\/span>                     <span style=\"color: #0000ff;\">if<\/span>(data.getTall() !== data.a('tall'<span style=\"color: #000000;\">)) {\r\n<\/span><span style=\"color: #008080;\">11<\/span>                         let nextTall = data.getTall() + deep; <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> deep \u4e3a\u6bcf\u6b21\u589e\u52a0\u7684\u9ad8\u5ea6<\/span>\r\n<span style=\"color: #008080;\">12<\/span>                         let tall = data.a('tall'); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u521d\u59cb\u5316\u9ad8\u5ea6 <\/span>\r\n<span style=\"color: #008080;\">13<\/span>                         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u4e0b\u4e00\u4e2a\u9ad8\u5ea6\u662f\u5426\u5927\u4e8e\u521d\u59cb\u5316\u9ad8\u5ea6<\/span>\r\n<span style=\"color: #008080;\">14<\/span>                         <span style=\"color: #0000ff;\">if<\/span>(nextTall &lt;<span style=\"color: #000000;\"> tall) {\r\n<\/span><span style=\"color: #008080;\">15<\/span> <span style=\"color: #000000;\">                            data.setTall(nextTall);\r\n<\/span><span style=\"color: #008080;\">16<\/span> <span style=\"color: #000000;\">                        }\r\n<\/span><span style=\"color: #008080;\">17<\/span>                         <span style=\"color: #0000ff;\">else<\/span><span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">                            data.setTall(tall);\r\n<\/span><span style=\"color: #008080;\">19<\/span>                             finishNum++<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">20<\/span> <span style=\"color: #000000;\">                        }\r\n<\/span><span style=\"color: #008080;\">21<\/span> <span style=\"color: #000000;\">                    }    \r\n<\/span><span style=\"color: #008080;\">22<\/span> <span style=\"color: #000000;\">                }\r\n<\/span><span style=\"color: #008080;\">23<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">24<\/span> <span style=\"color: #000000;\">        }    \r\n<\/span><span style=\"color: #008080;\">25<\/span> <span style=\"color: #000000;\">};\r\n<\/span><span style=\"color: #008080;\">26<\/span> dm3d.addScheduleTask(<span style=\"color: #0000ff;\">this<\/span>.chartAnimteTask); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u65b0\u589e\u8be5\u8c03\u5ea6\u4efb\u52a1<\/span><\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4e0a\u9762\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u52a8\u753b\u6bcf\u4e00\u6b65\u7684\u7a0b\u5e8f\u6267\u884c\u4e5f\u662f\u901a\u8fc7\u8c03\u5ea6\u6765\u5b8c\u6210\u7684\uff0c\u4e0e\u524d\u6587\u51e0\u4e2a\u52a8\u753b\u7684\u5b9e\u73b0\u65b9\u5f0f\u7c7b\u4f3c\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>5. 3d \u955c\u5934\u63a8\u8fdb\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>3d \u573a\u666f\u4e2d\u89c6\u91ce\u7684\u63a8\u8fdb\u540e\u9000\u90fd\u662f\u901a\u8fc7 HT api \u63d0\u4f9b\u7684\u4fee\u6539 <strong>eye<\/strong>\u00a0\u4ee5\u53ca <strong>center<\/strong>\u00a0\u7684\u6570\u503c\u65b9\u6cd5\u6765\u5b9e\u73b0\uff0c\u901a\u8fc7\u4e0d\u65ad\u8c03\u7528 setEye \u4ee5\u53ca setCenter \u65b9\u6cd5\u6765\u8fbe\u5230\u4fee\u6539\u89c6\u89d2\u7684\u76ee\u7684\uff0ceye \u7c7b\u6bd4\u4eba\u773c\u775b\u6240\u5904\u7684\u4f4d\u7f6e\uff0ccenter \u7c7b\u6bd4\u4eba\u773c\u775b\u805a\u7126\u7684\u4f4d\u7f6e\uff0c\u4ee5\u4e0b\u4e3a\u5b9e\u73b0\u955c\u5934\u63a8\u8fdb\u5173\u952e\u7684\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> let e = ht.Default.clone(g3d.getEye()), <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u5f53\u524d\u773c\u775b\u7684\u4f4d\u7f6e<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span>     c = ht.Default.clone(g3d.getCenter()); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u5f53\u524d\u773c\u775b\u805a\u7126\u7684\u4f4d\u7f6e<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> eye \u4e3a\u9700\u8981\u4fee\u6539\u7684\u5bf9\u5e94 eye \u503c<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> center \u4e3a\u9700\u8981\u4fee\u6539\u7684\u5bf9\u5e94 center \u503c<\/span>\r\n<span style=\"color: #008080;\"> 5<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u4ee5\u4e0b\u4e3a\u5206\u522b\u83b7\u53d6 eye \u4e0e center \u5728 xyz \u4e09\u4e2a\u5750\u6807\u8f74\u4e4b\u95f4\u7684\u5dee\u503c<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span>     let edx = eye[0] - e[0<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>         edz = eye[1] - e[1<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>         edy = eye[2] - e[2<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>         cdx = center[0] - c[0<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\">10<\/span>         cdz = center[1] - c[1<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\">11<\/span>         cdy = center[2] - c[2<span style=\"color: #000000;\">];\r\n<\/span><span style=\"color: #008080;\">12<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5f00\u542f\u4e0d\u65ad\u4fee\u6539 eye \u4e0e center \u7684\u52a8\u753b<\/span>\r\n<span style=\"color: #008080;\">13<\/span> <span style=\"color: #000000;\">    ht.Default.startAnim({\r\n<\/span><span style=\"color: #008080;\">14<\/span>         duration: time ? time : 3000<span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\">15<\/span>         easing: <span style=\"color: #0000ff;\">function<\/span>(t){ <span style=\"color: #0000ff;\">return<\/span><span style=\"color: #000000;\"> t; },\r\n<\/span><span style=\"color: #008080;\">16<\/span>         finishFunc: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\">() {\r\n<\/span><span style=\"color: #008080;\">17<\/span>             <span style=\"color: #0000ff;\">if<\/span>(<span style=\"color: #0000ff;\">typeof<\/span> cb === 'function'<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">                cb();\r\n<\/span><span style=\"color: #008080;\">19<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">20<\/span> <span style=\"color: #000000;\">        },\r\n<\/span><span style=\"color: #008080;\">21<\/span>         action: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\"> (v) {\r\n<\/span><span style=\"color: #008080;\">22<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> v \u4e3a\u4ece 0-1 \u53d8\u6362\u7684\u503c <\/span>\r\n<span style=\"color: #008080;\">23<\/span> <span style=\"color: #000000;\">            g3d.setEye([\r\n<\/span><span style=\"color: #008080;\">24<\/span>                 e[0] + edx *<span style=\"color: #000000;\"> v,\r\n<\/span><span style=\"color: #008080;\">25<\/span>                 e[1] + edz *<span style=\"color: #000000;\"> v,\r\n<\/span><span style=\"color: #008080;\">26<\/span>                 e[2] + edy *<span style=\"color: #000000;\"> v\r\n<\/span><span style=\"color: #008080;\">27<\/span> <span style=\"color: #000000;\">            ]);\r\n<\/span><span style=\"color: #008080;\">28<\/span> <span style=\"color: #000000;\">            g3d.setCenter([\r\n<\/span><span style=\"color: #008080;\">29<\/span>                 c[0] + cdx *<span style=\"color: #000000;\"> v,\r\n<\/span><span style=\"color: #008080;\">30<\/span>                 c[1] + cdz *<span style=\"color: #000000;\"> v,\r\n<\/span><span style=\"color: #008080;\">31<\/span>                 c[2] + cdy *<span style=\"color: #000000;\"> v\r\n<\/span><span style=\"color: #008080;\">32<\/span> <span style=\"color: #000000;\">            ]);\r\n<\/span><span style=\"color: #008080;\">33<\/span> <span style=\"color: #000000;\">        }\r\n<\/span><span style=\"color: #008080;\">34<\/span> });<\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4ee5\u4e0a\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u901a\u8fc7\u4fee\u6539 eye \u4e0e center \u5206\u522b\u5bf9\u5e94\u7684 xyz \u8f74\u7684\u503c\u4e0e\u5f53\u524d e \u4e0e c \u5206\u522b\u5bf9\u5e94\u7684 xyz \u8f74\u7684\u503c\u4e4b\u95f4\u7684\u8ddd\u79bb\u6765\u8fbe\u5230\u89c6\u89d2\u7684\u53d8\u5316\u3002<\/p>\n<p>\u4ee5\u4e0b\u4e3a\u8be5\u4ee3\u7801\u7684\u4e00\u4e2a\u5e94\u7528\u622a\u56fe:<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f290.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-633\" alt=\"\u538b\u7f290\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f290.gif\" width=\"640\" height=\"332\" \/><\/a><\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u603b\u7ed3<\/strong><\/span><\/p>\n<p>\u7269\u8054\u7f51\u901a\u8fc7\u5404\u79cd\u4fe1\u606f\u4f20\u611f\u8bbe\u5907\uff0c\u5b9e\u65f6\u91c7\u96c6\u4efb\u4f55\u9700\u8981\u76d1\u63a7\u3001\u8fde\u63a5\u3001\u4e92\u52a8\u7684\u7269\u4f53\u6216\u8fc7\u7a0b\u7b49\u5404\u79cd\u9700\u8981\u7684\u4fe1\u606f\uff0c\u4e0e\u4e92\u8054\u7f51\u7ed3\u5408\u5f62\u6210\u7684\u4e00\u4e2a\u5de8\u5927\u7f51\u7edc\u3002\u5b9e\u73b0\u4e86\u7269\u4e0e\u7269\u3001\u7269\u4e0e\u4eba\uff0c\u6240\u6709\u7684\u7269\u54c1\u4e0e\u7f51\u7edc\u7684\u8fde\u63a5\uff0c\u65b9\u4fbf\u8bc6\u522b\u3001\u7ba1\u7406\u548c\u63a7\u5236\u3002\u6240\u4ee5\u7269\u8054\u7f51\u5e26\u7ed9\u6211\u4eec\u7684\u667a\u6167\u697c\u5b87\u7684\u53ef\u89c6\u5316\u76d1\u63a7\u9700\u8981\u76d1\u63a7\u7684\u65b9\u9762\u53ef\u80fd\u8fd8\u6709\u5f88\u591a\uff0c\u8be5\u7cfb\u7edf\u4e2d\u9488\u5bf9\u4eba\u5458\u51fa\u5165\uff0c\u8bbe\u5907\u4fe1\u606f\uff0c\u7ba1\u9053\u4fe1\u606f\u7b49\u7684\u76d1\u63a7\u5b9e\u73b0\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u667a\u6167\u697c\u5b87\u76d1\u63a7\u7cfb\u7edf\uff0c\u7269\u8054\u7f51\u4e5f\u5c06\u7528\u6237\u7aef\u5ef6\u4f38\u548c\u6269\u5c55\u5230\u4e86\u4efb\u4f55\u7269\u54c1\u4e0e\u7269\u54c1\u4e4b\u95f4\uff0c\u8ba9\u6211\u4eec\u66f4\u52a0\u4e86\u89e3\u642d\u5efa\u667a\u6167\u56ed\u533a\uff0c\u667a\u6167\u6821\u56ed\u7b49\u573a\u666f\u76d1\u63a7\u4e4b\u540e\u8bbe\u5907\u53ef\u89c6\u5316\uff0c\u8d44\u4ea7\u53ef\u89c6\u5316\u5e26\u7ed9\u6211\u4eec\u7684\u76f4\u89c2\u6027\u3002\u573a\u666f\u4e2d\u7684\u53cd\u5149\u4e0e\u666f\u6df1\u7b49\u6548\u679c\u90fd\u662f HT \u6838\u5fc3\u5305\u63d0\u4f9b\u7684\u6548\u679c\uff0c\u6240\u6709\u7684\u6a21\u578b\u642d\u5efa\u4e0e\u52a8\u753b\u4e5f\u90fd\u662f\u901a\u8fc7 HT \u6838\u5fc3\u5305\u63d0\u4f9b\u7684 api \u8fdb\u884c\u5efa\u6a21\u4e0e\u52a8\u753b\u9a71\u52a8\uff0c\u6240\u4ee5\u5728\u7f51\u9875\u4e2d\u5c55\u793a\u4f1a\u5341\u5206\u6d41\u7545\uff0c\u5927\u5927\u63d0\u9ad8\u4e86\u7528\u6237\u7684\u4f53\u9a8c\uff0c\u5e76\u4e14\u5728\u79fb\u52a8\u7aef\u8868\u73b0\u4e5f\u5341\u5206\u53cb\u597d\u3002<\/p>\n<p>\u4ee5\u4e0b\u4e3a\u79fb\u52a8\u7aef\u7684\u7a0b\u5e8f\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/4C8EC9AD-2820-4D51-BB5B-D6E499569FAD.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-641\" alt=\"4C8EC9AD-2820-4D51-BB5B-D6E499569FAD\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/4C8EC9AD-2820-4D51-BB5B-D6E499569FAD.jpg\" width=\"736\" height=\"1318\" \/><\/a><\/p>\n<p>\u7a0b\u5e8f\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/2.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-630\" alt=\"2\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/2.jpg\" width=\"800\" height=\"532\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/1.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-629\" alt=\"1\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/1.jpg\" width=\"800\" height=\"531\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span style=\"font-size: 18pt;\"><strong>\u524d\u8a00<\/strong><\/span><\/p>\n<p>\u667a\u6167\u697c\u5b87\u548c\u4eba\u4eec\u7684\u751f\u6d3b\u606f\u606f\u76f8\u5173\uff0c\u697c\u5b87\u667a\u80fd\u5316\u7a0b\u5ea6\u7684\u63d0\u9ad8\uff0c\u4f1a\u6781\u5927\u7a0b\u5ea6\u7684\u6539\u5584\u4eba\u4eec\u7684\u751f\u6d3b\u54c1\u8d28\uff0c\u5728\u5f53\u524d\u5de5\u4e1a\u4e92\u8054\u7f51\u5927\u80cc\u666f\u4e0b\u53d7\u5230\u5f88\u5927\u5173\u6ce8\u3002\u76ee\u524d\u667a\u6167\u697c\u5b87\u53ef\u89c6\u5316\u76d1\u63a7\u7684\u4e3b\u8981\u4f18\u70b9\u5305\u62ec:<\/p>\n<ul>\n<li>\u667a\u6167\u5316 &#8212; \u667a\u6167\u697c\u5b87\u662f\u4e00\u4e2a\u751f\u6001\u7cfb\u7edf\uff0c\u50cf\u4eba\u4e00\u6837\u62e5\u6709\u611f\u77e5\u80fd\u529b\u3001\u81ea\u6211\u5224\u65ad\u80fd\u529b\u4ee5\u53ca\u63a7\u5236\u80fd\u529b\u3002<\/li>\n<li>\u7eff\u8272\u5316 &#8212; \u7eff\u8272\u5efa\u7b51\u5728\u8017\u80fd\u3001\u4ea7\u80fd\u4ee5\u53ca\u80fd\u6e90\u7ba1\u7406\u65b9\u9762\u5b9e\u73b0\u7eff\u8272\u5316\uff0c\u697c\u5b87\u5b89\u9632\u5b9e\u73b0\u7eff\u8272\u5316\u76d1\u63a7\u3002<\/li>\n<li>\u8fd0\u884c\u6210\u672c\u53ef\u63a7\u5236 &#8212; \u57fa\u4e8e\u53ef\u6301\u7eed\u53d1\u5c55\u7684\u8981\u6c42\uff0c\u73b0\u4ee3\u5efa\u7b51\u3001\u5546\u4e1a\u5efa\u7b51\u9700\u8fd0\u884c50\u5e74\u4ee5\u4e0a\uff0c\u5efa\u7b51\u5728\u8fd0\u884c\u8fc7\u7a0b\u4e2d\u80fd\u6e90\u6d88\u8017\u5de8\u5927\uff0c\u5982\u4f55\u964d\u4f4e\u8fd0\u8425\u6210\u672c\u964d\u4f4e\uff0c\u4f7f\u5efa\u7b51\u5728\u4f4e\u78b3\u3001\u73af\u4fdd\u7684\u72b6\u6001\u4e0b\u5065\u5eb7\u8fd0\u884c\u3002<\/li>\n<\/ul>\n<p>\u4f20\u7edf\u7684 \u667a\u6167\u697c\u5b87\/\u697c\u5b87\u81ea\u52a8\u5316\/\u697c\u5b87\u5b89\u9632\/\u667a\u6167\u56ed\u533a \u5e38\u4f1a\u91c7\u7528 BIM\uff08\u5efa\u7b51\u4fe1\u606f\u6a21\u578b Building information modeling\uff09\u8f6f\u4ef6\uff0c\u5982 Autodesk \u7684 Revit \u6216 Bentley \u8fd9\u7c7b\u5efa\u7b51\u548c\u5de5\u7a0b\u8f6f\u4ef6\uff0c\u4f46\u8fd9\u4e9b BIM \u5efa\u6a21\u6a21\u578b\u7684\u6570\u636e\u5f80\u5f80\u8fc7\u4e8e\u5e9e\u5927\u81c3\u80bf\uff0c\u7edd\u5927\u90e8\u5206\u7ec6\u8282\u4fe1\u606f\u5bf9\u697c\u5b87\u81ea\u63a7\u610f\u4e49\u4e0d\u5927\uff0c\u53cd\u800c\u5f71\u54cd\u62d6\u7d2f\u4e86\u884c\u4e1a <strong>Web SCADA<\/strong> \u6216 <strong>Web \u7ec4\u6001<\/strong>\u76d1\u63a7\u7684\u8d8b\u52bf\uff0c\u6240\u4ee5\u6211\u4eec\u91c7\u7528\u4ee5 <strong>Hightopo<\/strong> \u7684 <strong>HT for Web<\/strong> \u4ea7\u54c1\u8f7b\u91cf\u5316 HTML5\/WebGL \u5efa\u6a21\u7684\u65b9\u6848\uff0c\u5b9e\u73b0\u5feb\u901f\u5efa\u6a21\u3001\u8fd0\u884c\u65f6\u8f7b\u91cf\u5316\u5230\u751a\u81f3\u624b\u673a\u7ec8\u7aef\u6d4f\u89c8\u5668\u5373\u53ef 3D \u53ef\u89c6\u5316\u8fd0\u7ef4\u7684\u826f\u597d\u6548\u679c\u3002<\/p>\n<p>\u672c\u7bc7\u6587\u7ae0\u901a\u8fc7\u5bf9\u667a\u80fd\u5efa\u7b51\u7684\u5efa\u6a21\uff0c\u9875\u9762\u52a8\u753b\u6548\u679c\u7684\u5b9e\u73b0\uff0c\u4ee5\u53ca\u9875\u9762\u4e3b\u8981\u529f\u80fd\u70b9\u8fdb\u884c\u9610\u8ff0\uff0c\u5e2e\u52a9\u6211\u4eec\u4e86\u89e3\u5982\u4f55\u4f7f\u7528\u00a0<a title=\"HT\" href=\"https:\/\/hightopo.com\/\" target=\"_blank\">HT<\/a>\u00a0\u5b9e\u73b0\u4e00\u4e2a\u7b80\u5355\u7684\u667a\u6167\u697c\u5b87\u53ef\u89c6\u5316\u76d1\u63a7\uff0c\u4ee5\u53ca\u5e2e\u52a9\u6211\u4eec\u4e86\u89e3\u667a\u6167\u697c\u5b87\uff0c\u697c\u5b87\u81ea\u52a8\u5316\u7684\u4f18\u52bf\u3002<\/p>\n<p>\u9884\u89c8\u5730\u5740\uff1a<a title=\"\u57fa\u4e8e HTML5 \u7684 WebGL \u697c\u5b87\u81ea\u63a7 3D \u53ef\u89c6\u5316\u76d1\u63a7\" href=\"http:\/\/www.hightopo.com\/demo\/ht-smart-building\/\" target=\"_blank\">\u57fa\u4e8e HTML5 \u7684 WebGL \u697c\u5b87\u81ea\u63a7 3D \u53ef\u89c6\u5316\u76d1\u63a7<\/a>\u00a0<a href=\"http:\/\/www.hightopo.com\/demo\/ht-smart-building\/\" target=\"_blank\">http:\/\/www.hightopo.com\/demo\/ht-smart-building\/<\/a><\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u754c\u9762\u7b80\u4ecb\u53ca\u6548\u679c\u9884\u89c8<\/strong><\/span><\/p>\n<p>\u754c\u9762\u901a\u8fc7 2d \u56fe\u7eb8\u53e0\u52a0\u5728 3d \u573a\u666f\u4e0a\u6765\u5b9e\u73b0 2d \u754c\u9762 \u4e0e 3d \u573a\u666f\u7684\u878d\u5408\uff0c2d \u754c\u9762\u901a\u8fc7\u81ea\u52a8\u5e03\u5c40\u7684\u673a\u5236\u5b9e\u73b0\u4e86\u624b\u673a\u7aef\u4e0e\u7535\u8111\u7aef\u7684\u54cd\u5e94\u5f0f\u5448\u73b0\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u754c\u9762\u521d\u59cb\u5316\u6548\u679c<\/strong><\/span><\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f291.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-634\" alt=\"\u538b\u7f291\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f291.gif\" width=\"640\" height=\"329\" \/><\/a><\/p>\n<p>\u754c\u9762\u521d\u59cb\u5316\u8fc7\u7a0b\u4e2d\u7684\u52a8\u753b\u5305\u62ec\u5730\u9762\u8def\u5f84\u7684\u5b9e\u65f6\u6e32\u67d3\uff0c\u697c\u5c42\u7684\u5c55\u5f00\uff0c\u697c\u5c42\u7684\u8f89\u5149\u626b\u63cf\uff0c\u697c\u5c42\u62a5\u8b66\u70b9\u52a8\u6001\u6c34\u6ce2\uff0c\u697c\u5c42\u76d1\u6d4b\u6570\u636e\u9762\u677f\u7684\u5b9e\u65f6\u53d8\u5316\u7b49\u7b49\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u76d1\u63a7\u754c\u9762\u6548<strong>\u679c<\/strong><\/strong><\/span><\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/3f22955eb2d08063085ff88b4dbe5424.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-638\" alt=\"3f22955eb2d08063085ff88b4dbe5424\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/3f22955eb2d08063085ff88b4dbe5424.gif\" width=\"640\" height=\"329\" \/><\/a><\/p>\n<p><strong>\u76d1\u63a7\u754c\u9762\u5305\u62ec\uff1a<\/strong><\/p>\n<ol>\n<li>\u4eba\u5458\u8fdb\u5165\u5927\u53a6\u7684\u5b9e\u65f6\u76d1\u63a7\uff0c\u9762\u677f\u4e2d\u52a8\u6001\u5237\u65b0\u4eba\u5458\u8fdb\u5165\u5927\u53a6\u7684\u5934\u50cf\u4ee5\u53ca\u5f53\u524d\u5927\u53a6\u4eba\u6570\u7b49\u5b9e\u65f6\u4fe1\u606f\u3002<\/li>\n<li>\u5927\u53a6\u7535\u68af\u8fd0\u884c\u60c5\u51b5\u5b9e\u65f6\u76d1\u63a7\uff0c\u7cfb\u7edf\u4e2d\u5c55\u793a\u7535\u68af\u5f53\u524d\u7684\u8fd0\u884c\u4f4d\u7f6e\u4ee5\u53ca\u662f\u5426\u5728\u8fd0\u884c\u7b49\u4fe1\u606f\u3002<\/li>\n<li>\u5927\u53a6\u67d0\u4e2a\u5177\u4f53\u697c\u5c42\u76d1\u63a7\u6570\u636e\u7684\u5b9e\u65f6\u76d1\u63a7\uff0c\u901a\u8fc7\u67f1\u72b6\u56fe\u7684\u5f62\u5f0f\u5c55\u793a\u4e86\u5f53\u524d\u697c\u5c42\u5177\u4f53\u4fe1\u606f\u7684\u5927\u5c0f\u3002<\/li>\n<li>\u5927\u53a6\u7ba1\u9053\u7684\u5b9e\u65f6\u76d1\u63a7\uff0c\u5c55\u793a\u4e86\u5f53\u524d\u667a\u80fd\u5efa\u7b51\u6240\u6709\u7ba1\u9053\u7684\u8fd0\u884c\u60c5\u51b5\u3002<\/li>\n<\/ol>\n<p><span style=\"font-size: 18pt;\"><strong>\u667a\u80fd\u5efa\u7b51\u5efa\u6a21<\/strong><\/span><\/p>\n<p>\u8be5 3d \u573a\u666f\u4e2d\u6240\u6709\u7684\u6a21\u578b\u5747\u4e3a\u7ebf\u6bb5\u548c\u516d\u9762\u4f53\u642d\u5efa\uff0c\u76f8\u6bd4\u8f83\u901a\u8fc7 3d Max \u5efa\u6a21\u7136\u540e\u901a\u8fc7 obj \u5bfc\u5165\u6765\u8bf4\u573a\u666f\u4e2d\u7684\u4e09\u89d2\u9762\u4f1a\u5c11\u5f88\u591a\uff0c\u66f4\u52a0\u7684\u8f7b\u91cf\u5316\uff0c\u4f8b\u5982\u573a\u666f\u4e2d\u5efa\u7b51\u7684\u697c\u5c42\uff0c\u901a\u8fc7 <strong>ht.Shape<\/strong>\u00a0\u7c7b\u7ed8\u5236\uff0c\u8be5\u7c7b\u4e2d\u8bb0\u5f55\u7740\u697c\u5c42 <strong>points<\/strong> \u70b9\u7684\u4fe1\u606f\u4ee5\u53ca <strong>segments<\/strong>\u00a0\u4e3a <strong>ht.List<\/strong>\u00a0\u7c7b\u578b\u7684\u7ebf\u6bb5\u6570\u7ec4\u4fe1\u606f\uff0c<strong>segments<\/strong> \u4ee3\u8868\u7740\u70b9\u7684\u8fde\u63a5\u65b9\u5f0f\uff0c\u7528\u4e8e\u544a\u8bc9 <strong>ht.Shape<\/strong>\u00a0\u5229\u7528\u70b9\u7684\u4fe1\u606f\u6765\u7ed8\u5236\u4e8c\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf\u6216\u8005\u4e09\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf\u6216\u8005\u76f4\u7ebf\u7b49\u4fe1\u606f\uff0c\u76f8\u5173\u5177\u4f53\u8bf4\u660e\u8bf7\u53c2\u8003 HT for Web \u7684<a href=\"http:\/\/www.hightopo.com\/guide\/guide\/core\/shape\/ht-shape-guide.html\" target=\"_blank\">[\u5f62\u72b6\u624b\u518c]<\/a>\uff0c\u4ee5\u4e0b\u4e3a\u7ed8\u5236\u5355\u5c42\u7684\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/20.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-631\" alt=\"20\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/20.jpg\" width=\"961\" height=\"370\" \/><\/a><\/p>\n<p>\u901a\u8fc7\u4e0a\u56fe\u53ef\u4ee5\u77e5\u9053\u6784\u5efa\u5b8c\u4e00\u5c42\u6a21\u578b\u4e4b\u540e\u5176\u5b83\u51e0\u5c42\u6a21\u578b\u5747\u4e3a\u76f8\u540c\u7684\uff0c\u53ea\u662f y \u8f74\u7684\u6570\u503c\u4e0d\u540c\uff0c\u901a\u8fc7\u53e0\u52a0\u51e0\u5c42\u4e4b\u540e\u4fbf\u53ef\u5f62\u6210\u4e00\u5e62\u5927\u697c\u7684\u8f6e\u5ed3\u3002\u5982\u679c\u7528\u6237\u9700\u8981\u642d\u5efa\u667a\u6167\u56ed\u533a\uff0c\u667a\u6167\u697c\u5b87\u7b49\u573a\u666f\uff0c\u5b8c\u5168\u53ef\u4ee5\u4f7f\u7528\u8fd9\u79cd\u57fa\u4e8e HTML5\/WebGL \u5efa\u6a21\u7684\u65b9\u6848\uff0c\u51cf\u5c11\u8003\u8651\u4f7f\u7528 BIM \u5efa\u6a21\u6a21\u578b\u3002\u573a\u666f\u4e2d\u7684\u7ba1\u9053\u4ee5\u53ca\u80cc\u666f\u5730\u56fe\u8def\u7ebf\u90fd\u4e3a\u70b9\u8fde\u7ebf\u4e4b\u540e\u6784\u6210\uff0c\u53ea\u662f\u901a\u8fc7\u4fee\u6539\u7ebf\u7684\u989c\u8272\u7c97\u7ec6\u6216\u8005\u8fdb\u884c\u8d34\u56fe\u6765\u4fee\u6539\u7ebf\u6216\u8005\u9762\u7684\u6837\u5f0f\uff0c\u573a\u666f\u4e2d\u7684\u7535\u68af\u4e3a\u4e00\u4e2a\u989c\u8272\u4e3a\u9ec4\u8272\u7684\u7b80\u5355\u516d\u9762\u4f53\uff0c\u7535\u68af\u7ebf\u4e5f\u4e3a\u4e00\u6761\u7ebf\u6bb5\u800c\u5df2\uff0c\u6240\u4ee5\u573a\u666f\u4e2d\u7684\u6a21\u578b\u90fd\u662f\u8f7b\u91cf\u5316\u7684\u5efa\u6a21\uff0c\u4f7f 3d \u573a\u666f\u8fd0\u884c\u6e32\u67d3\u7684\u66f4\u52a0\u6d41\u7545\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u573a\u666f\u5173\u952e\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>1. \u5730\u56fe\u8def\u7ebf\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>\u901a\u8fc7\u4e0a\u8ff0<strong>\u667a\u80fd\u5efa\u7b51\u5efa\u6a21<\/strong>\u7684\u5206\u6790\u6211\u4eec\u53ef\u4ee5\u77e5\u9053\u7ebf\u8def\u90fd\u662f\u4e3a\u70b9\u4e0e\u70b9\u4e4b\u95f4\u8fdb\u884c\u8fde\u7ebf\u800c\u751f\u6210\uff0c\u6240\u4ee5\u5f53\u6211\u4eec\u7ed8\u5236\u5b8c\u5730\u56fe\u7684\u8def\u5f84\u4e4b\u540e\u53ef\u4ee5\u5f97\u5230\u6240\u6709\u70b9\u7684\u4fe1\u606f\uff0c\u5047\u5982\u76f4\u7ebf <strong>AB<\/strong>\u00a0\u4e3a\u5730\u56fe\u4e2d\u7684\u67d0\u4e00\u6761\u7ebf\u6bb5\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u77e5\u9053\u70b9 <strong>A<\/strong>\u00a0\u4ee5\u53ca\u70b9 <strong>B<\/strong>\u00a0\u7684\u70b9\u7684\u5750\u6807\uff0c\u4e4b\u540e\u6211\u4eec\u53ef\u4ee5\u8ba1\u7b97 <strong>AB<\/strong> \u7ebf\u6bb5\u4e0a\u4efb\u610f\u4e00\u70b9 <strong>C<\/strong>\u00a0\u7684\u70b9\u7684\u5750\u6807\uff0c\u7136\u540e\u901a\u8fc7\u8fde\u63a5 <strong>A<\/strong>\u00a0\u70b9\u4e0e <strong>C<\/strong>\u00a0\u70b9\u6765\u5f62\u6210\u4e00\u6761\u4e0e <strong>AB<\/strong>\u00a0\u7ebf\u6bb5\u4f4d\u7f6e\u65b9\u5411\u76f8\u540c\u4f46\u662f\u5927\u5c0f\u6bd4 <strong>AB<\/strong>\u00a0\u7ebf\u6bb5\u77ed\u7684\u7ebf\uff0c\u76f4\u5230 <strong>AC<\/strong>\u00a0\u7ebf\u6bb5\u7684\u957f\u5ea6\u7b49\u4e8e <strong>AB<\/strong>\u00a0\u7ebf\u6bb5\u957f\u5ea6\u4e4b\u540e\u518d\u8fdb\u884c\u4e0b\u4e00\u6761\u8def\u5f84\u52a8\u753b\u7684\u7ed8\u5236\uff0c\u4ee5\u4e0b\u4e3a\u5173\u952e\u4f2a\u4ee3\u7801\u5c55\u793a\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> currentIndex \u4e3a\u5f53\u524d\u8def\u5f84\u7ed8\u5236\u5230\u7684\u70b9\u7684\u7d22\u5f15 <\/span>\r\n<span style=\"color: #008080;\"> 2<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> points \u4e3a\u5f53\u524d\u8def\u5f84\u6240\u6709\u70b9\u7684\u4fe1\u606f  currentPoints \u4e3a\u7ed8\u5236\u8fc7\u7a0b\u4e2d\u70b9\u7684\u4fe1\u606f <\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> segments \u4e3a\u5f53\u524d\u8def\u5f84\u6240\u6709\u70b9\u7684\u8fde\u63a5\u65b9\u5f0f\u4fe1\u606f currentSegments \u4e3a\u7ed8\u5236\u8fc7\u7a0b\u4e2d\u70b9\u7684\u8fde\u63a5\u65b9\u5f0f\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span>  \r\n<span style=\"color: #008080;\"> 5<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u8ff0\u6b64\u65f6 A \u70b9\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span> let fromPoint =<span style=\"color: #000000;\"> points[currentIndex]; \r\n<\/span><span style=\"color: #008080;\"> 7<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u8ff0\u6b64\u65f6 B \u70b9\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\"> 8<\/span> let toPoint = points[currentIndex + 1<span style=\"color: #000000;\">]; \r\n<\/span><span style=\"color: #008080;\"> 9<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u901a\u8fc7 AB \u4e24\u70b9\u4fe1\u606f\u7ec4\u6210\u4e00\u6761 AB \u65b9\u5411\u7684\u5411\u91cf<\/span>\r\n<span style=\"color: #008080;\">10<\/span> let pointVector = <span style=\"color: #0000ff;\">new<\/span> ht.Math.Vector2(toPoint.x - fromPoint.x, toPoint.y -<span style=\"color: #000000;\"> fromPoint.y); \r\n<\/span><span style=\"color: #008080;\">11<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bb0\u5f55\u8be5\u5411\u91cf\u7684\u957f\u5ea6\uff0c\u7528\u4e8e\u5224\u65ad AC \u662f\u5426\u5927\u4e8e\u7b49\u4e8e AB<\/span>\r\n<span style=\"color: #008080;\">12<\/span> let pointVectorLength =<span style=\"color: #000000;\"> pointVector.length(); \r\n<\/span><span style=\"color: #008080;\">13<\/span> \r\n<span style=\"color: #008080;\">14<\/span> let currentPoints = [], currentSegments =<span style=\"color: #000000;\"> [];\r\n<\/span><span style=\"color: #008080;\">15<\/span> \r\n<span style=\"color: #008080;\">16<\/span> <span style=\"color: #0000ff;\">for<\/span>(let i = 0; i &lt; currentIndex + 1; i++<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">17<\/span> <span style=\"color: #000000;\">    currentPoints.push({\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">      x: points[i].x,\r\n<\/span><span style=\"color: #008080;\">19<\/span> <span style=\"color: #000000;\">      y: points[i].y\r\n<\/span><span style=\"color: #008080;\">20<\/span> <span style=\"color: #000000;\">    });\r\n<\/span><span style=\"color: #008080;\">21<\/span> <span style=\"color: #000000;\">    currentSegments.push(segments[i]);\r\n<\/span><span style=\"color: #008080;\">22<\/span> }<\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4e0a\u8ff0\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u6211\u4eec\u83b7\u53d6\u5230\u4e86 currentPoints \u4ee5\u53ca currentSegments \u7684\u4fe1\u606f\u4e86\uff0c\u4e4b\u540e\u4fbf\u8981\u8ba1\u7b97\u5728 fromPoint(A\u70b9) \u4e0e toPoint(B\u70b9) \u8fde\u7ebf\u4e0a\u70b9\u7684\u5750\u6807\uff0c\u5373 C \u70b9\uff0c\u4ee5\u4e0b\u4e3a\u8ba1\u7b97 C \u70b9\u7684\u5173\u952e\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> addLength \u4e3a\u6bcf\u6b21\u589e\u52a0\u7684\u7ebf\u6bb5\u957f\u5ea6\u503c\uff0c\u8be5\u7a0b\u5e8f\u4e2d\u4f7f\u7528 500 \u5373\u6bcf\u6b21\u957f\u5ea6\u589e\u52a0 500<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span> let nextVectorLength = currentVectorLength +<span style=\"color: #000000;\"> addLength, \r\n<\/span><span style=\"color: #008080;\"> 3<\/span> <span style=\"color: #000000;\">    tempPoint;\r\n<\/span><span style=\"color: #008080;\"> 4<\/span>     \r\n<span style=\"color: #008080;\"> 5<\/span> roadData.currentVectorLength =<span style=\"color: #000000;\"> nextVectorLength;\r\n<\/span><span style=\"color: #008080;\"> 6<\/span> \r\n<span style=\"color: #008080;\"> 7<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad AC \u7ebf\u6bb5\u7684\u957f\u5ea6\u662f\u5426\u5927\u4e8e AB <\/span>\r\n<span style=\"color: #008080;\"> 8<\/span> <span style=\"color: #0000ff;\">if<\/span>(nextVectorLength &gt;<span style=\"color: #000000;\"> pointVectorLength) {\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>     nextVectorLength =<span style=\"color: #000000;\"> pointVectorLength;\r\n<\/span><span style=\"color: #008080;\">10<\/span>     roadData.currentVectorLength = 0<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">11<\/span>     roadData.currentIndex = currentIndex + 1<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">12<\/span> <span style=\"color: #000000;\">}\r\n<\/span><span style=\"color: #008080;\">13<\/span> \r\n<span style=\"color: #008080;\">14<\/span> <span style=\"color: #000000;\">pointVector.setLength(nextVectorLength);\r\n<\/span><span style=\"color: #008080;\">15<\/span> \r\n<span style=\"color: #008080;\">16<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e3a C \u70b9\u5750\u6807<\/span>\r\n<span style=\"color: #008080;\">17<\/span> tempPoint = {x: pointVector.x + fromPoint.x, y: pointVector.y +<span style=\"color: #000000;\"> fromPoint.y}; \r\n<\/span><span style=\"color: #008080;\">18<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5f80 currentPoints \u6dfb\u52a0 C \u70b9\u5750\u6807<\/span>\r\n<span style=\"color: #008080;\">19<\/span> <span style=\"color: #000000;\">currentPoints.push(tempPoint); \r\n<\/span><span style=\"color: #008080;\">20<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5f80 currentSegments \u6dfb\u52a0 C \u70b9\u8fde\u63a5\u65b9\u5f0f\uff0c\u6b64\u7a0b\u5e8f\u4e2d\u90fd\u4e3a\u76f4\u7ebf\u8fde\u63a5\uff0c\u6240\u4ee5\u503c\u90fd\u4e3a 2<\/span>\r\n<span style=\"color: #008080;\">21<\/span> currentSegments.push(2<span style=\"color: #000000;\">); \r\n<\/span><span style=\"color: #008080;\">22<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> roadNode \u5373\u4e3a ht.Shape \u7c7b \u91cd\u65b0\u8bbe\u7f6e ht.Shape \u7c7b\u70b9\u7684\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\">23<\/span> <span style=\"color: #000000;\">roadNode.setPoints(currentPoints);  \r\n<\/span><span style=\"color: #008080;\">24<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u91cd\u65b0\u8bbe\u7f6e ht.Shape \u7c7b\u70b9\u7684\u8fde\u63a5\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\">25<\/span> roadNode.setSegments(currentSegments);<\/pre>\n<\/div>\n<p>\u4ee5\u4e0b\u4e3a\u52a8\u753b\u4ee3\u7801\u6267\u884c\u6d41\u7a0b\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u52a8\u753b\u6d41\u7a0b\u56fe.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-632\" alt=\"\u52a8\u753b\u6d41\u7a0b\u56fe\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u52a8\u753b\u6d41\u7a0b\u56fe.png\" width=\"1111\" height=\"451\" \/><\/a><\/p>\n<p>\u4ee5\u4e0b\u4e3a\u7ed8\u5236\u4e00\u6761\u8def\u7ebf\u52a8\u753b\u7684\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f293.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-635\" alt=\"\u538b\u7f293\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f293.gif\" width=\"640\" height=\"331\" \/><\/a><\/p>\n<p>\u7a0b\u5e8f\u4e2d\u901a\u8fc7<strong>\u5411\u91cf<\/strong>\u7684\u8ba1\u7b97\u65b9\u5f0f\u6765\u4e0d\u65ad\u83b7\u53d6 <strong>C<\/strong>\u00a0\u70b9\u7684\u5750\u6807\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u7528\u5176\u5b83\u65b9\u5f0f\u6765\u8ba1\u7b97 <strong>C<\/strong>\u00a0\u70b9\u7684\u5750\u6807\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>2. \u6c34\u6ce2\u4ee5\u53ca\u626b\u63cf\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>\u6c34\u6ce2\u4ee5\u53ca\u626b\u63cf\u52a8\u753b\u90fd\u662f\u901a\u8fc7 <strong>HT<\/strong>\u00a0\u63d0\u4f9b\u7684\u4fee\u6539\u56fe\u6807\u77e9\u5f62\u6846\u4fe1\u606f api \u6765\u8fdb\u884c\u63a7\u5236\uff0c\u901a\u8fc7\u8c03\u5ea6\u7684\u65b9\u5f0f\u4e0d\u65ad\u4fee\u6539\u56fe\u6807\u77e9\u5f62\u6846\u5927\u5c0f\u6765\u4ea7\u751f\u6c34\u6ce2\u4ee5\u53ca\u626b\u63cf\u7684\u52a8\u753b\u6548\u679c\uff0c<strong>\u8c03\u5ea6<\/strong>\u7684\u5177\u4f53\u7528\u6cd5\u53ef\u4ee5\u53c2\u8003 HT for Web \u7684<a href=\"http:\/\/www.hightopo.com\/guide\/guide\/core\/schedule\/ht-schedule-guide.html\" target=\"_blank\">[\u8c03\u5ea6\u624b\u518c]<\/a>\uff0c\u4ee5\u4e0b\u4e3a\u6c34\u6ce2\u52a8\u753b\u7684\u5173\u952e\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> waterWaveNodes \u6240\u6709\u6c34\u6ce2\u8282\u70b9<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span> let waterWaveTask =<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 3<\/span>     interval: 100, <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6307\u6bcf\u9694 100 ms \u8c03\u7528 action \u51fd\u6570\u4e00\u6b21<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span>     action: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\">(data){\r\n<\/span><span style=\"color: #008080;\"> 5<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad waterWaveNodes \u662f\u5305\u542b data<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span>         <span style=\"color: #0000ff;\">if<\/span>(waterWaveNodes.indexOf(data) &gt; -1<span style=\"color: #000000;\">) { \r\n<\/span><span style=\"color: #008080;\"> 7<\/span>        <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u6b64\u65f6\u56fe\u6807\u77e9\u5f62\u6846\u4fe1\u606f circleRect \u662f\u4e2a\u957f\u5ea6\u4e3a 4 \u7684\u6570\u7ec4 \u5206\u522b\u8868\u793a x, y, width, height<\/span>\r\n<span style=\"color: #008080;\"> 8<\/span>             let circleRect = data.a('circleRect'<span style=\"color: #000000;\">); \r\n<\/span><span style=\"color: #008080;\"> 9<\/span>    \r\n<span style=\"color: #008080;\">10<\/span>             <span style=\"color: #0000ff;\">if<\/span><span style=\"color: #000000;\">(circleRect) {\r\n<\/span><span style=\"color: #008080;\">11<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u901a\u8fc7\u4fee\u6539\u9ad8\u5ea6\u6765\u53d8\u5927\u6c34\u6ce2\u5927\u5c0f<\/span>\r\n<span style=\"color: #008080;\">12<\/span>                 let nextHeight = circleRect[3] + 10<span style=\"color: #000000;\">; \r\n<\/span><span style=\"color: #008080;\">13<\/span>                 \r\n<span style=\"color: #008080;\">14<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u9ad8\u5ea6\u6700\u5927\u503c\u4e3a 250 <\/span>\r\n<span style=\"color: #008080;\">15<\/span>                 <span style=\"color: #0000ff;\">if<\/span>(nextHeight &lt; 250<span style=\"color: #000000;\">) { \r\n<\/span><span style=\"color: #008080;\">16<\/span>                      <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5bf9\u5e94\u4fee\u6539 y \u7684\u5927\u5c0f\uff0cy \u7684\u589e\u52a0\u5927\u5c0f\u4e3a\u9ad8\u5ea6\u7684\u4e00\u534a<\/span>\r\n<span style=\"color: #008080;\">17<\/span>                     circleRect[1] = circleRect[1] - 5<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">18<\/span>                     circleRect[3] =<span style=\"color: #000000;\"> nextHeight;\r\n<\/span><span style=\"color: #008080;\">19<\/span>                     data.a('circleRect'<span style=\"color: #000000;\">, circleRect);\r\n<\/span><span style=\"color: #008080;\">20<\/span>                     data.a('borderColor', 'rgba(255, 133, 133, ' + (1 - circleRect[3] \/ 250) + ')'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">21<\/span> <span style=\"color: #000000;\">                }\r\n<\/span><span style=\"color: #008080;\">22<\/span>                 <span style=\"color: #0000ff;\">else<\/span><span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\">23<\/span>                     data.a('circleRect', [-0.5,128,257,0<span style=\"color: #000000;\">]);\r\n<\/span><span style=\"color: #008080;\">24<\/span>                     data.a('borderColor', 'rgba(255, 133, 133)'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">25<\/span> <span style=\"color: #000000;\">                }\r\n<\/span><span style=\"color: #008080;\">26<\/span>                 \r\n<span style=\"color: #008080;\">27<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">28<\/span>             <span style=\"color: #0000ff;\">else<\/span><span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\">29<\/span>                 data.a('circleRect', [-0.5,128,257,0<span style=\"color: #000000;\">]);\r\n<\/span><span style=\"color: #008080;\">30<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">31<\/span>             \r\n<span style=\"color: #008080;\">32<\/span> <span style=\"color: #000000;\">        }\r\n<\/span><span style=\"color: #008080;\">33<\/span> <span style=\"color: #000000;\">    }    \r\n<\/span><span style=\"color: #008080;\">34<\/span> <span style=\"color: #000000;\">};\r\n<\/span><span style=\"color: #008080;\">35<\/span> dm3d.addScheduleTask(waterWaveTask); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u65b0\u589e\u8be5\u8c03\u5ea6\u4efb\u52a1<\/span><\/pre>\n<\/div>\n<p>\u4e0b\u56fe\u4e3a\u6c34\u6ce2\u5728 2d \u4e2d\u7684\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f295.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-636\" alt=\"\u538b\u7f295\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f295.gif\" width=\"494\" height=\"252\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>3. \u6570\u5b57\u53d8\u5316\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>\u4ece\u7a0b\u5e8f\u7684\u622a\u56fe\u4e2d\u53ef\u4ee5\u770b\u5230\u5728 2d \u9762\u677f\u4ee5\u53ca 3d \u573a\u666f\u4e2d\u90fd\u6709\u6570\u5b57\u5728\u52a8\u6001\u7684\u53d8\u5316\uff0c\u8fd9\u90e8\u5206\u4e3b\u8981\u901a\u8fc7\u6570\u636e\u7ed1\u5b9a\u52a8\u6001\u6765\u4fee\u6539\u6570\u503c\u7684\u5927\u5c0f\uff0c\u5173\u4e8e\u6570\u636e\u7ed1\u5b9a\u53ef\u4ee5\u53c2\u8003 HT for Web \u7684<a href=\"http:\/\/www.hightopo.com\/guide\/guide\/core\/databinding\/ht-databinding-guide.html\" target=\"_blank\">[\u6570\u636e\u7ed1\u5b9a\u624b\u518c]<\/a>\uff0c\u4e5f\u662f\u901a\u8fc7\u8c03\u5ea6\u6765\u4e0d\u65ad\u4fee\u6539\u6570\u503c\u7684\u5927\u5c0f\uff0c\u7a0b\u5e8f\u4e2d\u6211\u5c01\u88c5\u4e86\u4ea7\u751f\u968f\u673a\u6570\u7684\u4ee3\u7801\uff0c\u7528\u4e8e\u6bcf\u6b21\u4ea7\u751f\u968f\u673a\u6570\u4e4b\u540e\u7ed1\u5b9a\u5230\u5bf9\u5e94\u7684\u8282\u70b9\u4e0a\uff0c\u4ee5\u4e0b\u4e3a\u4fee\u6539 2d \u9762\u677f\u4e0a\u6570\u5b57\u7684\u53d8\u5316\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> numNode(1-7) \u4e3a 2d \u9762\u677f\u4e2d\u5bf9\u5e94\u6570\u5b57\u7684\u8282\u70b9<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> data.a('ht.value', number) \u5373\u4e3a\u52a8\u6001\u4fee\u6539 attr \u4e0a\u7684 ht.value \u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> getRandomValue \u4e3a\u81ea\u5df1\u5c01\u88c5\u7684\u4ea7\u751f\u968f\u673a\u6570\u7684\u65b9\u6cd5<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span> <span style=\"color: #0000ff;\">this<\/span>.change2dNumTask =<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 5<\/span>         interval: 1000<span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>         action: (data) =&gt;<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data === numNode1 || data ===<span style=\"color: #000000;\"> numNode2) {\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>                 data.a('ht.value', util.getRandomValue([500, 999], 5<span style=\"color: #000000;\">));\r\n<\/span><span style=\"color: #008080;\"> 9<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">10<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data === numNode3 || data ===<span style=\"color: #000000;\"> numNode4) {\r\n<\/span><span style=\"color: #008080;\">11<\/span>                 data.s('text', util.getRandomValue([0, 30], 2) + '%'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">12<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">13<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data ===<span style=\"color: #000000;\"> numNode5) {\r\n<\/span><span style=\"color: #008080;\">14<\/span>                 data.a('ht.value', util.getRandomValue([0, 99999], 5, 3<span style=\"color: #000000;\">));\r\n<\/span><span style=\"color: #008080;\">15<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">16<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data ===<span style=\"color: #000000;\"> numNode6) {\r\n<\/span><span style=\"color: #008080;\">17<\/span>                 data.a('ht.value', util.getRandomValue([0, 100], 2<span style=\"color: #000000;\">));\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">19<\/span>             <span style=\"color: #0000ff;\">if<\/span>(data ===<span style=\"color: #000000;\"> numNode7) {\r\n<\/span><span style=\"color: #008080;\">20<\/span>                 data.a('ht.value', util.getRandomValue([0, 100], 2<span style=\"color: #000000;\">));\r\n<\/span><span style=\"color: #008080;\">21<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">22<\/span> <span style=\"color: #000000;\">       }        \r\n<\/span><span style=\"color: #008080;\">23<\/span> <span style=\"color: #000000;\">    };\r\n<\/span><span style=\"color: #008080;\">24<\/span> dm2d.addScheduleTask(<span style=\"color: #0000ff;\">this<\/span>.change2dNumTask); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u65b0\u589e\u8be5\u8c03\u5ea6\u4efb\u52a1<\/span><\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4ee5\u4e0a\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u4fee\u6539\u6570\u503c\u662f\u901a\u8fc7\u4fee\u6539\u8282\u70b9\u7684 attr \u4ee5\u53ca style \u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027\u503c\u6765\u52a8\u6001\u53d8\u5316\u6570\u503c\uff0c\u5f53\u7136\u5728\u7a0b\u5e8f\u4e2d 2d \u9762\u677f\u53ef\u80fd\u8fd8\u4f1a\u9690\u85cf\uff0c\u6b64\u65f6\u8be5\u8c03\u5ea6\u4efb\u52a1\u5c31\u4e0d\u9700\u8981\u6267\u884c\uff0c\u53ef\u4ee5\u8c03\u7528 removeScheduleTask \u65b9\u6cd5\u6765\u79fb\u9664\u6b64\u8c03\u5ea6\u4efb\u52a1\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>4. \u67f1\u72b6\u56fe\u9ad8\u5ea6\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>\u5728 3d \u573a\u666f\u4e2d\u67f1\u72b6\u4f53\u4e5f\u662f\u4e00\u4e2a\u516d\u9762\u4f53\uff0c\u53ea\u662f\u56db\u5468\u7528\u4e86\u6e10\u53d8\u7684\u8d34\u56fe\uff0c\u4ee5\u53ca\u9876\u9762\u7528\u4e86\u4e00\u5f20\u7eaf\u8272\u7684\u8d34\u56fe\u6784\u9020\u51fa\u6765\uff0c\u6bcf\u4e2a\u516d\u9762\u4f53\u90fd\u6709\u9ad8\u5ea6\u7684\u4fe1\u606f\uff0c<strong>HT<\/strong>\u00a0\u4e2d\u901a\u8fc7 <strong>node.getTall()<\/strong>\u00a0\u6765\u83b7\u53d6\u5f53\u524d\u516d\u9762\u4f53\u7684\u9ad8\u5ea6\u503c\uff0c\u6839\u636e\u4e0a\u4e00\u8282\u8bb2\u7684\u6570\u636e\u7ed1\u5b9a\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u5c55\u793a\u67f1\u72b6\u56fe\u7684\u65f6\u5019\u5faa\u73af\u83b7\u53d6\u6240\u6709\u67f1\u72b6\u4f53\u8282\u70b9\u7684\u9ad8\u5ea6\u503c\u5927\u5c0f\u5047\u5982\u547d\u540d\u4e3a <strong>tall<\/strong>\uff0c\u4e4b\u540e\u901a\u8fc7 <strong>node.a(&#8216;tall&#8217;, tall)<\/strong>\u00a0\u5c06\u8be5\u503c\u5b58\u50a8\u5230\u5f53\u524d\u67f1\u72b6\u56fe\u8282\u70b9\u7684 <strong>attr<\/strong>\u00a0\u5bf9\u8c61\u4e0a\u9762\uff0c\u4e4b\u540e\u5728\u67f1\u72b6\u4f53\u521d\u59cb\u5316\u7684\u65f6\u5019\u53ef\u4ee5\u4e0d\u65ad\u4fee\u6539\u9ad8\u5ea6\u503c\u6765\u52a8\u6001\u6539\u53d8\u9ad8\u5ea6\uff0c\u5f53\u9ad8\u5ea6\u503c\u5927\u4e8e <strong>node.a(&#8216;tall&#8217;)<\/strong>\u00a0\u5219\u8bf4\u660e\u5f53\u524d\u67f1\u72b6\u4f53\u521d\u59cb\u5316\u7684\u9ad8\u5ea6\u5df2\u7ecf\u5b8c\u6210\u3002\u4ee5\u4e0b\u4e3a\u76f8\u5173\u7684\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> charts.forEach((chart) =&gt;<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 2<\/span>     !chart.a('tall') &amp;&amp; chart.a('tall', chart.getTall()); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5c06\u9ad8\u5ea6\u5b58\u50a8\u5230 attr \u4e0a<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>     chart.setTall(0); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u521d\u59cb\u9ad8\u5ea6\u4e3a 0<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span> <span style=\"color: #000000;\">});\r\n<\/span><span style=\"color: #008080;\"> 5<\/span> <span style=\"color: #0000ff;\">this<\/span>.chartAnimteTask =<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>         interval: 25<span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>         action: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\">(data){\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>             <span style=\"color: #0000ff;\">if<\/span>(charts.indexOf(data) &gt; -1<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>                 <span style=\"color: #0000ff;\">if<\/span>(finishNum !==<span style=\"color: #000000;\"> chartLength) {\r\n<\/span><span style=\"color: #008080;\">10<\/span>                     <span style=\"color: #0000ff;\">if<\/span>(data.getTall() !== data.a('tall'<span style=\"color: #000000;\">)) {\r\n<\/span><span style=\"color: #008080;\">11<\/span>                         let nextTall = data.getTall() + deep; <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> deep \u4e3a\u6bcf\u6b21\u589e\u52a0\u7684\u9ad8\u5ea6<\/span>\r\n<span style=\"color: #008080;\">12<\/span>                         let tall = data.a('tall'); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u521d\u59cb\u5316\u9ad8\u5ea6 <\/span>\r\n<span style=\"color: #008080;\">13<\/span>                         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u4e0b\u4e00\u4e2a\u9ad8\u5ea6\u662f\u5426\u5927\u4e8e\u521d\u59cb\u5316\u9ad8\u5ea6<\/span>\r\n<span style=\"color: #008080;\">14<\/span>                         <span style=\"color: #0000ff;\">if<\/span>(nextTall &lt;<span style=\"color: #000000;\"> tall) {\r\n<\/span><span style=\"color: #008080;\">15<\/span> <span style=\"color: #000000;\">                            data.setTall(nextTall);\r\n<\/span><span style=\"color: #008080;\">16<\/span> <span style=\"color: #000000;\">                        }\r\n<\/span><span style=\"color: #008080;\">17<\/span>                         <span style=\"color: #0000ff;\">else<\/span><span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">                            data.setTall(tall);\r\n<\/span><span style=\"color: #008080;\">19<\/span>                             finishNum++<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">20<\/span> <span style=\"color: #000000;\">                        }\r\n<\/span><span style=\"color: #008080;\">21<\/span> <span style=\"color: #000000;\">                    }    \r\n<\/span><span style=\"color: #008080;\">22<\/span> <span style=\"color: #000000;\">                }\r\n<\/span><span style=\"color: #008080;\">23<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">24<\/span> <span style=\"color: #000000;\">        }    \r\n<\/span><span style=\"color: #008080;\">25<\/span> <span style=\"color: #000000;\">};\r\n<\/span><span style=\"color: #008080;\">26<\/span> dm3d.addScheduleTask(<span style=\"color: #0000ff;\">this<\/span>.chartAnimteTask); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u65b0\u589e\u8be5\u8c03\u5ea6\u4efb\u52a1<\/span><\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4e0a\u9762\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u52a8\u753b\u6bcf\u4e00\u6b65\u7684\u7a0b\u5e8f\u6267\u884c\u4e5f\u662f\u901a\u8fc7\u8c03\u5ea6\u6765\u5b8c\u6210\u7684\uff0c\u4e0e\u524d\u6587\u51e0\u4e2a\u52a8\u753b\u7684\u5b9e\u73b0\u65b9\u5f0f\u7c7b\u4f3c\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>5. 3d \u955c\u5934\u63a8\u8fdb\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p>3d \u573a\u666f\u4e2d\u89c6\u91ce\u7684\u63a8\u8fdb\u540e\u9000\u90fd\u662f\u901a\u8fc7 HT api \u63d0\u4f9b\u7684\u4fee\u6539 <strong>eye<\/strong>\u00a0\u4ee5\u53ca <strong>center<\/strong>\u00a0\u7684\u6570\u503c\u65b9\u6cd5\u6765\u5b9e\u73b0\uff0c\u901a\u8fc7\u4e0d\u65ad\u8c03\u7528 setEye \u4ee5\u53ca setCenter \u65b9\u6cd5\u6765\u8fbe\u5230\u4fee\u6539\u89c6\u89d2\u7684\u76ee\u7684\uff0ceye \u7c7b\u6bd4\u4eba\u773c\u775b\u6240\u5904\u7684\u4f4d\u7f6e\uff0ccenter \u7c7b\u6bd4\u4eba\u773c\u775b\u805a\u7126\u7684\u4f4d\u7f6e\uff0c\u4ee5\u4e0b\u4e3a\u5b9e\u73b0\u955c\u5934\u63a8\u8fdb\u5173\u952e\u7684\u4f2a\u4ee3\u7801\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> let e = ht.Default.clone(g3d.getEye()), <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u5f53\u524d\u773c\u775b\u7684\u4f4d\u7f6e<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span>     c = ht.Default.clone(g3d.getCenter()); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u5f53\u524d\u773c\u775b\u805a\u7126\u7684\u4f4d\u7f6e<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> eye \u4e3a\u9700\u8981\u4fee\u6539\u7684\u5bf9\u5e94 eye \u503c<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> center \u4e3a\u9700\u8981\u4fee\u6539\u7684\u5bf9\u5e94 center \u503c<\/span>\r\n<span style=\"color: #008080;\"> 5<\/span>  <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u4ee5\u4e0b\u4e3a\u5206\u522b\u83b7\u53d6 eye \u4e0e center \u5728 xyz \u4e09\u4e2a\u5750\u6807\u8f74\u4e4b\u95f4\u7684\u5dee\u503c<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span>     let edx = eye[0] - e[0<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>         edz = eye[1] - e[1<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>         edy = eye[2] - e[2<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>         cdx = center[0] - c[0<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\">10<\/span>         cdz = center[1] - c[1<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\">11<\/span>         cdy = center[2] - c[2<span style=\"color: #000000;\">];\r\n<\/span><span style=\"color: #008080;\">12<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5f00\u542f\u4e0d\u65ad\u4fee\u6539 eye \u4e0e center \u7684\u52a8\u753b<\/span>\r\n<span style=\"color: #008080;\">13<\/span> <span style=\"color: #000000;\">    ht.Default.startAnim({\r\n<\/span><span style=\"color: #008080;\">14<\/span>         duration: time ? time : 3000<span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\">15<\/span>         easing: <span style=\"color: #0000ff;\">function<\/span>(t){ <span style=\"color: #0000ff;\">return<\/span><span style=\"color: #000000;\"> t; },\r\n<\/span><span style=\"color: #008080;\">16<\/span>         finishFunc: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\">() {\r\n<\/span><span style=\"color: #008080;\">17<\/span>             <span style=\"color: #0000ff;\">if<\/span>(<span style=\"color: #0000ff;\">typeof<\/span> cb === 'function'<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">                cb();\r\n<\/span><span style=\"color: #008080;\">19<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">20<\/span> <span style=\"color: #000000;\">        },\r\n<\/span><span style=\"color: #008080;\">21<\/span>         action: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\"> (v) {\r\n<\/span><span style=\"color: #008080;\">22<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> v \u4e3a\u4ece 0-1 \u53d8\u6362\u7684\u503c <\/span>\r\n<span style=\"color: #008080;\">23<\/span> <span style=\"color: #000000;\">            g3d.setEye([\r\n<\/span><span style=\"color: #008080;\">24<\/span>                 e[0] + edx *<span style=\"color: #000000;\"> v,\r\n<\/span><span style=\"color: #008080;\">25<\/span>                 e[1] + edz *<span style=\"color: #000000;\"> v,\r\n<\/span><span style=\"color: #008080;\">26<\/span>                 e[2] + edy *<span style=\"color: #000000;\"> v\r\n<\/span><span style=\"color: #008080;\">27<\/span> <span style=\"color: #000000;\">            ]);\r\n<\/span><span style=\"color: #008080;\">28<\/span> <span style=\"color: #000000;\">            g3d.setCenter([\r\n<\/span><span style=\"color: #008080;\">29<\/span>                 c[0] + cdx *<span style=\"color: #000000;\"> v,\r\n<\/span><span style=\"color: #008080;\">30<\/span>                 c[1] + cdz *<span style=\"color: #000000;\"> v,\r\n<\/span><span style=\"color: #008080;\">31<\/span>                 c[2] + cdy *<span style=\"color: #000000;\"> v\r\n<\/span><span style=\"color: #008080;\">32<\/span> <span style=\"color: #000000;\">            ]);\r\n<\/span><span style=\"color: #008080;\">33<\/span> <span style=\"color: #000000;\">        }\r\n<\/span><span style=\"color: #008080;\">34<\/span> });<\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4ee5\u4e0a\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u901a\u8fc7\u4fee\u6539 eye \u4e0e center \u5206\u522b\u5bf9\u5e94\u7684 xyz \u8f74\u7684\u503c\u4e0e\u5f53\u524d e \u4e0e c \u5206\u522b\u5bf9\u5e94\u7684 xyz \u8f74\u7684\u503c\u4e4b\u95f4\u7684\u8ddd\u79bb\u6765\u8fbe\u5230\u89c6\u89d2\u7684\u53d8\u5316\u3002<\/p>\n<p>\u4ee5\u4e0b\u4e3a\u8be5\u4ee3\u7801\u7684\u4e00\u4e2a\u5e94\u7528\u622a\u56fe:<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f290.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-633\" alt=\"\u538b\u7f290\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/\u538b\u7f290.gif\" width=\"640\" height=\"332\" \/><\/a><\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u603b\u7ed3<\/strong><\/span><\/p>\n<p>\u7269\u8054\u7f51\u901a\u8fc7\u5404\u79cd\u4fe1\u606f\u4f20\u611f\u8bbe\u5907\uff0c\u5b9e\u65f6\u91c7\u96c6\u4efb\u4f55\u9700\u8981\u76d1\u63a7\u3001\u8fde\u63a5\u3001\u4e92\u52a8\u7684\u7269\u4f53\u6216\u8fc7\u7a0b\u7b49\u5404\u79cd\u9700\u8981\u7684\u4fe1\u606f\uff0c\u4e0e\u4e92\u8054\u7f51\u7ed3\u5408\u5f62\u6210\u7684\u4e00\u4e2a\u5de8\u5927\u7f51\u7edc\u3002\u5b9e\u73b0\u4e86\u7269\u4e0e\u7269\u3001\u7269\u4e0e\u4eba\uff0c\u6240\u6709\u7684\u7269\u54c1\u4e0e\u7f51\u7edc\u7684\u8fde\u63a5\uff0c\u65b9\u4fbf\u8bc6\u522b\u3001\u7ba1\u7406\u548c\u63a7\u5236\u3002\u6240\u4ee5\u7269\u8054\u7f51\u5e26\u7ed9\u6211\u4eec\u7684\u667a\u6167\u697c\u5b87\u7684\u53ef\u89c6\u5316\u76d1\u63a7\u9700\u8981\u76d1\u63a7\u7684\u65b9\u9762\u53ef\u80fd\u8fd8\u6709\u5f88\u591a\uff0c\u8be5\u7cfb\u7edf\u4e2d\u9488\u5bf9\u4eba\u5458\u51fa\u5165\uff0c\u8bbe\u5907\u4fe1\u606f\uff0c\u7ba1\u9053\u4fe1\u606f\u7b49\u7684\u76d1\u63a7\u5b9e\u73b0\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u667a\u6167\u697c\u5b87\u76d1\u63a7\u7cfb\u7edf\uff0c\u7269\u8054\u7f51\u4e5f\u5c06\u7528\u6237\u7aef\u5ef6\u4f38\u548c\u6269\u5c55\u5230\u4e86\u4efb\u4f55\u7269\u54c1\u4e0e\u7269\u54c1\u4e4b\u95f4\uff0c\u8ba9\u6211\u4eec\u66f4\u52a0\u4e86\u89e3\u642d\u5efa\u667a\u6167\u56ed\u533a\uff0c\u667a\u6167\u6821\u56ed\u7b49\u573a\u666f\u76d1\u63a7\u4e4b\u540e\u8bbe\u5907\u53ef\u89c6\u5316\uff0c\u8d44\u4ea7\u53ef\u89c6\u5316\u5e26\u7ed9\u6211\u4eec\u7684\u76f4\u89c2\u6027\u3002\u573a\u666f\u4e2d\u7684\u53cd\u5149\u4e0e\u666f\u6df1\u7b49\u6548\u679c\u90fd\u662f HT \u6838\u5fc3\u5305\u63d0\u4f9b\u7684\u6548\u679c\uff0c\u6240\u6709\u7684\u6a21\u578b\u642d\u5efa\u4e0e\u52a8\u753b\u4e5f\u90fd\u662f\u901a\u8fc7 HT \u6838\u5fc3\u5305\u63d0\u4f9b\u7684 api \u8fdb\u884c\u5efa\u6a21\u4e0e\u52a8\u753b\u9a71\u52a8\uff0c\u6240\u4ee5\u5728\u7f51\u9875\u4e2d\u5c55\u793a\u4f1a\u5341\u5206\u6d41\u7545\uff0c\u5927\u5927\u63d0\u9ad8\u4e86\u7528\u6237\u7684\u4f53\u9a8c\uff0c\u5e76\u4e14\u5728\u79fb\u52a8\u7aef\u8868\u73b0\u4e5f\u5341\u5206\u53cb\u597d\u3002<\/p>\n<p>\u4ee5\u4e0b\u4e3a\u79fb\u52a8\u7aef\u7684\u7a0b\u5e8f\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/4C8EC9AD-2820-4D51-BB5B-D6E499569FAD.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-641\" alt=\"4C8EC9AD-2820-4D51-BB5B-D6E499569FAD\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/4C8EC9AD-2820-4D51-BB5B-D6E499569FAD.jpg\" width=\"736\" height=\"1318\" \/><\/a><\/p>\n<p>\u7a0b\u5e8f\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/2.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-630\" alt=\"2\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/2.jpg\" width=\"800\" height=\"532\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/1.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-629\" alt=\"1\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/01\/1.jpg\" width=\"800\" height=\"531\" \/><\/a><\/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\/621"}],"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=621"}],"version-history":[{"count":7,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/621\/revisions"}],"predecessor-version":[{"id":642,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/621\/revisions\/642"}],"wp:attachment":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media?parent=621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/categories?post=621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/tags?post=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}