{"id":644,"date":"2019-02-18T09:26:34","date_gmt":"2019-02-18T01:26:34","guid":{"rendered":"http:\/\/www.hightopo.com\/blog\/?p=644"},"modified":"2019-02-18T17:21:24","modified_gmt":"2019-02-18T09:21:24","slug":"%e5%9f%ba%e4%ba%8e-html5-webgl-%e7%9a%84%e5%9c%b0%e9%93%81%e7%ab%99-3d-%e5%8f%af%e8%a7%86%e5%8c%96%e7%b3%bb%e7%bb%9f","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/644.html","title":{"rendered":"\u57fa\u4e8e HTML5 WebGL \u7684\u5730\u94c1\u7ad9 3D \u53ef\u89c6\u5316\u7cfb\u7edf"},"content":{"rendered":"<p><span style=\"font-size: 18pt;\"><strong>\u524d\u8a00<\/strong><\/span><\/p>\n<p>\u5de5\u4e1a\u4e92\u8054\u7f51\uff0c\u7269\u8054\u7f51\uff0c\u53ef\u89c6\u5316\u7b49\u540d\u8bcd\u5728\u6211\u4eec\u73b0\u5728\u4fe1\u606f\u5316\u7684\u5927\u80cc\u666f\u4e0b\u5df2\u7ecf\u662f\u8033\u719f\u80fd\u8be6\uff0c\u65e5\u5e38\u751f\u6d3b\u7684\u4ea4\u901a\uff0c\u51fa\u884c\uff0c\u5403\u7a7f\u7b49\u53ef\u80fd\u90fd\u53ef\u4ee5\u7528\u4fe1\u606f\u5316\u7684\u65b9\u5f0f\u6765\u4e3a\u6211\u4eec\u8868\u8fbe\uff0c\u5728\u4f20\u7edf\u7684\u53ef\u89c6\u5316\u76d1\u63a7\u9886\u57df\uff0c\u4e00\u822c\u90fd\u662f\u57fa\u4e8e Web SCADA \u7684\u524d\u7aef\u6280\u672f\u6765\u5b9e\u73b0 2D \u53ef\u89c6\u5316\u76d1\u63a7\uff0c\u672c\u7cfb\u7edf\u91c7\u7528 Hightopo \u7684 HT for Web \u4ea7\u54c1\u6765\u6784\u9020\u8f7b\u91cf\u5316\u7684 3D \u53ef\u89c6\u5316\u573a\u666f\uff0c\u8be5 3D \u573a\u666f\u4ece\u6b63\u9762\u5c55\u793a\u4e86\u4e00\u4e2a\u5730\u94c1\u7ad9\u7684\u73b0\u5b9e\u573a\u666f\uff0c\u5305\u62ec\u5730\u94c1\u7684\u5b9e\u65f6\u8fd0\u884c\u60c5\u51b5\uff0c\u5730\u94c1\u4e0a\u4e0b\u884c\u60c5\u51b5\uff0c\u89c6\u9891\u76d1\u63a7\uff0c\u70df\u96fe\u62a5\u8b66\uff0c\u7535\u68af\u8fd0\u884c\u60c5\u51b5\u7b49\u7b49\uff0c\u5e2e\u52a9\u6211\u4eec\u76f4\u89c2\u7684\u4e86\u89e3\u5f53\u524d\u7684\u5730\u94c1\u7ad9\u3002<\/p>\n<p>\u7cfb\u7edf\u4e2d\u4e3a\u4e86\u5e2e\u52a9\u7528\u6237\u66f4\u76f4\u89c2\u53cb\u597d\u7684\u6d4f\u89c8\u5f53\u524d\u5730\u94c1\u7ad9\uff0c\u63d0\u4f9b\u4e86\u4e09\u79cd\u4ea4\u4e92\u6a21\u5f0f\uff1a<\/p>\n<ul>\n<li>\u7b2c\u4e00\u4eba\u79f0\u6a21\u5f0f &#8212; \u64cd\u4f5c\u5c31\u7c7b\u4f3c\u884c\u4eba\u6216\u8f66\u5728\u884c\u8fdb\u7684\u6548\u679c\uff0c\u53ef\u4ee5\u901a\u8fc7\u952e\u76d8\u9f20\u6807\u63a7\u5236\u524d\u8fdb\u540e\u9000\u3002<\/li>\n<li>\u81ea\u52a8\u5de1\u68c0\u6a21\u5f0f &#8212; \u8be5\u6a21\u5f0f\u4e0b\u7528\u6237\u4e0d\u9700\u8981\u4efb\u4f55\u64cd\u4f5c\uff0c\u573a\u666f\u81ea\u52a8\u524d\u8fdb\u540e\u9000\u6765\u5de1\u67e5\u5f53\u524d\u5730\u94c1\u7ad9\u7684\u573a\u666f\u3002<\/li>\n<li>\u9f20\u6807\u64cd\u4f5c\u6a21\u5f0f &#8212; \u5de6\u952e\u65cb\u8f6c\u573a\u666f\uff0c\u53f3\u952e\u5e73\u79fb\u573a\u666f\u3002<\/li>\n<\/ul>\n<p>\u672c\u7bc7\u6587\u7ae0\u901a\u8fc7\u5bf9\u5730\u94c1\u7ad9\u53ef\u89c6\u5316\u573a\u666f\u7684\u642d\u5efa\uff0c\u52a8\u753b\u4ee3\u7801\u7684\u5b9e\u73b0\uff0c\u4ea4\u4e92\u6a21\u5f0f\u7684\u539f\u7406\u89e3\u6790\uff0c\u4ee5\u53ca\u4e3b\u8981\u529f\u80fd\u70b9\u7684\u5b9e\u73b0\u8fdb\u884c\u9610\u8ff0\uff0c\u5e2e\u52a9\u6211\u4eec\u4e86\u89e3\u5982\u4f55\u4f7f\u7528 <strong><a href=\"https:\/\/hightopo.com\/\" target=\"_blank\">HT<\/a><\/strong>\u00a0\u5b9e\u73b0\u4e00\u4e2a\u7b80\u5355\u7684\u5730\u94c1\u7ad9\u53ef\u89c6\u5316\u3002<\/p>\n<p>\u9884\u89c8\u5730\u5740\uff1a<a href=\"http:\/\/www.hightopo.com\/demo\/ht-subway\/\" target=\"_blank\">\u57fa\u4e8e HTML5 WebGL \u7684\u5730\u94c1\u7ad9 3D \u53ef\u89c6\u5316\u7cfb\u7edf<\/a>\u00a0<a href=\"http:\/\/www.hightopo.com\/demo\/ht-subway\/\" target=\"_blank\">http:\/\/www.hightopo.com\/demo\/ht-subway\/<\/a><\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u754c\u9762\u7b80\u4ecb\u53ca\u6548\u679c\u9884\u89c8<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u5730\u94c1\u8fd0\u884c\u6548\u679c<\/strong><\/span><\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/1.gif\" \/><\/p>\n<p>\u5730\u94c1\u4ece\u7ad9\u5916\u5f00\u5230\u7ad9\u5185\u7684\u6548\u679c\u4e3a\u900f\u660e\u5ea6\u9010\u6e10\u589e\u52a0\uff0c\u901f\u5ea6\u9010\u6e10\u964d\u4f4e\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u6f2b\u6e38\u6548\u679c<\/strong><\/span><\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/2-1-1.gif\" \/><\/p>\n<p>\u4e0a\u8ff0\u4e3a\u81ea\u52a8\u5de1\u68c0\u7684\u6f2b\u6e38\u6548\u679c\uff0c\u573a\u666f\u81ea\u52a8\u8fdb\u884c\u524d\u8fdb\u65cb\u8f6c\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u76d1\u63a7\u8bbe\u5907\u4ea4\u4e92\u6548\u679c<\/strong><\/span><\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/3-9.gif\" \/><\/p>\n<p>\u5f53\u6211\u4eec\u70b9\u51fb\u573a\u666f\u4e2d\u7684\u76d1\u63a7\u8bbe\u5907\u65f6\u53ef\u4ee5\u67e5\u770b\u5f53\u524d\u8bbe\u5907\u7684\u8fd0\u884c\u60c5\u51b5\uff0c\u8fd0\u884c\u6570\u636e\u7b49\u4fe1\u606f\u3002<\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u573a\u666f\u642d\u5efa<\/strong><\/span><\/p>\n<p>\u8be5\u7cfb\u7edf\u4e2d\u7684\u5927\u90e8\u5206\u6a21\u578b\u90fd\u662f\u901a\u8fc7 3dMax \u5efa\u6a21\u751f\u6210\u7684\uff0c\u8be5\u5efa\u6a21\u5de5\u5177\u53ef\u4ee5\u5bfc\u51fa obj \u4e0e mtl \u6587\u4ef6\uff0c\u5728 HT \u4e2d\u53ef\u4ee5\u901a\u8fc7\u89e3\u6790 obj \u4e0e mtl \u6587\u4ef6\u6765\u751f\u6210 3d \u573a\u666f\u4e2d\u7684\u6240\u6709\u590d\u6742\u6a21\u578b\uff0c\u5f53\u7136\u5982\u679c\u662f\u67d0\u4e9b\u7b80\u5355\u7684\u6a21\u578b\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 HT \u6765\u7ed8\u5236\uff0c\u8fd9\u6837\u4f1a\u6bd4 obj \u6a21\u578b\u66f4\u8f7b\u91cf\u5316\uff0c\u6240\u4ee5\u5927\u90e8\u5206\u7b80\u5355\u7684\u6a21\u578b\u90fd\u662f\u91c7\u7528 <strong>HT for Web<\/strong>\u00a0\u4ea7\u54c1\u8f7b\u91cf\u5316 <strong>HTML5\/WebGL<\/strong>\u00a0\u5efa\u6a21\u7684\u65b9\u6848\uff0c\u5177\u4f53\u7684\u89e3\u6790\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5206\u522b\u4e3a obj \u6587\u4ef6\u5730\u5740\uff0cmtl \u6587\u4ef6\u5730\u5740<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span> ht.Default.loadObj('obj\/metro.obj', 'obj\/metro.mtl'<span style=\"color: #000000;\">, {\r\n<\/span><span style=\"color: #008080;\"> 3<\/span>     center: <span style=\"color: #0000ff;\">true<\/span><span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\"> 4<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6a21\u578b\u662f\u5426\u5c45\u4e2d\uff0c\u9ed8\u8ba4\u4e3a false\uff0c\u8bbe\u7f6e\u4e3a true \u5219\u4f1a\u79fb\u52a8\u6a21\u578b\u4f4d\u7f6e\u4f7f\u5176\u5185\u5bb9\u5c45\u4e2d<\/span>\r\n<span style=\"color: #008080;\"> 5<\/span>     r3: [0, -Math.PI \/ 2, 0<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u65cb\u8f6c\u53d8\u5316\u53c2\u6570\uff0c\u683c\u5f0f\u4e3a [rx, ry, rz]<\/span>\r\n<span style=\"color: #008080;\"> 7<\/span>     s3: [0.15, 0.15, 0.15<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5927\u5c0f\u53d8\u5316\u53c2\u6570\uff0c\u683c\u5f0f\u4e3a [sx, sy, sz]<\/span>\r\n<span style=\"color: #008080;\"> 9<\/span>     finishFunc: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\">(modelMap, array, rawS3) {\r\n<\/span><span style=\"color: #008080;\">10<\/span>         <span style=\"color: #0000ff;\">if<\/span><span style=\"color: #000000;\"> (modelMap) {\r\n<\/span><span style=\"color: #008080;\">11<\/span>             ht.Default.setShape3dModel('metro', array); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6ce8\u518c\u4e00\u4e2a\u540d\u5b57\u4e3a metro \u7684\u6a21\u578b<\/span>\r\n<span style=\"color: #008080;\">12<\/span> <span style=\"color: #000000;\">        }\r\n<\/span><span style=\"color: #008080;\">13<\/span> <span style=\"color: #000000;\">    }\r\n<\/span><span style=\"color: #008080;\">14<\/span> });<\/pre>\n<\/div>\n<p>\u4e0a\u9762\u901a\u8fc7\u52a0\u8f7d obj \u6a21\u578b\u4e4b\u540e\u6ce8\u518c\u4e86\u4e00\u4e2a\u540d\u5b57\u4e3a <strong>metro<\/strong> \u7684\u6a21\u578b\uff0c\u4e4b\u540e\u5982\u679c\u8981\u4f7f\u7528\u8be5\u6a21\u578b\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u4ee3\u7801\u6765\u5b9e\u73b0\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\">1<\/span> <span style=\"color: #0000ff;\">var<\/span> node = <span style=\"color: #0000ff;\">new<\/span><span style=\"color: #000000;\"> ht.Node();\r\n<\/span><span style=\"color: #008080;\">2<\/span> <span style=\"color: #000000;\">node.s({\r\n<\/span><span style=\"color: #008080;\">3<\/span>     'shape3d': 'metro'\r\n<span style=\"color: #008080;\">4<\/span> });<\/pre>\n<\/div>\n<p>\u4e0a\u9762\u4ee3\u7801\u65b0\u5efa\u4e86\u4e00\u4e2a <strong>node<\/strong> \u5bf9\u8c61\uff0c\u901a\u8fc7\u8bbe\u7f6e style \u5bf9\u8c61\u7684 <strong>shape3d<\/strong> \u5c5e\u6027\u53ef\u4ee5\u628a\u6a21\u578b\u540d\u79f0\u4e3a <strong>metro<\/strong> \u7528\u5230\u8be5 node \u5bf9\u8c61\u4e0a\u53bb\uff0c\u4e4b\u540e\u4fbf\u662f\u6211\u4eec\u573a\u666f\u4e2d\u770b\u5230\u7684\u5730\u94c1\u5217\u8f66\u6a21\u578b\u3002<\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">\u5730\u94c1\u52a8\u753b\u4ee3\u7801\u7684\u5b9e\u73b0\u5206\u6790<\/span><\/strong><\/p>\n<p>\u573a\u666f\u4e2d\u5730\u94c1\u7684\u8fd0\u884c\u662f\u901a\u8fc7 HT \u63d0\u4f9b\u7684\u8c03\u5ea6\u63d2\u4ef6\u6765\u5b9e\u73b0\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\u8be5\u8c03\u5ea6\u4e3b\u8981\u7528\u4e8e\u5728\u6307\u5b9a\u7684\u65f6\u95f4\u95f4\u9694\u8fdb\u884c\u51fd\u6570\u56de\u8c03\u5904\u7406\uff0c\u56de\u8c03\u51fd\u6570\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3a data \u56fe\u5143\uff0c\u4e5f\u5c31\u662f 3D \u573a\u666f\u4e2d\u7684\u6a21\u578b\u8282\u70b9\uff0c\u6211\u4eec\u53ef\u4ee5\u5224\u65ad\u5f53\u524d data \u662f\u5426\u4e3a\u6211\u4eec\u521a\u624d\u521b\u5efa\u7684 metro \u90a3\u4e2a\u8282\u70b9\u6765\u8fdb\u884c\u540e\u7eed\u7684\u64cd\u4f5c\uff0c\u573a\u666f\u4e2d\u6a21\u62df\u4e86\u4e00\u4e2a\u5de6\u5f00\u7684\u5730\u94c1\u548c\u4e00\u4e2a\u53f3\u5f00\u7684\u5730\u94c1\uff0c\u4e24\u8f86\u5730\u94c1\u4f1a\u4ea4\u66ff\u51fa\u73b0\u3002\u5728 3D \u573a\u666f\u4e2d\u80af\u5b9a\u4f1a\u6709\u5750\u6807\u7cfb\uff0cHT \u4e2d\u662f\u7528 x, y, z \u6765\u5206\u522b\u8868\u793a\u4e09\u4e2a\u8f74\uff0c\u6240\u4ee5\u5730\u94c1\u7684\u8fd0\u52a8\u80af\u5b9a\u662f\u6539\u53d8\u5730\u94c1\u5728\u5750\u6807\u7cfb\u4e2d\u7684\u4f4d\u7f6e\u6765\u5b9e\u73b0\u5730\u94c1\u7684\u8fd0\u884c\uff0c\u5730\u94c1\u5750\u6807\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/4.jpg\" width=\"640\" height=\"390\" \/><\/p>\n<p>\u901a\u8fc7\u4e0a\u56fe\u53ef\u4ee5\u77e5\u9053\u5730\u94c1\u5728 3D \u573a\u666f\u4e2d\u7684\u5750\u6807\u7cfb\uff0c\u5982\u679c\u8981\u5b9e\u73b0\u5730\u94c1\u7684\u79fb\u52a8\u5219\u53ea\u9700\u8981\u5c06\u5730\u94c1\u5f80\u56fe\u4e2d\u6240\u793a\u7ea2\u8272\u7bad\u5934\u7684\u65b9\u5411\u8fdb\u884c\u79fb\u52a8\uff0c\u5373 <strong>x<\/strong>\u00a0\u8f74\u7684\u65b9\u5411\uff0c\u901a\u8fc7 <strong>setX<\/strong>\u00a0\u8fd9\u4e2a\u65b9\u6cd5\u4e0d\u65ad\u7684\u4fee\u6539\u5730\u94c1\u7684\u4f4d\u7f6e\u8fbe\u5230\u5730\u94c1\u884c\u8fdb\u7684\u76ee\u7684\uff0c\u4ee3\u7801\u4e2d\u901a\u8fc7 getSpeedByX \u4ee5\u53ca getOpacityByX \u4e24\u4e2a\u65b9\u6cd5\u6765\u4e0d\u65ad\u83b7\u53d6\u6b64\u65f6\u7684\u5217\u8f66\u901f\u5ea6\u4ee5\u53ca\u5217\u8f66\u900f\u660e\u5ea6\uff0c\u4ee5\u4e0b\u4e3a\u5173\u952e\u4ee3\u7801\u5b9e\u73b0\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> let metroTask =<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 2<\/span>     interval: 50<span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\"> 3<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6bcf\u4e94\u5341\u79d2\u6267\u884c\u4e00\u6b21<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span>     action: (data) = &gt;{ <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u6587\u6240\u63d0\u56de\u8c03\u51fd\u6570<\/span>\r\n<span style=\"color: #008080;\"> 5<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u5f53\u65f6\u4f20\u8fdb\u6765\u7684\u8282\u70b9\u662f\u5426\u4e3a\u5730\u94c1\u5217\u8f66\u8282\u70b9<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span>         <span style=\"color: #0000ff;\">if<\/span> (data ===<span style=\"color: #000000;\"> currentMetro) {\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u5730\u94c1\u6b64\u65f6\u7684 X \u8f74\u4f4d\u7f6e\u4ee5\u53ca\u884c\u8fdb\u7684\u65b9\u5411<\/span>\r\n<span style=\"color: #008080;\"> 8<\/span>             let currentX =<span style=\"color: #000000;\"> data.getX(),\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>             direction = data.a('direction'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">10<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6839\u636e\u5f53\u524d\u7684 X \u8f74\u4f4d\u7f6e\u83b7\u53d6\u5f53\u524d\u7684\u5217\u8f66\u901f\u5ea6<\/span>\r\n<span style=\"color: #008080;\">11<\/span>             let speed = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.getSpeedByX(currentX);\r\n<\/span><span style=\"color: #008080;\">12<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6839\u636e\u5f53\u524d\u7684 X \u8f74\u4f4d\u7f6e\u83b7\u53d6\u5f53\u524d\u7684\u5217\u8f66\u900f\u660e\u5ea6<\/span>\r\n<span style=\"color: #008080;\">13<\/span>             let opacity = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.getOpacityByX(currentX);\r\n<\/span><span style=\"color: #008080;\">14<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u6b64\u65f6 X \u8f74\u4f4d\u7f6e\u662f\u5426\u8d85\u8fc7\u67d0\u4e2a\u503c \u5373\u5730\u94c1\u662f\u5728\u67d0\u4e2a\u8303\u56f4\u5185\u79fb\u52a8<\/span>\r\n<span style=\"color: #008080;\">15<\/span>             <span style=\"color: #0000ff;\">if<\/span> (Math.abs(currentX) &lt;= 5000<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">16<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u5f53\u524d\u7684\u900f\u660e\u5ea6<\/span>\r\n<span style=\"color: #008080;\">17<\/span>                 opacity !== 1 ?<span style=\"color: #000000;\"> currentMetro.s({\r\n<\/span><span style=\"color: #008080;\">18<\/span>                     'shape3d.transparent': <span style=\"color: #0000ff;\">true<\/span><span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\">19<\/span>                     'shape3d.opacity'<span style=\"color: #000000;\">: opacity\r\n<\/span><span style=\"color: #008080;\">20<\/span> <span style=\"color: #000000;\">                }) : currentMetro.s({\r\n<\/span><span style=\"color: #008080;\">21<\/span>                     'shape3d.transparent': <span style=\"color: #0000ff;\">false<\/span>\r\n<span style=\"color: #008080;\">22<\/span> <span style=\"color: #000000;\">                });\r\n<\/span><span style=\"color: #008080;\">23<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u5f53\u524d\u7684 X \u8f74\u4f4d\u7f6e<\/span>\r\n<span style=\"color: #008080;\">24<\/span>                 data.setX(currentX + direction *<span style=\"color: #000000;\"> speed);\r\n<\/span><span style=\"color: #008080;\">25<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u6b64\u65f6\u5730\u94c1\u7684\u901f\u5ea6\u4e3a 0\uff0c\u6240\u4ee5\u6b64\u65f6\u5e94\u8be5\u6267\u884c\u5f00\u95e8\u7684\u52a8\u753b<\/span>\r\n<span style=\"color: #008080;\">26<\/span>                 <span style=\"color: #0000ff;\">if<\/span> (speed === 0) <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.doorAnimation(currentMetro, direction);\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: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u53f3\u65b9\u5411\u5730\u94c1\u5f00\u5230\u5934\uff0c\u8fdb\u884c\u590d\u4f4d<\/span>\r\n<span style=\"color: #008080;\">29<\/span>             <span style=\"color: #0000ff;\">if<\/span> (currentX &gt; 5000 &amp;&amp; direction === 1<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">30<\/span>                 currentMetro =<span style=\"color: #000000;\"> leftMetro;\r\n<\/span><span style=\"color: #008080;\">31<\/span>                 currentMetro.setX(5000<span style=\"color: #000000;\">);\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: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5de6\u65b9\u5411\u5730\u94c1\u5f00\u5230\u5934\uff0c\u8fdb\u884c\u590d\u4f4d<\/span>\r\n<span style=\"color: #008080;\">34<\/span>             <span style=\"color: #0000ff;\">if<\/span> (currentX &lt; -5000 &amp;&amp; direction === -1<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">35<\/span>                 currentMetro =<span style=\"color: #000000;\"> rightMetro;\r\n<\/span><span style=\"color: #008080;\">36<\/span>                 currentMetro.setX( - 5000<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">37<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">38<\/span> <span style=\"color: #000000;\">        }\r\n<\/span><span style=\"color: #008080;\">39<\/span> <span style=\"color: #000000;\">    }\r\n<\/span><span style=\"color: #008080;\">40<\/span> <span style=\"color: #000000;\">};\r\n<\/span><span style=\"color: #008080;\">41<\/span> dm3d.addScheduleTask(metroTask);<\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4ee5\u4e0a\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u5730\u94c1\u5728\u8fd0\u884c\u7684\u8fc7\u7a0b\u4e2d\uff0c\u4e3b\u8981\u901a\u8fc7\u4fee\u6539\u5730\u94c1\u7684 <strong>x<\/strong>\u00a0\u8f74\u4f4d\u7f6e\u6765\u4ea7\u751f\u524d\u8fdb\u7684\u52a8\u753b\uff0c\u5e76\u4e14\u9700\u8981\u8ba9\u5730\u94c1\u5728\u67d0\u4e2a\u533a\u95f4\u5185\u8fdb\u884c\u8fd0\u52a8\uff0c\u9700\u8981\u5224\u65ad\u8fb9\u754c\uff0c\u800c\u4e14\u4e3a\u4e86\u6a21\u62df\u51fa\u771f\u5b9e\u7684\u6548\u679c\u9700\u8981\u6839\u636e\u5730\u94c1\u5f53\u524d\u7684\u4f4d\u7f6e\u4e0d\u65ad\u83b7\u53d6\u5f53\u524d\u7684\u5217\u8f66\u901f\u5ea6\u4ee5\u53ca\u5217\u8f66\u900f\u660e\u5ea6\uff0c\u4ee5\u4e0b\u4e3a\u6d41\u7a0b\u56fe\uff1a<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/5.png\" \/><\/p>\n<p>\u4e0a\u56fe\u6240\u793a\u7684\u4e3a\u5730\u94c1\u8fdb\u7ad9\u65f6\u5019\u7684\u6d41\u7a0b\uff0c\u5f53\u5730\u94c1\u505c\u9760\u5b8c\u6bd5\u5173\u95e8\u540e\u9700\u8981\u8fdb\u884c\u51fa\u7ad9\uff0c\u6b64\u65f6\u6211\u4eec\u53ea\u9700\u8981\u628a\u5730\u94c1\u4f4d\u7f6e\u91cd\u65b0\u8bbe\u7f6e\u4e00\u4e0b\u4e0d\u4e3a 0 \u5373\u53ef\uff0c\u4ee5\u4e0b\u4e3a\u90e8\u5206\u4ee3\u7801\u5b9e\u73b0\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\">1<\/span> currentMetro.setX(direction * 10); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u51fa\u7ad9\u5217\u8f66\u7684\u4f4d\u7f6e<\/span><\/pre>\n<\/div>\n<p>\u5f53\u6267\u884c\u4e0a\u9762\u90a3\u53e5\u4ee3\u7801\u4e4b\u540e\u4e0a\u65b9\u7684 <strong>metroTask<\/strong>\u00a0\u8c03\u5ea6\u4efb\u52a1\u6267\u884c\u5230 getSpeedByX \u8fd9\u4e2a\u65b9\u6cd5\u4e4b\u540e\u83b7\u53d6\u5230\u7684 speed \u901f\u5ea6\u4e0d\u4e3a 0\uff0c\u56e0\u6b64\u6b64\u65f6\u4f1a\u7ee7\u7eed\u6267\u884c\u5730\u94c1\u884c\u8fdb\u7684\u52a8\u753b\uff0c\u6b64\u65f6\u7684\u901f\u5ea6\u5c31\u662f\u7531\u6162\u81f3\u5feb\uff0c\u900f\u660e\u5ea6\u7531\u6df1\u81f3\u6d45\u3002\u4ee5\u4e0b\u4e3a\u5f00\u95e8\u52a8\u753b\u6267\u884c\u6d41\u7a0b\uff1a<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/6.png\" \/><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u81ea\u52a8\u5de1\u68c0\u4ee3\u7801\u7684\u5b9e\u73b0\u5206\u6790<\/strong><\/span><\/p>\n<p>\u7cfb\u7edf\u4e2d\u81ea\u52a8\u5de1\u68c0\u7684\u5b9e\u73b0\u4e3b\u8981\u662f\u901a\u8fc7\u4fee\u6539 3D \u573a\u666f\u4e2d\u7684 <strong>eye<\/strong>\u00a0\u4ee5\u53ca <strong>center<\/strong>\u00a0\u7684\u503c\uff0c<strong>HT<\/strong> \u4e2d\u63d0\u4f9b\u4e86 <strong>rotate<\/strong>\uff0c<strong>walk<\/strong> \u4e24\u4e2a\u65b9\u6cd5\u6765\u63a7\u5236\u89c6\u89d2\u7684\u65cb\u8f6c\u4ee5\u53ca\u89c6\u89d2\u7684\u884c\u8fdb\uff0c<strong>rotate<\/strong> \u65b9\u6cd5\u5728\u975e\u7b2c\u4e00\u4eba\u79f0\u6a21\u5f0f\u65f6\uff0c\u65cb\u8f6c\u662f\u4ee5 <strong>center<\/strong>\u00a0\u4e3a\u4e2d\u5fc3\u8fdb\u884c\u65cb\u8f6c\uff0c\u4e5f\u5c31\u662f\u56f4\u7ed5\u4e2d\u5fc3\u7269\u4f53\u65cb\u8f6c\uff0c\u5f53\u4e3a\u7b2c\u4e00\u4eba\u79f0\u65f6\u65cb\u8f6c\u4ee5 <strong>eye<\/strong>\u00a0\u4e3a\u4e2d\u5fc3\u8fdb\u884c\u65cb\u8f6c\uff0c\u4e5f\u5c31\u662f\u65cb\u8f6c\u773c\u775b\u671d\u5411\u65b9\u5411\u3002<strong>walk<\/strong> \u51fd\u6570\u540c\u65f6\u6539\u53d8 <strong>eye<\/strong>\u00a0\u548c <strong>center<\/strong>\u00a0\u7684\u4f4d\u7f6e\uff0c\u4e5f\u5c31\u662f <strong>eye<\/strong>\u00a0\u548c <strong>center<\/strong>\u00a0\u5728\u4e24\u70b9\u5efa\u7acb\u7684\u77e2\u91cf\u65b9\u5411\u4e0a\u540c\u65f6\u79fb\u52a8\u76f8\u540c\u7684\u504f\u79fb\u91cf\u3002\u8be5\u7cfb\u7edf\u4e2d\u6211\u6ca1\u6709\u91c7\u7528 <strong>rotate<\/strong>\u00a0\u51fd\u6570\u800c\u662f\u81ea\u5df1\u5b9e\u73b0\u4e86\u89c6\u89d2\u7684\u65cb\u8f6c\uff0c\u56e0\u4e3a\u539f\u672c\u7684 rotate \u51fd\u6570\u65cb\u8f6c\u67d0\u4e2a\u89d2\u5ea6\u4f1a\u9a6c\u4e0a\u65cb\u8f6c\u8fc7\u53bb\u800c\u4e0d\u4f1a\u6709\u4e00\u4e2a\u65cb\u8f6c\u7684\u8fc7\u7a0b\uff0c\u6240\u4ee5\u6211\u91cd\u65b0\u5b9e\u73b0\u4e86\u65cb\u8f6c\u7684\u65b9\u6cd5\uff0c\u8be5\u7cfb\u7edf\u4e2d\u89c6\u89d2\u65cb\u8f6c\u662f\u901a\u8fc7\u4e0d\u65ad\u4fee\u6539 <strong>center<\/strong>\u00a0\u7684\u6570\u503c\u6765\u5b9e\u73b0\uff0c\u5177\u4f53\u5b9e\u73b0\u8fc7\u7a0b\u539f\u7406\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/7.jpg\" width=\"794\" height=\"266\" \/><\/p>\n<p>\u90e8\u5206\u5b9e\u73b0\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> <span style=\"color: #000000;\">rotateStep() {\r\n<\/span><span style=\"color: #008080;\"> 2<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u56fe\u8f85\u52a9\u70b9 C<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>     let fromCenter = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.fromCenter;\r\n<\/span><span style=\"color: #008080;\"> 4<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u56fe B \u70b9<\/span>\r\n<span style=\"color: #008080;\"> 5<\/span>     let toCenter = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.toCenter;\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6bcf\u5e27\u8f6c\u4e00\u5ea6<\/span>\r\n<span style=\"color: #008080;\"> 7<\/span>     let rotateValue = <span style=\"color: #0000ff;\">this<\/span>.rotateFrame || Math.PI \/ 180<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8f85\u52a9\u70b9 C \u4e0e B \u70b9\u4e4b\u95f4\u5efa\u7acb\u4e00\u4e2a\u65b9\u5411\u5411\u91cf<\/span>\r\n<span style=\"color: #008080;\"> 9<\/span>     let centerVector = <span style=\"color: #0000ff;\">new<\/span> ht.Math.Vector2(toCenter.x - fromCenter.x, toCenter.y -<span style=\"color: #000000;\"> fromCenter.y);\r\n<\/span><span style=\"color: #008080;\">10<\/span>     let centerVectorLength =<span style=\"color: #000000;\"> centerVector.length();\r\n<\/span><span style=\"color: #008080;\">11<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6b64\u65f6\u65cb\u8f6c\u767e\u5206\u6bd4<\/span>\r\n<span style=\"color: #008080;\">12<\/span>     let rotatePercent = rotateValue * <span style=\"color: #0000ff;\">this<\/span>.stepNum \/ <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.curRotateVal;\r\n<\/span><span style=\"color: #008080;\">13<\/span>     <span style=\"color: #0000ff;\">if<\/span> (rotatePercent &gt;= 1<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">14<\/span>         rotatePercent = 1<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">15<\/span>         <span style=\"color: #0000ff;\">this<\/span>.stepNum = -2<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">16<\/span> <span style=\"color: #000000;\">    }\r\n<\/span><span style=\"color: #008080;\">17<\/span>     let newLength = rotatePercent *<span style=\"color: #000000;\"> centerVectorLength;\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">    centerVector.setLength(newLength);\r\n<\/span><span style=\"color: #008080;\">19<\/span>     let newCenterVector =<span style=\"color: #000000;\"> centerVector.add(fromCenter);\r\n<\/span><span style=\"color: #008080;\">20<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u65cb\u8f6c\u8fc7\u7a0b\u4e2d center \u7684\u70b9\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\">21<\/span>     let newCenterPosition = [newCenterVector.x, <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.personHeight, newCenterVector.y];\r\n<\/span><span style=\"color: #008080;\">22<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u5f53\u524d center \u7684\u5927\u5c0f<\/span>\r\n<span style=\"color: #008080;\">23<\/span>     <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.g3d.setCenter(newCenterPosition);\r\n<\/span><span style=\"color: #008080;\">24<\/span> }<\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4e0a\u8ff0\u4ee3\u7801\u5c31\u5b9e\u73b0\u4e86\u573a\u666f\u4e2d\u7684\u89c6\u89d2\u65cb\u8f6c\uff0c\u5e76\u4e14\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539 <strong>rotateValue<\/strong>\u00a0\u7684\u503c\u63a7\u5236\u65cb\u8f6c\u7684\u901f\u5ea6\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u7535\u68af\u52a8\u753b\u4ee3\u7801\u7684\u5b9e\u73b0\u5206\u6790<\/strong><\/span><\/p>\n<p>\u573a\u666f\u4e2d\u7535\u68af\u662f\u4e00\u4e2a obj \u6a21\u578b\uff0c3D \u6a21\u578b\u662f\u7531\u6700\u57fa\u7840\u7684\u4e09\u89d2\u5f62\u9762\u62fc\u63a5\u5408\u6210\uff0c\u4f8b\u5982 1 \u4e2a\u77e9\u5f62\u53ef\u4ee5\u7531 2 \u4e2a\u4e09\u89d2\u5f62\u6784\u6210\uff0c1 \u4e2a\u7acb\u65b9\u4f53\u7531 6 \u4e2a\u9762\u5373 12 \u4e2a\u4e09\u89d2\u5f62\u6784\u6210\uff0c\u4ee5\u6b64\u7c7b\u63a8\u66f4\u590d\u6742\u7684\u6a21\u578b\u53ef\u4ee5\u7531\u8bb8\u591a\u7684\u5c0f\u4e09\u89d2\u5f62\u7ec4\u5408\u5408\u6210\u3002\u56e0\u6b64 3D \u6a21\u578b\u5b9a\u4e49\u5373\u4e3a\u5bf9\u6784\u9020\u6a21\u578b\u7684\u6240\u6709\u4e09\u89d2\u5f62\u7684\u63cf\u8ff0\uff0c\u800c\u6bcf\u4e2a\u4e09\u89d2\u5f62\u7531\u4e09\u4e2a\u9876\u70b9 vertex \u6784\u6210\uff0c\u6bcf\u4e2a\u9876\u70b9 vertex \u7531 x, y, z \u4e09\u7ef4\u7a7a\u95f4\u5750\u6807\u51b3\u5b9a\uff0cHT \u4e2d\u4f7f\u7528 <strong>vs<\/strong> \u6570\u7ec4\u8bb0\u5f55\u6784\u6210\u4e09\u89d2\u9762\u7684\u6240\u6709\u9876\u70b9\u5750\u6807\uff0c\u6240\u4ee5\u5982\u679c\u60f3\u8981\u8ba9\u7535\u68af\u8fd0\u884c\u8d77\u6765\uff0c\u53ea\u9700\u8981\u628a\u6240\u6709\u7684\u9876\u70b9\u5750\u6807\u5f80\u7535\u68af\u8fd0\u884c\u7684\u65b9\u5411\u8fdb\u884c\u5e73\u79fb\uff0c\u4ee5\u4e0b\u4e3a\u90e8\u5206\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;\"> vs \u6307\u7684\u662f\u6784\u6210\u7535\u68af\u6a21\u578b\u6240\u6709\u7684\u4e09\u89d2\u9762\u9876\u70b9\u5750\u6807\u6570\u7ec4<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span> <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u7531\u4e8e\u573a\u666f\u4e2d\u7535\u68af\u7684\u8fd0\u884c\u65b9\u5411\u4e3a\u5f80\u5bf9\u89d2\u7ebf\u53f3\u4e0a\u65b9\u8fd0\u52a8\uff0c\u6240\u4ee5\u53ea\u9700\u8981\u4fee\u6539 x \u8f74\u4ee5\u53ca y \u8f74\u5750\u6807\u503c<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span> <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> xStep yStep \u4e3a\u6bcf\u6b21\u7535\u68af\u8fd0\u52a8\u7684\u8ddd\u79bb<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span> setInterval(() = &gt;<span style=\"color: #000000;\">{\r\n<\/span><span style=\"color: #008080;\"> 5<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> i+3 \u662f\u56e0\u4e3a vs \u6570\u7ec4\u7684\u987a\u5e8f\u4e3a x, y, z \u8f74 \u6240\u4ee5\u6bcf\u6b21 i \u504f\u79fb\u4e09\u4e2a\u5355\u4f4d\u5927\u5c0f<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span>     <span style=\"color: #0000ff;\">for<\/span> (let i = 0, l = vs.length; i &lt; l; i = i + 3<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8be5\u9876\u70b9\u5750\u6807\u4e0b\u4e00\u4e2a x \u8f74\u5750\u6807\u7684\u503c<\/span>\r\n<span style=\"color: #008080;\"> 8<\/span>         let nextX = vs[i] -<span style=\"color: #000000;\"> xStep;\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8be5\u9876\u70b9\u5750\u6807\u4e0b\u4e00\u4e2a y \u8f74\u5750\u6807\u7684\u503c<\/span>\r\n<span style=\"color: #008080;\">10<\/span>         let nextY = vs[i + 1] +<span style=\"color: #000000;\"> yStep;\r\n<\/span><span style=\"color: #008080;\">11<\/span>         vs[i] = nextX &lt; -0.5 ? 0.5 - (Math.abs(nextX) - 0.5<span style=\"color: #000000;\">) : nextX;\r\n<\/span><span style=\"color: #008080;\">12<\/span>         vs[i + 1] = nextY &gt; 0.5 ? -0.5 + (Math.abs(nextY) - 0.5<span style=\"color: #000000;\">) : nextY;\r\n<\/span><span style=\"color: #008080;\">13<\/span> <span style=\"color: #000000;\">    }\r\n<\/span><span style=\"color: #008080;\">14<\/span> <span style=\"color: #000000;\">},\r\n<\/span><span style=\"color: #008080;\">15<\/span> 200);<\/pre>\n<\/div>\n<p>\u7535\u68af\u8fd0\u52a8\u52a8\u753b\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/8.gif\" \/><\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u76d1\u63a7\u529f\u80fd\u5c55\u793a\u53ca\u4ecb\u7ecd<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u89c6\u9891\u76d1\u63a7<\/strong><\/span><\/p>\n<p>\u5f53\u70b9\u51fb\u573a\u666f\u4e2d\u7684\u6444\u50cf\u5934\u4e4b\u540e\u53f3\u4fa7\u9876\u90e8\u4f1a\u663e\u793a\u51fa\u5f53\u524d\u6444\u50cf\u5934\u7684\u76d1\u63a7\u753b\u9762\uff0c\u4ee5\u4e0b\u4e3a\u5b9e\u73b0\u6548\u679c\u56fe:<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/3-9.gif\" \/><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u70df\u96fe\u62a5\u8b66\u76d1\u63a7<\/strong><\/span><\/p>\n<p>\u70df\u96fe\u62a5\u8b66\u4f1a\u6839\u636e\u540e\u53f0\u5b9e\u65f6\u4f20\u9012\u8fc7\u6765\u7684\u72b6\u6001\u503c\u6765\u53d8\u6362\u5f53\u524d\u70df\u96fe\u62a5\u8b66\u6a21\u578b\u7684\u989c\u8272\uff0c\u7ea2\u8272\u4e3a\u62a5\u8b66\u72b6\u6001\uff0c\u4ee5\u4e0b\u4e3a\u5b9e\u73b0\u6548\u679c\u56fe:<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/10.gif\" \/><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u7535\u89c6\u5217\u8f66\u5230\u7ad9\u65f6\u95f4\u76d1\u63a7<\/strong><\/span><\/p>\n<p>\u65e5\u5e38\u5730\u94c1\u7ad9\u4e2d\u4f1a\u6709\u4e13\u95e8\u7684\u7535\u89c6\u6765\u5c55\u793a\u4e0b\u4e00\u73ed\u5730\u94c1\u5230\u7ad9\u7684\u65f6\u95f4\u8868\uff0c\u8be5\u7cfb\u7edf\u4e2d\u4e5f\u6a21\u62df\u8be5\u6548\u679c\uff0c\u4e0d\u8fc7\u8be5\u7cfb\u7edf\u6682\u65f6\u505a\u4e86\u7535\u89c6\u7684\u6a21\u578b\uff0c\u65f6\u95f4\u6682\u65e0\u5bf9\u63a5\uff0c\u4ee5\u4e0b\u4e3a\u6548\u679c\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/11-13.jpg\" width=\"836\" height=\"509\/\" \/><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u573a\u666f\u76d1\u63a7\u4ea4\u4e92<\/strong><\/span><\/p>\n<p>3D \u573a\u666f\u4e2d\u4ea4\u4e92\u662f\u6bd4\u8f83\u7b80\u5355\u7684\uff0c\u4e3b\u8981\u662f\u70b9\u51fb\u6444\u50cf\u5934\u5c55\u793a 2D \u76d1\u63a7\u9762\u677f\uff0c\u5728 2D \u754c\u9762\u4e2d\u4e3b\u8981\u662f\u5207\u6362\u4e09\u79cd\u4ea4\u4e92\u6a21\u5f0f\uff0c\u4e09\u79cd\u4ea4\u4e92\u6a21\u5f0f\u4e3a\u4e92\u65a5\u7684\u5173\u7cfb\uff0c\u4ee5\u4e0b\u662f 3D \u4ea4\u4e92\u6ce8\u518c\u4e8b\u4ef6\u4ee3\u7801:<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> g3d.mi((e) = &gt;<span style=\"color: #000000;\">{\r\n<\/span><span style=\"color: #008080;\"> 2<\/span> <span style=\"color: #000000;\">    let {\r\n<\/span><span style=\"color: #008080;\"> 3<\/span> <span style=\"color: #000000;\">        g2d,\r\n<\/span><span style=\"color: #008080;\"> 4<\/span> <span style=\"color: #000000;\">        dm2d\r\n<\/span><span style=\"color: #008080;\"> 5<\/span>     } = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u4e3a\u70b9\u51fb\u7c7b\u578b<\/span>\r\n<span style=\"color: #008080;\"> 7<\/span>     <span style=\"color: #0000ff;\">if<\/span> (e.kind === 'clickData'<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> data \u4e3a\u5f53\u524d\u70b9\u51fb\u7684\u56fe\u5143<\/span>\r\n<span style=\"color: #008080;\"> 9<\/span>         let data =<span style=\"color: #000000;\"> e.data;\r\n<\/span><span style=\"color: #008080;\">10<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5f53\u524d\u56fe\u5143\u7684 shape3d \u7c7b\u578b<\/span>\r\n<span style=\"color: #008080;\">11<\/span>         let shape3d = data.s('shape3d'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">12<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u5f53\u524d shape3d \u7c7b\u578b\u662f\u5426\u4e3a\u6444\u50cf\u5934<\/span>\r\n<span style=\"color: #008080;\">13<\/span>         <span style=\"color: #0000ff;\">if<\/span> (shape3d &amp;&amp; shape3d.indexOf('\u6444\u50cf\u5934') &gt; 0<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">14<\/span>             let cameraPanel = dm2d.getDataByTag('cameraPanel'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">15<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> toggle \u5207\u6362\u6444\u50cf\u5934 2d \u9762\u677f<\/span>\r\n<span style=\"color: #008080;\">16<\/span>             g2d.isVisible(cameraPanel) ? cameraPanel.s('2d.visible', <span style=\"color: #0000ff;\">false<\/span>) : cameraPanel.s('2d.visible', <span style=\"color: #0000ff;\">true<\/span><span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">17<\/span> <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: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u4e3a\u70b9\u51fb 3d \u573a\u666f\u80cc\u666f\u7c7b\u578b<\/span>\r\n<span style=\"color: #008080;\">20<\/span>     <span style=\"color: #0000ff;\">if<\/span> (e.kind === 'clickBackground'<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">21<\/span>         let cameraPanel = dm2d.getDataByTag('cameraPanel'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">22<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u9690\u85cf\u6444\u50cf\u5934 2d \u9762\u677f<\/span>\r\n<span style=\"color: #008080;\">23<\/span>         g2d.isVisible(cameraPanel) &amp;&amp; cameraPanel.s('2d.visible', <span style=\"color: #0000ff;\">false<\/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> });<\/pre>\n<\/div>\n<p><span style=\"font-size: 18pt;\"><strong>\u603b\u7ed3<\/strong><\/span><\/p>\n<p>\u5de5\u4e1a\u4e92\u8054\u7f51\u5c06\u4eba\uff0c\u6570\u636e\u548c\u673a\u5668\u8fde\u63a5\u8d77\u6765\uff0c\u5730\u94c1\u7ad9 3D \u53ef\u89c6\u5316\u7cfb\u7edf\u5219\u662f\u4e00\u4e2a\u5f88\u597d\u7684\u5c55\u73b0\uff0cHT \u7684\u8f7b\u91cf\u5316\uff0c\u6570\u636e\u7684\u53ef\u89c6\u5316\uff0c\u673a\u5668\u7684\u53ef\u89c6\u5316\uff0c\u8d44\u4ea7\u7684\u7ba1\u7406\u5316\u5e2e\u52a9\u6211\u4eec\u66f4\u597d\u7684\u76d1\u63a7\u3002\u800c\u7269\u8054\u7f51\u5c06\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\u901a\u8fc7\u4e0e HT \u7684\u7ed3\u5408\u66f4\u597d\u7684\u5c55\u73b0\u51fa\u53ef\u89c6\u5316\u7684\u4f18\u52bf\uff0c\u5f53\u7136\u5730\u94c1\u7ad9\u8fd8\u53ef\u4ee5\u4e0e <strong>VR<\/strong>\u00a0\u8fdb\u884c\u7ed3\u5408\uff0c\u5728\u5404\u5730\u79d1\u6280\u5c55\u4f1a\u4e2d\u6211\u4eec\u53ef\u4ee5\u89c1\u5230\u5404\u79cd <strong>VR<\/strong>\u00a0\u573a\u666f\u64cd\u4f5c\uff0c<strong>HT<\/strong>\u00a0\u4e2d\u4e5f\u53ef\u4ee5\u7ed3\u5408 <strong>VR<\/strong>\u00a0\u8bbe\u5907\u8fdb\u884c\u64cd\u4f5c\uff0c\u53ef\u4ee5\u6234\u4e0a\u8bbe\u5907\u5728\u5730\u94c1\u7ad9\u4e2d\u6f2b\u6e38\uff0c\u8ba9\u4eba\u6709\u8eab\u4e34\u5176\u5883\u7684\u611f\u89c9\uff0c\u7531\u4e8e\u573a\u666f\u672c\u8eab\u7684\u8f7b\u91cf\u5316\uff0c\u6240\u4ee5 <strong>VR<\/strong>\u00a0\u573a\u666f\u4e0b\u7684\u6d41\u7545\u6027\u4e5f\u662f\u5341\u5206\u7684\u9ad8\uff0c\u8ba9\u7528\u6237\u4e0d\u4f1a\u6709\u5934\u6655\u7684\u611f\u89c9\u3002\u5f53\u7136\u7cfb\u7edf\u672c\u8eab\u4e5f\u53ef\u4ee5\u5728\u79fb\u52a8\u7aef\u8fd0\u884c\uff0c\u4ee5\u4e0b\u4e3a\u79fb\u52a8\u7aef\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/12-1.gif\" \/><\/p>\n<p>\u7a0b\u5e8f\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/11-13.jpg\" width=\"836\" height=\"509\" \/><\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/14.jpg\" width=\"836\" height=\"509\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span style=\"font-size: 18pt;\"><strong>\u524d\u8a00<\/strong><\/span><\/p>\n<p>\u5de5\u4e1a\u4e92\u8054\u7f51\uff0c\u7269\u8054\u7f51\uff0c\u53ef\u89c6\u5316\u7b49\u540d\u8bcd\u5728\u6211\u4eec\u73b0\u5728\u4fe1\u606f\u5316\u7684\u5927\u80cc\u666f\u4e0b\u5df2\u7ecf\u662f\u8033\u719f\u80fd\u8be6\uff0c\u65e5\u5e38\u751f\u6d3b\u7684\u4ea4\u901a\uff0c\u51fa\u884c\uff0c\u5403\u7a7f\u7b49\u53ef\u80fd\u90fd\u53ef\u4ee5\u7528\u4fe1\u606f\u5316\u7684\u65b9\u5f0f\u6765\u4e3a\u6211\u4eec\u8868\u8fbe\uff0c\u5728\u4f20\u7edf\u7684\u53ef\u89c6\u5316\u76d1\u63a7\u9886\u57df\uff0c\u4e00\u822c\u90fd\u662f\u57fa\u4e8e Web SCADA \u7684\u524d\u7aef\u6280\u672f\u6765\u5b9e\u73b0 2D \u53ef\u89c6\u5316\u76d1\u63a7\uff0c\u672c\u7cfb\u7edf\u91c7\u7528 Hightopo \u7684 HT for Web \u4ea7\u54c1\u6765\u6784\u9020\u8f7b\u91cf\u5316\u7684 3D \u53ef\u89c6\u5316\u573a\u666f\uff0c\u8be5 3D \u573a\u666f\u4ece\u6b63\u9762\u5c55\u793a\u4e86\u4e00\u4e2a\u5730\u94c1\u7ad9\u7684\u73b0\u5b9e\u573a\u666f\uff0c\u5305\u62ec\u5730\u94c1\u7684\u5b9e\u65f6\u8fd0\u884c\u60c5\u51b5\uff0c\u5730\u94c1\u4e0a\u4e0b\u884c\u60c5\u51b5\uff0c\u89c6\u9891\u76d1\u63a7\uff0c\u70df\u96fe\u62a5\u8b66\uff0c\u7535\u68af\u8fd0\u884c\u60c5\u51b5\u7b49\u7b49\uff0c\u5e2e\u52a9\u6211\u4eec\u76f4\u89c2\u7684\u4e86\u89e3\u5f53\u524d\u7684\u5730\u94c1\u7ad9\u3002<\/p>\n<p>\u7cfb\u7edf\u4e2d\u4e3a\u4e86\u5e2e\u52a9\u7528\u6237\u66f4\u76f4\u89c2\u53cb\u597d\u7684\u6d4f\u89c8\u5f53\u524d\u5730\u94c1\u7ad9\uff0c\u63d0\u4f9b\u4e86\u4e09\u79cd\u4ea4\u4e92\u6a21\u5f0f\uff1a<\/p>\n<ul>\n<li>\u7b2c\u4e00\u4eba\u79f0\u6a21\u5f0f &#8212; \u64cd\u4f5c\u5c31\u7c7b\u4f3c\u884c\u4eba\u6216\u8f66\u5728\u884c\u8fdb\u7684\u6548\u679c\uff0c\u53ef\u4ee5\u901a\u8fc7\u952e\u76d8\u9f20\u6807\u63a7\u5236\u524d\u8fdb\u540e\u9000\u3002<\/li>\n<li>\u81ea\u52a8\u5de1\u68c0\u6a21\u5f0f &#8212; \u8be5\u6a21\u5f0f\u4e0b\u7528\u6237\u4e0d\u9700\u8981\u4efb\u4f55\u64cd\u4f5c\uff0c\u573a\u666f\u81ea\u52a8\u524d\u8fdb\u540e\u9000\u6765\u5de1\u67e5\u5f53\u524d\u5730\u94c1\u7ad9\u7684\u573a\u666f\u3002<\/li>\n<li>\u9f20\u6807\u64cd\u4f5c\u6a21\u5f0f &#8212; \u5de6\u952e\u65cb\u8f6c\u573a\u666f\uff0c\u53f3\u952e\u5e73\u79fb\u573a\u666f\u3002<\/li>\n<\/ul>\n<p>\u672c\u7bc7\u6587\u7ae0\u901a\u8fc7\u5bf9\u5730\u94c1\u7ad9\u53ef\u89c6\u5316\u573a\u666f\u7684\u642d\u5efa\uff0c\u52a8\u753b\u4ee3\u7801\u7684\u5b9e\u73b0\uff0c\u4ea4\u4e92\u6a21\u5f0f\u7684\u539f\u7406\u89e3\u6790\uff0c\u4ee5\u53ca\u4e3b\u8981\u529f\u80fd\u70b9\u7684\u5b9e\u73b0\u8fdb\u884c\u9610\u8ff0\uff0c\u5e2e\u52a9\u6211\u4eec\u4e86\u89e3\u5982\u4f55\u4f7f\u7528 <strong><a href=\"https:\/\/hightopo.com\/\" target=\"_blank\">HT<\/a><\/strong>\u00a0\u5b9e\u73b0\u4e00\u4e2a\u7b80\u5355\u7684\u5730\u94c1\u7ad9\u53ef\u89c6\u5316\u3002<\/p>\n<p>\u9884\u89c8\u5730\u5740\uff1a<a href=\"http:\/\/www.hightopo.com\/demo\/ht-subway\/\" target=\"_blank\">\u57fa\u4e8e HTML5 WebGL \u7684\u5730\u94c1\u7ad9 3D \u53ef\u89c6\u5316\u7cfb\u7edf<\/a>\u00a0<a href=\"http:\/\/www.hightopo.com\/demo\/ht-subway\/\" target=\"_blank\">http:\/\/www.hightopo.com\/demo\/ht-subway\/<\/a><\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u754c\u9762\u7b80\u4ecb\u53ca\u6548\u679c\u9884\u89c8<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u5730\u94c1\u8fd0\u884c\u6548\u679c<\/strong><\/span><\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/1.gif\" \/><\/p>\n<p>\u5730\u94c1\u4ece\u7ad9\u5916\u5f00\u5230\u7ad9\u5185\u7684\u6548\u679c\u4e3a\u900f\u660e\u5ea6\u9010\u6e10\u589e\u52a0\uff0c\u901f\u5ea6\u9010\u6e10\u964d\u4f4e\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u6f2b\u6e38\u6548\u679c<\/strong><\/span><\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/2-1-1.gif\" \/><\/p>\n<p>\u4e0a\u8ff0\u4e3a\u81ea\u52a8\u5de1\u68c0\u7684\u6f2b\u6e38\u6548\u679c\uff0c\u573a\u666f\u81ea\u52a8\u8fdb\u884c\u524d\u8fdb\u65cb\u8f6c\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u76d1\u63a7\u8bbe\u5907\u4ea4\u4e92\u6548\u679c<\/strong><\/span><\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/3-9.gif\" \/><\/p>\n<p>\u5f53\u6211\u4eec\u70b9\u51fb\u573a\u666f\u4e2d\u7684\u76d1\u63a7\u8bbe\u5907\u65f6\u53ef\u4ee5\u67e5\u770b\u5f53\u524d\u8bbe\u5907\u7684\u8fd0\u884c\u60c5\u51b5\uff0c\u8fd0\u884c\u6570\u636e\u7b49\u4fe1\u606f\u3002<\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u573a\u666f\u642d\u5efa<\/strong><\/span><\/p>\n<p>\u8be5\u7cfb\u7edf\u4e2d\u7684\u5927\u90e8\u5206\u6a21\u578b\u90fd\u662f\u901a\u8fc7 3dMax \u5efa\u6a21\u751f\u6210\u7684\uff0c\u8be5\u5efa\u6a21\u5de5\u5177\u53ef\u4ee5\u5bfc\u51fa obj \u4e0e mtl \u6587\u4ef6\uff0c\u5728 HT \u4e2d\u53ef\u4ee5\u901a\u8fc7\u89e3\u6790 obj \u4e0e mtl \u6587\u4ef6\u6765\u751f\u6210 3d \u573a\u666f\u4e2d\u7684\u6240\u6709\u590d\u6742\u6a21\u578b\uff0c\u5f53\u7136\u5982\u679c\u662f\u67d0\u4e9b\u7b80\u5355\u7684\u6a21\u578b\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 HT \u6765\u7ed8\u5236\uff0c\u8fd9\u6837\u4f1a\u6bd4 obj \u6a21\u578b\u66f4\u8f7b\u91cf\u5316\uff0c\u6240\u4ee5\u5927\u90e8\u5206\u7b80\u5355\u7684\u6a21\u578b\u90fd\u662f\u91c7\u7528 <strong>HT for Web<\/strong>\u00a0\u4ea7\u54c1\u8f7b\u91cf\u5316 <strong>HTML5\/WebGL<\/strong>\u00a0\u5efa\u6a21\u7684\u65b9\u6848\uff0c\u5177\u4f53\u7684\u89e3\u6790\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5206\u522b\u4e3a obj \u6587\u4ef6\u5730\u5740\uff0cmtl \u6587\u4ef6\u5730\u5740<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span> ht.Default.loadObj('obj\/metro.obj', 'obj\/metro.mtl'<span style=\"color: #000000;\">, {\r\n<\/span><span style=\"color: #008080;\"> 3<\/span>     center: <span style=\"color: #0000ff;\">true<\/span><span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\"> 4<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6a21\u578b\u662f\u5426\u5c45\u4e2d\uff0c\u9ed8\u8ba4\u4e3a false\uff0c\u8bbe\u7f6e\u4e3a true \u5219\u4f1a\u79fb\u52a8\u6a21\u578b\u4f4d\u7f6e\u4f7f\u5176\u5185\u5bb9\u5c45\u4e2d<\/span>\r\n<span style=\"color: #008080;\"> 5<\/span>     r3: [0, -Math.PI \/ 2, 0<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u65cb\u8f6c\u53d8\u5316\u53c2\u6570\uff0c\u683c\u5f0f\u4e3a [rx, ry, rz]<\/span>\r\n<span style=\"color: #008080;\"> 7<\/span>     s3: [0.15, 0.15, 0.15<span style=\"color: #000000;\">],\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5927\u5c0f\u53d8\u5316\u53c2\u6570\uff0c\u683c\u5f0f\u4e3a [sx, sy, sz]<\/span>\r\n<span style=\"color: #008080;\"> 9<\/span>     finishFunc: <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\">(modelMap, array, rawS3) {\r\n<\/span><span style=\"color: #008080;\">10<\/span>         <span style=\"color: #0000ff;\">if<\/span><span style=\"color: #000000;\"> (modelMap) {\r\n<\/span><span style=\"color: #008080;\">11<\/span>             ht.Default.setShape3dModel('metro', array); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6ce8\u518c\u4e00\u4e2a\u540d\u5b57\u4e3a metro \u7684\u6a21\u578b<\/span>\r\n<span style=\"color: #008080;\">12<\/span> <span style=\"color: #000000;\">        }\r\n<\/span><span style=\"color: #008080;\">13<\/span> <span style=\"color: #000000;\">    }\r\n<\/span><span style=\"color: #008080;\">14<\/span> });<\/pre>\n<\/div>\n<p>\u4e0a\u9762\u901a\u8fc7\u52a0\u8f7d obj \u6a21\u578b\u4e4b\u540e\u6ce8\u518c\u4e86\u4e00\u4e2a\u540d\u5b57\u4e3a <strong>metro<\/strong> \u7684\u6a21\u578b\uff0c\u4e4b\u540e\u5982\u679c\u8981\u4f7f\u7528\u8be5\u6a21\u578b\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u4ee3\u7801\u6765\u5b9e\u73b0\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\">1<\/span> <span style=\"color: #0000ff;\">var<\/span> node = <span style=\"color: #0000ff;\">new<\/span><span style=\"color: #000000;\"> ht.Node();\r\n<\/span><span style=\"color: #008080;\">2<\/span> <span style=\"color: #000000;\">node.s({\r\n<\/span><span style=\"color: #008080;\">3<\/span>     'shape3d': 'metro'\r\n<span style=\"color: #008080;\">4<\/span> });<\/pre>\n<\/div>\n<p>\u4e0a\u9762\u4ee3\u7801\u65b0\u5efa\u4e86\u4e00\u4e2a <strong>node<\/strong> \u5bf9\u8c61\uff0c\u901a\u8fc7\u8bbe\u7f6e style \u5bf9\u8c61\u7684 <strong>shape3d<\/strong> \u5c5e\u6027\u53ef\u4ee5\u628a\u6a21\u578b\u540d\u79f0\u4e3a <strong>metro<\/strong> \u7528\u5230\u8be5 node \u5bf9\u8c61\u4e0a\u53bb\uff0c\u4e4b\u540e\u4fbf\u662f\u6211\u4eec\u573a\u666f\u4e2d\u770b\u5230\u7684\u5730\u94c1\u5217\u8f66\u6a21\u578b\u3002<\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u52a8\u753b\u4ee3\u7801\u5206\u6790<\/strong><\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">\u5730\u94c1\u52a8\u753b\u4ee3\u7801\u7684\u5b9e\u73b0\u5206\u6790<\/span><\/strong><\/p>\n<p>\u573a\u666f\u4e2d\u5730\u94c1\u7684\u8fd0\u884c\u662f\u901a\u8fc7 HT \u63d0\u4f9b\u7684\u8c03\u5ea6\u63d2\u4ef6\u6765\u5b9e\u73b0\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\u8be5\u8c03\u5ea6\u4e3b\u8981\u7528\u4e8e\u5728\u6307\u5b9a\u7684\u65f6\u95f4\u95f4\u9694\u8fdb\u884c\u51fd\u6570\u56de\u8c03\u5904\u7406\uff0c\u56de\u8c03\u51fd\u6570\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3a data \u56fe\u5143\uff0c\u4e5f\u5c31\u662f 3D \u573a\u666f\u4e2d\u7684\u6a21\u578b\u8282\u70b9\uff0c\u6211\u4eec\u53ef\u4ee5\u5224\u65ad\u5f53\u524d data \u662f\u5426\u4e3a\u6211\u4eec\u521a\u624d\u521b\u5efa\u7684 metro \u90a3\u4e2a\u8282\u70b9\u6765\u8fdb\u884c\u540e\u7eed\u7684\u64cd\u4f5c\uff0c\u573a\u666f\u4e2d\u6a21\u62df\u4e86\u4e00\u4e2a\u5de6\u5f00\u7684\u5730\u94c1\u548c\u4e00\u4e2a\u53f3\u5f00\u7684\u5730\u94c1\uff0c\u4e24\u8f86\u5730\u94c1\u4f1a\u4ea4\u66ff\u51fa\u73b0\u3002\u5728 3D \u573a\u666f\u4e2d\u80af\u5b9a\u4f1a\u6709\u5750\u6807\u7cfb\uff0cHT \u4e2d\u662f\u7528 x, y, z \u6765\u5206\u522b\u8868\u793a\u4e09\u4e2a\u8f74\uff0c\u6240\u4ee5\u5730\u94c1\u7684\u8fd0\u52a8\u80af\u5b9a\u662f\u6539\u53d8\u5730\u94c1\u5728\u5750\u6807\u7cfb\u4e2d\u7684\u4f4d\u7f6e\u6765\u5b9e\u73b0\u5730\u94c1\u7684\u8fd0\u884c\uff0c\u5730\u94c1\u5750\u6807\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/4.jpg\" width=\"640\" height=\"390\" \/><\/p>\n<p>\u901a\u8fc7\u4e0a\u56fe\u53ef\u4ee5\u77e5\u9053\u5730\u94c1\u5728 3D \u573a\u666f\u4e2d\u7684\u5750\u6807\u7cfb\uff0c\u5982\u679c\u8981\u5b9e\u73b0\u5730\u94c1\u7684\u79fb\u52a8\u5219\u53ea\u9700\u8981\u5c06\u5730\u94c1\u5f80\u56fe\u4e2d\u6240\u793a\u7ea2\u8272\u7bad\u5934\u7684\u65b9\u5411\u8fdb\u884c\u79fb\u52a8\uff0c\u5373 <strong>x<\/strong>\u00a0\u8f74\u7684\u65b9\u5411\uff0c\u901a\u8fc7 <strong>setX<\/strong>\u00a0\u8fd9\u4e2a\u65b9\u6cd5\u4e0d\u65ad\u7684\u4fee\u6539\u5730\u94c1\u7684\u4f4d\u7f6e\u8fbe\u5230\u5730\u94c1\u884c\u8fdb\u7684\u76ee\u7684\uff0c\u4ee3\u7801\u4e2d\u901a\u8fc7 getSpeedByX \u4ee5\u53ca getOpacityByX \u4e24\u4e2a\u65b9\u6cd5\u6765\u4e0d\u65ad\u83b7\u53d6\u6b64\u65f6\u7684\u5217\u8f66\u901f\u5ea6\u4ee5\u53ca\u5217\u8f66\u900f\u660e\u5ea6\uff0c\u4ee5\u4e0b\u4e3a\u5173\u952e\u4ee3\u7801\u5b9e\u73b0\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> let metroTask =<span style=\"color: #000000;\"> {\r\n<\/span><span style=\"color: #008080;\"> 2<\/span>     interval: 50<span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\"> 3<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6bcf\u4e94\u5341\u79d2\u6267\u884c\u4e00\u6b21<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span>     action: (data) = &gt;{ <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u6587\u6240\u63d0\u56de\u8c03\u51fd\u6570<\/span>\r\n<span style=\"color: #008080;\"> 5<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u5f53\u65f6\u4f20\u8fdb\u6765\u7684\u8282\u70b9\u662f\u5426\u4e3a\u5730\u94c1\u5217\u8f66\u8282\u70b9<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span>         <span style=\"color: #0000ff;\">if<\/span> (data ===<span style=\"color: #000000;\"> currentMetro) {\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u5730\u94c1\u6b64\u65f6\u7684 X \u8f74\u4f4d\u7f6e\u4ee5\u53ca\u884c\u8fdb\u7684\u65b9\u5411<\/span>\r\n<span style=\"color: #008080;\"> 8<\/span>             let currentX =<span style=\"color: #000000;\"> data.getX(),\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>             direction = data.a('direction'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">10<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6839\u636e\u5f53\u524d\u7684 X \u8f74\u4f4d\u7f6e\u83b7\u53d6\u5f53\u524d\u7684\u5217\u8f66\u901f\u5ea6<\/span>\r\n<span style=\"color: #008080;\">11<\/span>             let speed = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.getSpeedByX(currentX);\r\n<\/span><span style=\"color: #008080;\">12<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6839\u636e\u5f53\u524d\u7684 X \u8f74\u4f4d\u7f6e\u83b7\u53d6\u5f53\u524d\u7684\u5217\u8f66\u900f\u660e\u5ea6<\/span>\r\n<span style=\"color: #008080;\">13<\/span>             let opacity = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.getOpacityByX(currentX);\r\n<\/span><span style=\"color: #008080;\">14<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u6b64\u65f6 X \u8f74\u4f4d\u7f6e\u662f\u5426\u8d85\u8fc7\u67d0\u4e2a\u503c \u5373\u5730\u94c1\u662f\u5728\u67d0\u4e2a\u8303\u56f4\u5185\u79fb\u52a8<\/span>\r\n<span style=\"color: #008080;\">15<\/span>             <span style=\"color: #0000ff;\">if<\/span> (Math.abs(currentX) &lt;= 5000<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">16<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u5f53\u524d\u7684\u900f\u660e\u5ea6<\/span>\r\n<span style=\"color: #008080;\">17<\/span>                 opacity !== 1 ?<span style=\"color: #000000;\"> currentMetro.s({\r\n<\/span><span style=\"color: #008080;\">18<\/span>                     'shape3d.transparent': <span style=\"color: #0000ff;\">true<\/span><span style=\"color: #000000;\">,\r\n<\/span><span style=\"color: #008080;\">19<\/span>                     'shape3d.opacity'<span style=\"color: #000000;\">: opacity\r\n<\/span><span style=\"color: #008080;\">20<\/span> <span style=\"color: #000000;\">                }) : currentMetro.s({\r\n<\/span><span style=\"color: #008080;\">21<\/span>                     'shape3d.transparent': <span style=\"color: #0000ff;\">false<\/span>\r\n<span style=\"color: #008080;\">22<\/span> <span style=\"color: #000000;\">                });\r\n<\/span><span style=\"color: #008080;\">23<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u5f53\u524d\u7684 X \u8f74\u4f4d\u7f6e<\/span>\r\n<span style=\"color: #008080;\">24<\/span>                 data.setX(currentX + direction *<span style=\"color: #000000;\"> speed);\r\n<\/span><span style=\"color: #008080;\">25<\/span>                 <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u6b64\u65f6\u5730\u94c1\u7684\u901f\u5ea6\u4e3a 0\uff0c\u6240\u4ee5\u6b64\u65f6\u5e94\u8be5\u6267\u884c\u5f00\u95e8\u7684\u52a8\u753b<\/span>\r\n<span style=\"color: #008080;\">26<\/span>                 <span style=\"color: #0000ff;\">if<\/span> (speed === 0) <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.doorAnimation(currentMetro, direction);\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: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u53f3\u65b9\u5411\u5730\u94c1\u5f00\u5230\u5934\uff0c\u8fdb\u884c\u590d\u4f4d<\/span>\r\n<span style=\"color: #008080;\">29<\/span>             <span style=\"color: #0000ff;\">if<\/span> (currentX &gt; 5000 &amp;&amp; direction === 1<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">30<\/span>                 currentMetro =<span style=\"color: #000000;\"> leftMetro;\r\n<\/span><span style=\"color: #008080;\">31<\/span>                 currentMetro.setX(5000<span style=\"color: #000000;\">);\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: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5de6\u65b9\u5411\u5730\u94c1\u5f00\u5230\u5934\uff0c\u8fdb\u884c\u590d\u4f4d<\/span>\r\n<span style=\"color: #008080;\">34<\/span>             <span style=\"color: #0000ff;\">if<\/span> (currentX &lt; -5000 &amp;&amp; direction === -1<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">35<\/span>                 currentMetro =<span style=\"color: #000000;\"> rightMetro;\r\n<\/span><span style=\"color: #008080;\">36<\/span>                 currentMetro.setX( - 5000<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">37<\/span> <span style=\"color: #000000;\">            }\r\n<\/span><span style=\"color: #008080;\">38<\/span> <span style=\"color: #000000;\">        }\r\n<\/span><span style=\"color: #008080;\">39<\/span> <span style=\"color: #000000;\">    }\r\n<\/span><span style=\"color: #008080;\">40<\/span> <span style=\"color: #000000;\">};\r\n<\/span><span style=\"color: #008080;\">41<\/span> dm3d.addScheduleTask(metroTask);<\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4ee5\u4e0a\u4ee3\u7801\u53ef\u4ee5\u77e5\u9053\u5730\u94c1\u5728\u8fd0\u884c\u7684\u8fc7\u7a0b\u4e2d\uff0c\u4e3b\u8981\u901a\u8fc7\u4fee\u6539\u5730\u94c1\u7684 <strong>x<\/strong>\u00a0\u8f74\u4f4d\u7f6e\u6765\u4ea7\u751f\u524d\u8fdb\u7684\u52a8\u753b\uff0c\u5e76\u4e14\u9700\u8981\u8ba9\u5730\u94c1\u5728\u67d0\u4e2a\u533a\u95f4\u5185\u8fdb\u884c\u8fd0\u52a8\uff0c\u9700\u8981\u5224\u65ad\u8fb9\u754c\uff0c\u800c\u4e14\u4e3a\u4e86\u6a21\u62df\u51fa\u771f\u5b9e\u7684\u6548\u679c\u9700\u8981\u6839\u636e\u5730\u94c1\u5f53\u524d\u7684\u4f4d\u7f6e\u4e0d\u65ad\u83b7\u53d6\u5f53\u524d\u7684\u5217\u8f66\u901f\u5ea6\u4ee5\u53ca\u5217\u8f66\u900f\u660e\u5ea6\uff0c\u4ee5\u4e0b\u4e3a\u6d41\u7a0b\u56fe\uff1a<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/5.png\" \/><\/p>\n<p>\u4e0a\u56fe\u6240\u793a\u7684\u4e3a\u5730\u94c1\u8fdb\u7ad9\u65f6\u5019\u7684\u6d41\u7a0b\uff0c\u5f53\u5730\u94c1\u505c\u9760\u5b8c\u6bd5\u5173\u95e8\u540e\u9700\u8981\u8fdb\u884c\u51fa\u7ad9\uff0c\u6b64\u65f6\u6211\u4eec\u53ea\u9700\u8981\u628a\u5730\u94c1\u4f4d\u7f6e\u91cd\u65b0\u8bbe\u7f6e\u4e00\u4e0b\u4e0d\u4e3a 0 \u5373\u53ef\uff0c\u4ee5\u4e0b\u4e3a\u90e8\u5206\u4ee3\u7801\u5b9e\u73b0\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\">1<\/span> currentMetro.setX(direction * 10); <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u51fa\u7ad9\u5217\u8f66\u7684\u4f4d\u7f6e<\/span><\/pre>\n<\/div>\n<p>\u5f53\u6267\u884c\u4e0a\u9762\u90a3\u53e5\u4ee3\u7801\u4e4b\u540e\u4e0a\u65b9\u7684 <strong>metroTask<\/strong>\u00a0\u8c03\u5ea6\u4efb\u52a1\u6267\u884c\u5230 getSpeedByX \u8fd9\u4e2a\u65b9\u6cd5\u4e4b\u540e\u83b7\u53d6\u5230\u7684 speed \u901f\u5ea6\u4e0d\u4e3a 0\uff0c\u56e0\u6b64\u6b64\u65f6\u4f1a\u7ee7\u7eed\u6267\u884c\u5730\u94c1\u884c\u8fdb\u7684\u52a8\u753b\uff0c\u6b64\u65f6\u7684\u901f\u5ea6\u5c31\u662f\u7531\u6162\u81f3\u5feb\uff0c\u900f\u660e\u5ea6\u7531\u6df1\u81f3\u6d45\u3002\u4ee5\u4e0b\u4e3a\u5f00\u95e8\u52a8\u753b\u6267\u884c\u6d41\u7a0b\uff1a<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/6.png\" \/><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u81ea\u52a8\u5de1\u68c0\u4ee3\u7801\u7684\u5b9e\u73b0\u5206\u6790<\/strong><\/span><\/p>\n<p>\u7cfb\u7edf\u4e2d\u81ea\u52a8\u5de1\u68c0\u7684\u5b9e\u73b0\u4e3b\u8981\u662f\u901a\u8fc7\u4fee\u6539 3D \u573a\u666f\u4e2d\u7684 <strong>eye<\/strong>\u00a0\u4ee5\u53ca <strong>center<\/strong>\u00a0\u7684\u503c\uff0c<strong>HT<\/strong> \u4e2d\u63d0\u4f9b\u4e86 <strong>rotate<\/strong>\uff0c<strong>walk<\/strong> \u4e24\u4e2a\u65b9\u6cd5\u6765\u63a7\u5236\u89c6\u89d2\u7684\u65cb\u8f6c\u4ee5\u53ca\u89c6\u89d2\u7684\u884c\u8fdb\uff0c<strong>rotate<\/strong> \u65b9\u6cd5\u5728\u975e\u7b2c\u4e00\u4eba\u79f0\u6a21\u5f0f\u65f6\uff0c\u65cb\u8f6c\u662f\u4ee5 <strong>center<\/strong>\u00a0\u4e3a\u4e2d\u5fc3\u8fdb\u884c\u65cb\u8f6c\uff0c\u4e5f\u5c31\u662f\u56f4\u7ed5\u4e2d\u5fc3\u7269\u4f53\u65cb\u8f6c\uff0c\u5f53\u4e3a\u7b2c\u4e00\u4eba\u79f0\u65f6\u65cb\u8f6c\u4ee5 <strong>eye<\/strong>\u00a0\u4e3a\u4e2d\u5fc3\u8fdb\u884c\u65cb\u8f6c\uff0c\u4e5f\u5c31\u662f\u65cb\u8f6c\u773c\u775b\u671d\u5411\u65b9\u5411\u3002<strong>walk<\/strong> \u51fd\u6570\u540c\u65f6\u6539\u53d8 <strong>eye<\/strong>\u00a0\u548c <strong>center<\/strong>\u00a0\u7684\u4f4d\u7f6e\uff0c\u4e5f\u5c31\u662f <strong>eye<\/strong>\u00a0\u548c <strong>center<\/strong>\u00a0\u5728\u4e24\u70b9\u5efa\u7acb\u7684\u77e2\u91cf\u65b9\u5411\u4e0a\u540c\u65f6\u79fb\u52a8\u76f8\u540c\u7684\u504f\u79fb\u91cf\u3002\u8be5\u7cfb\u7edf\u4e2d\u6211\u6ca1\u6709\u91c7\u7528 <strong>rotate<\/strong>\u00a0\u51fd\u6570\u800c\u662f\u81ea\u5df1\u5b9e\u73b0\u4e86\u89c6\u89d2\u7684\u65cb\u8f6c\uff0c\u56e0\u4e3a\u539f\u672c\u7684 rotate \u51fd\u6570\u65cb\u8f6c\u67d0\u4e2a\u89d2\u5ea6\u4f1a\u9a6c\u4e0a\u65cb\u8f6c\u8fc7\u53bb\u800c\u4e0d\u4f1a\u6709\u4e00\u4e2a\u65cb\u8f6c\u7684\u8fc7\u7a0b\uff0c\u6240\u4ee5\u6211\u91cd\u65b0\u5b9e\u73b0\u4e86\u65cb\u8f6c\u7684\u65b9\u6cd5\uff0c\u8be5\u7cfb\u7edf\u4e2d\u89c6\u89d2\u65cb\u8f6c\u662f\u901a\u8fc7\u4e0d\u65ad\u4fee\u6539 <strong>center<\/strong>\u00a0\u7684\u6570\u503c\u6765\u5b9e\u73b0\uff0c\u5177\u4f53\u5b9e\u73b0\u8fc7\u7a0b\u539f\u7406\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/7.jpg\" width=\"794\" height=\"266\" \/><\/p>\n<p>\u90e8\u5206\u5b9e\u73b0\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> <span style=\"color: #000000;\">rotateStep() {\r\n<\/span><span style=\"color: #008080;\"> 2<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u56fe\u8f85\u52a9\u70b9 C<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span>     let fromCenter = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.fromCenter;\r\n<\/span><span style=\"color: #008080;\"> 4<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5373\u4e0a\u56fe B \u70b9<\/span>\r\n<span style=\"color: #008080;\"> 5<\/span>     let toCenter = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.toCenter;\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6bcf\u5e27\u8f6c\u4e00\u5ea6<\/span>\r\n<span style=\"color: #008080;\"> 7<\/span>     let rotateValue = <span style=\"color: #0000ff;\">this<\/span>.rotateFrame || Math.PI \/ 180<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8f85\u52a9\u70b9 C \u4e0e B \u70b9\u4e4b\u95f4\u5efa\u7acb\u4e00\u4e2a\u65b9\u5411\u5411\u91cf<\/span>\r\n<span style=\"color: #008080;\"> 9<\/span>     let centerVector = <span style=\"color: #0000ff;\">new<\/span> ht.Math.Vector2(toCenter.x - fromCenter.x, toCenter.y -<span style=\"color: #000000;\"> fromCenter.y);\r\n<\/span><span style=\"color: #008080;\">10<\/span>     let centerVectorLength =<span style=\"color: #000000;\"> centerVector.length();\r\n<\/span><span style=\"color: #008080;\">11<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u6b64\u65f6\u65cb\u8f6c\u767e\u5206\u6bd4<\/span>\r\n<span style=\"color: #008080;\">12<\/span>     let rotatePercent = rotateValue * <span style=\"color: #0000ff;\">this<\/span>.stepNum \/ <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.curRotateVal;\r\n<\/span><span style=\"color: #008080;\">13<\/span>     <span style=\"color: #0000ff;\">if<\/span> (rotatePercent &gt;= 1<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">14<\/span>         rotatePercent = 1<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">15<\/span>         <span style=\"color: #0000ff;\">this<\/span>.stepNum = -2<span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\">16<\/span> <span style=\"color: #000000;\">    }\r\n<\/span><span style=\"color: #008080;\">17<\/span>     let newLength = rotatePercent *<span style=\"color: #000000;\"> centerVectorLength;\r\n<\/span><span style=\"color: #008080;\">18<\/span> <span style=\"color: #000000;\">    centerVector.setLength(newLength);\r\n<\/span><span style=\"color: #008080;\">19<\/span>     let newCenterVector =<span style=\"color: #000000;\"> centerVector.add(fromCenter);\r\n<\/span><span style=\"color: #008080;\">20<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u83b7\u53d6\u65cb\u8f6c\u8fc7\u7a0b\u4e2d center \u7684\u70b9\u4fe1\u606f<\/span>\r\n<span style=\"color: #008080;\">21<\/span>     let newCenterPosition = [newCenterVector.x, <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.personHeight, newCenterVector.y];\r\n<\/span><span style=\"color: #008080;\">22<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8bbe\u7f6e\u5f53\u524d center \u7684\u5927\u5c0f<\/span>\r\n<span style=\"color: #008080;\">23<\/span>     <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">.g3d.setCenter(newCenterPosition);\r\n<\/span><span style=\"color: #008080;\">24<\/span> }<\/pre>\n<\/div>\n<p>\u901a\u8fc7\u4e0a\u8ff0\u4ee3\u7801\u5c31\u5b9e\u73b0\u4e86\u573a\u666f\u4e2d\u7684\u89c6\u89d2\u65cb\u8f6c\uff0c\u5e76\u4e14\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539 <strong>rotateValue<\/strong>\u00a0\u7684\u503c\u63a7\u5236\u65cb\u8f6c\u7684\u901f\u5ea6\u3002<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u7535\u68af\u52a8\u753b\u4ee3\u7801\u7684\u5b9e\u73b0\u5206\u6790<\/strong><\/span><\/p>\n<p>\u573a\u666f\u4e2d\u7535\u68af\u662f\u4e00\u4e2a obj \u6a21\u578b\uff0c3D \u6a21\u578b\u662f\u7531\u6700\u57fa\u7840\u7684\u4e09\u89d2\u5f62\u9762\u62fc\u63a5\u5408\u6210\uff0c\u4f8b\u5982 1 \u4e2a\u77e9\u5f62\u53ef\u4ee5\u7531 2 \u4e2a\u4e09\u89d2\u5f62\u6784\u6210\uff0c1 \u4e2a\u7acb\u65b9\u4f53\u7531 6 \u4e2a\u9762\u5373 12 \u4e2a\u4e09\u89d2\u5f62\u6784\u6210\uff0c\u4ee5\u6b64\u7c7b\u63a8\u66f4\u590d\u6742\u7684\u6a21\u578b\u53ef\u4ee5\u7531\u8bb8\u591a\u7684\u5c0f\u4e09\u89d2\u5f62\u7ec4\u5408\u5408\u6210\u3002\u56e0\u6b64 3D \u6a21\u578b\u5b9a\u4e49\u5373\u4e3a\u5bf9\u6784\u9020\u6a21\u578b\u7684\u6240\u6709\u4e09\u89d2\u5f62\u7684\u63cf\u8ff0\uff0c\u800c\u6bcf\u4e2a\u4e09\u89d2\u5f62\u7531\u4e09\u4e2a\u9876\u70b9 vertex \u6784\u6210\uff0c\u6bcf\u4e2a\u9876\u70b9 vertex \u7531 x, y, z \u4e09\u7ef4\u7a7a\u95f4\u5750\u6807\u51b3\u5b9a\uff0cHT \u4e2d\u4f7f\u7528 <strong>vs<\/strong> \u6570\u7ec4\u8bb0\u5f55\u6784\u6210\u4e09\u89d2\u9762\u7684\u6240\u6709\u9876\u70b9\u5750\u6807\uff0c\u6240\u4ee5\u5982\u679c\u60f3\u8981\u8ba9\u7535\u68af\u8fd0\u884c\u8d77\u6765\uff0c\u53ea\u9700\u8981\u628a\u6240\u6709\u7684\u9876\u70b9\u5750\u6807\u5f80\u7535\u68af\u8fd0\u884c\u7684\u65b9\u5411\u8fdb\u884c\u5e73\u79fb\uff0c\u4ee5\u4e0b\u4e3a\u90e8\u5206\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;\"> vs \u6307\u7684\u662f\u6784\u6210\u7535\u68af\u6a21\u578b\u6240\u6709\u7684\u4e09\u89d2\u9762\u9876\u70b9\u5750\u6807\u6570\u7ec4<\/span>\r\n<span style=\"color: #008080;\"> 2<\/span> <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u7531\u4e8e\u573a\u666f\u4e2d\u7535\u68af\u7684\u8fd0\u884c\u65b9\u5411\u4e3a\u5f80\u5bf9\u89d2\u7ebf\u53f3\u4e0a\u65b9\u8fd0\u52a8\uff0c\u6240\u4ee5\u53ea\u9700\u8981\u4fee\u6539 x \u8f74\u4ee5\u53ca y \u8f74\u5750\u6807\u503c<\/span>\r\n<span style=\"color: #008080;\"> 3<\/span> <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> xStep yStep \u4e3a\u6bcf\u6b21\u7535\u68af\u8fd0\u52a8\u7684\u8ddd\u79bb<\/span>\r\n<span style=\"color: #008080;\"> 4<\/span> setInterval(() = &gt;<span style=\"color: #000000;\">{\r\n<\/span><span style=\"color: #008080;\"> 5<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> i+3 \u662f\u56e0\u4e3a vs \u6570\u7ec4\u7684\u987a\u5e8f\u4e3a x, y, z \u8f74 \u6240\u4ee5\u6bcf\u6b21 i \u504f\u79fb\u4e09\u4e2a\u5355\u4f4d\u5927\u5c0f<\/span>\r\n<span style=\"color: #008080;\"> 6<\/span>     <span style=\"color: #0000ff;\">for<\/span> (let i = 0, l = vs.length; i &lt; l; i = i + 3<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\"> 7<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8be5\u9876\u70b9\u5750\u6807\u4e0b\u4e00\u4e2a x \u8f74\u5750\u6807\u7684\u503c<\/span>\r\n<span style=\"color: #008080;\"> 8<\/span>         let nextX = vs[i] -<span style=\"color: #000000;\"> xStep;\r\n<\/span><span style=\"color: #008080;\"> 9<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u8be5\u9876\u70b9\u5750\u6807\u4e0b\u4e00\u4e2a y \u8f74\u5750\u6807\u7684\u503c<\/span>\r\n<span style=\"color: #008080;\">10<\/span>         let nextY = vs[i + 1] +<span style=\"color: #000000;\"> yStep;\r\n<\/span><span style=\"color: #008080;\">11<\/span>         vs[i] = nextX &lt; -0.5 ? 0.5 - (Math.abs(nextX) - 0.5<span style=\"color: #000000;\">) : nextX;\r\n<\/span><span style=\"color: #008080;\">12<\/span>         vs[i + 1] = nextY &gt; 0.5 ? -0.5 + (Math.abs(nextY) - 0.5<span style=\"color: #000000;\">) : nextY;\r\n<\/span><span style=\"color: #008080;\">13<\/span> <span style=\"color: #000000;\">    }\r\n<\/span><span style=\"color: #008080;\">14<\/span> <span style=\"color: #000000;\">},\r\n<\/span><span style=\"color: #008080;\">15<\/span> 200);<\/pre>\n<\/div>\n<p>\u7535\u68af\u8fd0\u52a8\u52a8\u753b\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/8.gif\" \/><\/p>\n<p><span style=\"font-size: 18pt;\"><strong>\u76d1\u63a7\u529f\u80fd\u5c55\u793a\u53ca\u4ecb\u7ecd<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u89c6\u9891\u76d1\u63a7<\/strong><\/span><\/p>\n<p>\u5f53\u70b9\u51fb\u573a\u666f\u4e2d\u7684\u6444\u50cf\u5934\u4e4b\u540e\u53f3\u4fa7\u9876\u90e8\u4f1a\u663e\u793a\u51fa\u5f53\u524d\u6444\u50cf\u5934\u7684\u76d1\u63a7\u753b\u9762\uff0c\u4ee5\u4e0b\u4e3a\u5b9e\u73b0\u6548\u679c\u56fe:<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/3-9.gif\" \/><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u70df\u96fe\u62a5\u8b66\u76d1\u63a7<\/strong><\/span><\/p>\n<p>\u70df\u96fe\u62a5\u8b66\u4f1a\u6839\u636e\u540e\u53f0\u5b9e\u65f6\u4f20\u9012\u8fc7\u6765\u7684\u72b6\u6001\u503c\u6765\u53d8\u6362\u5f53\u524d\u70df\u96fe\u62a5\u8b66\u6a21\u578b\u7684\u989c\u8272\uff0c\u7ea2\u8272\u4e3a\u62a5\u8b66\u72b6\u6001\uff0c\u4ee5\u4e0b\u4e3a\u5b9e\u73b0\u6548\u679c\u56fe:<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/10.gif\" \/><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u7535\u89c6\u5217\u8f66\u5230\u7ad9\u65f6\u95f4\u76d1\u63a7<\/strong><\/span><\/p>\n<p>\u65e5\u5e38\u5730\u94c1\u7ad9\u4e2d\u4f1a\u6709\u4e13\u95e8\u7684\u7535\u89c6\u6765\u5c55\u793a\u4e0b\u4e00\u73ed\u5730\u94c1\u5230\u7ad9\u7684\u65f6\u95f4\u8868\uff0c\u8be5\u7cfb\u7edf\u4e2d\u4e5f\u6a21\u62df\u8be5\u6548\u679c\uff0c\u4e0d\u8fc7\u8be5\u7cfb\u7edf\u6682\u65f6\u505a\u4e86\u7535\u89c6\u7684\u6a21\u578b\uff0c\u65f6\u95f4\u6682\u65e0\u5bf9\u63a5\uff0c\u4ee5\u4e0b\u4e3a\u6548\u679c\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/11-13.jpg\" width=\"836\" height=\"509\/\" \/><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>\u573a\u666f\u76d1\u63a7\u4ea4\u4e92<\/strong><\/span><\/p>\n<p>3D \u573a\u666f\u4e2d\u4ea4\u4e92\u662f\u6bd4\u8f83\u7b80\u5355\u7684\uff0c\u4e3b\u8981\u662f\u70b9\u51fb\u6444\u50cf\u5934\u5c55\u793a 2D \u76d1\u63a7\u9762\u677f\uff0c\u5728 2D \u754c\u9762\u4e2d\u4e3b\u8981\u662f\u5207\u6362\u4e09\u79cd\u4ea4\u4e92\u6a21\u5f0f\uff0c\u4e09\u79cd\u4ea4\u4e92\u6a21\u5f0f\u4e3a\u4e92\u65a5\u7684\u5173\u7cfb\uff0c\u4ee5\u4e0b\u662f 3D \u4ea4\u4e92\u6ce8\u518c\u4e8b\u4ef6\u4ee3\u7801:<\/p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080;\"> 1<\/span> g3d.mi((e) = &gt;<span style=\"color: #000000;\">{\r\n<\/span><span style=\"color: #008080;\"> 2<\/span> <span style=\"color: #000000;\">    let {\r\n<\/span><span style=\"color: #008080;\"> 3<\/span> <span style=\"color: #000000;\">        g2d,\r\n<\/span><span style=\"color: #008080;\"> 4<\/span> <span style=\"color: #000000;\">        dm2d\r\n<\/span><span style=\"color: #008080;\"> 5<\/span>     } = <span style=\"color: #0000ff;\">this<\/span><span style=\"color: #000000;\">;\r\n<\/span><span style=\"color: #008080;\"> 6<\/span>     <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u4e3a\u70b9\u51fb\u7c7b\u578b<\/span>\r\n<span style=\"color: #008080;\"> 7<\/span>     <span style=\"color: #0000ff;\">if<\/span> (e.kind === 'clickData'<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\"> 8<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> data \u4e3a\u5f53\u524d\u70b9\u51fb\u7684\u56fe\u5143<\/span>\r\n<span style=\"color: #008080;\"> 9<\/span>         let data =<span style=\"color: #000000;\"> e.data;\r\n<\/span><span style=\"color: #008080;\">10<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5f53\u524d\u56fe\u5143\u7684 shape3d \u7c7b\u578b<\/span>\r\n<span style=\"color: #008080;\">11<\/span>         let shape3d = data.s('shape3d'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">12<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u5224\u65ad\u5f53\u524d shape3d \u7c7b\u578b\u662f\u5426\u4e3a\u6444\u50cf\u5934<\/span>\r\n<span style=\"color: #008080;\">13<\/span>         <span style=\"color: #0000ff;\">if<\/span> (shape3d &amp;&amp; shape3d.indexOf('\u6444\u50cf\u5934') &gt; 0<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">14<\/span>             let cameraPanel = dm2d.getDataByTag('cameraPanel'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">15<\/span>             <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> toggle \u5207\u6362\u6444\u50cf\u5934 2d \u9762\u677f<\/span>\r\n<span style=\"color: #008080;\">16<\/span>             g2d.isVisible(cameraPanel) ? cameraPanel.s('2d.visible', <span style=\"color: #0000ff;\">false<\/span>) : cameraPanel.s('2d.visible', <span style=\"color: #0000ff;\">true<\/span><span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">17<\/span> <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: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u4e3a\u70b9\u51fb 3d \u573a\u666f\u80cc\u666f\u7c7b\u578b<\/span>\r\n<span style=\"color: #008080;\">20<\/span>     <span style=\"color: #0000ff;\">if<\/span> (e.kind === 'clickBackground'<span style=\"color: #000000;\">) {\r\n<\/span><span style=\"color: #008080;\">21<\/span>         let cameraPanel = dm2d.getDataByTag('cameraPanel'<span style=\"color: #000000;\">);\r\n<\/span><span style=\"color: #008080;\">22<\/span>         <span style=\"color: #008000;\">\/\/<\/span><span style=\"color: #008000;\"> \u9690\u85cf\u6444\u50cf\u5934 2d \u9762\u677f<\/span>\r\n<span style=\"color: #008080;\">23<\/span>         g2d.isVisible(cameraPanel) &amp;&amp; cameraPanel.s('2d.visible', <span style=\"color: #0000ff;\">false<\/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> });<\/pre>\n<\/div>\n<p><span style=\"font-size: 18pt;\"><strong>\u603b\u7ed3<\/strong><\/span><\/p>\n<p>\u5de5\u4e1a\u4e92\u8054\u7f51\u5c06\u4eba\uff0c\u6570\u636e\u548c\u673a\u5668\u8fde\u63a5\u8d77\u6765\uff0c\u5730\u94c1\u7ad9 3D \u53ef\u89c6\u5316\u7cfb\u7edf\u5219\u662f\u4e00\u4e2a\u5f88\u597d\u7684\u5c55\u73b0\uff0cHT \u7684\u8f7b\u91cf\u5316\uff0c\u6570\u636e\u7684\u53ef\u89c6\u5316\uff0c\u673a\u5668\u7684\u53ef\u89c6\u5316\uff0c\u8d44\u4ea7\u7684\u7ba1\u7406\u5316\u5e2e\u52a9\u6211\u4eec\u66f4\u597d\u7684\u76d1\u63a7\u3002\u800c\u7269\u8054\u7f51\u5c06\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\u901a\u8fc7\u4e0e HT \u7684\u7ed3\u5408\u66f4\u597d\u7684\u5c55\u73b0\u51fa\u53ef\u89c6\u5316\u7684\u4f18\u52bf\uff0c\u5f53\u7136\u5730\u94c1\u7ad9\u8fd8\u53ef\u4ee5\u4e0e <strong>VR<\/strong>\u00a0\u8fdb\u884c\u7ed3\u5408\uff0c\u5728\u5404\u5730\u79d1\u6280\u5c55\u4f1a\u4e2d\u6211\u4eec\u53ef\u4ee5\u89c1\u5230\u5404\u79cd <strong>VR<\/strong>\u00a0\u573a\u666f\u64cd\u4f5c\uff0c<strong>HT<\/strong>\u00a0\u4e2d\u4e5f\u53ef\u4ee5\u7ed3\u5408 <strong>VR<\/strong>\u00a0\u8bbe\u5907\u8fdb\u884c\u64cd\u4f5c\uff0c\u53ef\u4ee5\u6234\u4e0a\u8bbe\u5907\u5728\u5730\u94c1\u7ad9\u4e2d\u6f2b\u6e38\uff0c\u8ba9\u4eba\u6709\u8eab\u4e34\u5176\u5883\u7684\u611f\u89c9\uff0c\u7531\u4e8e\u573a\u666f\u672c\u8eab\u7684\u8f7b\u91cf\u5316\uff0c\u6240\u4ee5 <strong>VR<\/strong>\u00a0\u573a\u666f\u4e0b\u7684\u6d41\u7545\u6027\u4e5f\u662f\u5341\u5206\u7684\u9ad8\uff0c\u8ba9\u7528\u6237\u4e0d\u4f1a\u6709\u5934\u6655\u7684\u611f\u89c9\u3002\u5f53\u7136\u7cfb\u7edf\u672c\u8eab\u4e5f\u53ef\u4ee5\u5728\u79fb\u52a8\u7aef\u8fd0\u884c\uff0c\u4ee5\u4e0b\u4e3a\u79fb\u52a8\u7aef\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n<p><img alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/12-1.gif\" \/><\/p>\n<p>\u7a0b\u5e8f\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/11-13.jpg\" width=\"836\" height=\"509\" \/><\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2019\/02\/14.jpg\" width=\"836\" height=\"509\" \/><\/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\/644"}],"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=644"}],"version-history":[{"count":5,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":662,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions\/662"}],"wp:attachment":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}