{"id":600,"date":"2018-08-13T15:11:02","date_gmt":"2018-08-13T07:11:02","guid":{"rendered":"http:\/\/www.hightopo.com\/blog\/?p=600"},"modified":"2019-04-01T21:16:29","modified_gmt":"2019-04-01T13:16:29","slug":"%e5%9f%ba%e4%ba%8e-html5-%e7%9a%84-webgl-%e8%87%aa%e5%ae%9a%e4%b9%89-3d-%e6%91%84%e5%83%8f%e5%a4%b4%e7%9b%91%e6%8e%a7%e6%a8%a1%e5%9e%8b","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/600.html","title":{"rendered":"\u57fa\u4e8e HTML5 \u7684 WebGL \u81ea\u5b9a\u4e49 3D \u6444\u50cf\u5934\u76d1\u63a7\u6a21\u578b"},"content":{"rendered":"

\u524d\u8a00<\/strong><\/span><\/p>\n

\u968f\u7740\u89c6\u9891\u76d1\u63a7\u8054\u7f51\u7cfb\u7edf\u7684\u4e0d\u65ad\u666e\u53ca\u548c\u53d1\u5c55, \u7f51\u7edc\u6444\u50cf\u673a\u66f4\u591a\u7684\u5e94\u7528\u4e8e\u76d1\u63a7\u7cfb\u7edf\u4e2d\uff0c\u5c24\u5176\u662f\u9ad8\u6e05\u65f6\u4ee3\u7684\u6765\u4e34\uff0c\u66f4\u52a0\u5feb\u4e86\u7f51\u7edc\u6444\u50cf\u673a\u7684\u53d1\u5c55\u548c\u5e94\u7528\u3002<\/p>\n

\u5728\u76d1\u63a7\u6444\u50cf\u673a\u6570\u91cf\u7684\u4e0d\u65ad\u5e9e\u5927\u7684\u540c\u65f6\uff0c\u5728\u76d1\u63a7\u7cfb\u7edf\u4e2d\u9762\u4e34\u7740\u4e25\u5cfb\u7684\u73b0\u72b6\u95ee\u9898\uff1a\u6d77\u91cf\u89c6\u9891\u5206\u6563\u3001\u5b64\u7acb\u3001\u89c6\u89d2\u4e0d\u5b8c\u6574\u3001\u4f4d\u7f6e\u4e0d\u660e\u786e\u7b49\u95ee\u9898\uff0c\u59cb\u7ec8\u56f4\u7ed5\u7740\u4f7f\u7528\u8005\u3002\u56e0\u6b64\uff0c\u5982\u4f55\u66f4\u76f4\u89c2\u3001\u66f4\u660e\u786e\u7684\u7ba1\u7406\u6444\u50cf\u673a\u548c\u638c\u63a7\u89c6\u9891\u52a8\u6001\uff0c\u5df2\u6210\u4e3a\u63d0\u5347\u89c6\u9891\u5e94\u7528\u4ef7\u503c\u7684\u91cd\u8981\u8bdd\u9898\u3002\u6240\u4ee5\u5f53\u524d\u9879\u76ee\u6b63\u662f\u4ece\u89e3\u51b3\u6b64\u73b0\u72b6\u95ee\u9898\u7684\u89d2\u5ea6\uff0c\u5e94\u8fd0\u800c\u751f\u3002\u56f4\u7ed5\u5982\u4f55\u63d0\u9ad8\u3001\u7ba1\u7406\u548c\u6709\u6548\u5229\u7528\u524d\u7aef\u8bbe\u5907\u91c7\u96c6\u7684\u6d77\u91cf\u4fe1\u606f\u4e3a\u516c\u5171\u5b89\u5168\u670d\u52a1\uff0c\u7279\u522b\u662f\u5728\u6280\u672f\u878d\u5408\u5927\u8d8b\u52bf\u4e0b\uff0c\u5982\u4f55\u7ed3\u5408\u5f53\u524d\u5148\u8fdb\u7684\u89c6\u9891\u878d\u5408\uff0c\u865a\u5b9e\u878d\u5408\u3001\u4e09\u7ef4\u52a8\u6001\u7b49\u6280\u672f\uff0c\u5b9e\u73b0\u4e09\u7ef4\u573a\u666f\u5b9e\u65f6\u52a8\u6001\u53ef\u89c6\u5316\u76d1\u63a7\uff0c\u66f4\u6709\u6548\u7684\u8bc6\u522b\u3001\u5206\u6790\u3001\u6316\u6398\u6d77\u91cf\u6570\u636e\u7684\u6709\u6548\u4fe1\u606f\u670d\u52a1\u516c\u5171\u5e94\u7528\uff0c\u5df2\u6210\u4e3a\u89c6\u9891\u76d1\u63a7\u5e73\u53f0\u53ef\u89c6\u5316\u53d1\u5c55\u7684\u8d8b\u52bf\u548c\u65b9\u5411\u3002\u76ee\u524d\uff0c\u5728\u76d1\u63a7\u884c\u4e1a\u4e2d\uff0c\u6d77\u5eb7\u3001\u5927\u534e\u7b49\u505a\u76d1\u63a7\u884c\u4e1a\u9886\u5bfc\u8005\u53ef\u57fa\u4e8e\u8fd9\u6837\u7684\u65b9\u5f0f\u89c4\u5212\u516c\u5171\u573a\u6240\u56ed\u533a\u7b49\u7684\u6444\u50cf\u5934\u89c4\u5212\u5b89\u653e\u5e03\u5c40\uff0c\u53ef\u4ee5\u901a\u8fc7\u6d77\u5eb7\u3001\u5927\u534e\u7b49\u6444\u50cf\u5934\u54c1\u724c\u7684\u6444\u50cf\u5934\u53c2\u6570\uff0c\u8c03\u6574\u7cfb\u7edf\u4e2d\u6444\u50cf\u5934\u6a21\u578b\u7684\u53ef\u89c6\u8303\u56f4\uff0c\u76d1\u63a7\u65b9\u5411\u7b49\uff0c\u66f4\u65b9\u4fbf\u7684\u8ba9\u4eba\u4eec\u76f4\u89c2\u7684\u4e86\u89e3\u6444\u50cf\u5934\u7684\u76d1\u63a7\u533a\u57df\uff0c\u76d1\u63a7\u89d2\u5ea6\u7b49\u3002<\/p>\n

\u4ee5\u4e0b\u662f\u9879\u76ee\u5730\u5740\uff1a\u57fa\u4e8e HTML5 \u7684 WebGL \u81ea\u5b9a\u4e49 3D \u6444\u50cf\u5934\u76d1\u63a7\u6a21\u578b<\/a><\/p>\n

\u6548\u679c\u9884\u89c8<\/span><\/strong><\/p>\n

\u6574\u4f53\u573a\u666f-\u6444\u50cf\u5934\u6548\u679c\u56fe<\/strong><\/span><\/p>\n

\"ef95587d7f3d4635\"<\/a><\/p>\n

\u5c40\u90e8\u573a\u666f-\u6444\u50cf\u5934\u6548\u679c\u56fe<\/strong><\/span><\/p>\n

\"886fcc58bca826de\"<\/a><\/p>\n

\u4ee3\u7801\u751f\u6210<\/strong><\/span>
\n\u6444\u50cf\u5934\u6a21\u578b\u53ca\u573a\u666f<\/strong><\/span><\/p>\n

\u9879\u76ee\u4e2d\u4f7f\u7528\u7684\u6444\u50cf\u5934\u6a21\u578b\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\u6444\u50cf\u5934\u6a21\u578b\u3002<\/p>\n

\u9879\u76ee\u4e2d\u573a\u666f\u901a\u8fc7 HT \u7684 3d \u7f16\u8f91\u5668\u8fdb\u884c\u642d\u5efa\uff0c\u573a\u666f\u4e2d\u7684\u6a21\u578b\u6709\u4e9b\u662f\u901a\u8fc7 HT \u5efa\u6a21\uff0c\u6709\u4e9b\u901a\u8fc7 3dMax \u5efa\u6a21\uff0c\u4e4b\u540e\u5bfc\u5165 HT \u4e2d\uff0c\u573a\u666f\u4e2d\u7684\u5730\u9762\u767d\u8272\u7684\u706f\u5149\uff0c\u662f\u901a\u8fc7 HT \u7684 3d \u7f16\u8f91\u5668\u8fdb\u884c\u5730\u9762\u8d34\u56fe\u5448\u73b0\u51fa\u6765\u7684\u6548\u679c\u3002<\/p>\n

\u9525\u4f53\u5efa\u6a21<\/strong><\/span><\/p>\n

3D \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 \u91c7\u7528\u53f3\u624b\u87ba\u65cb\u5b9a\u5219\u6765\u786e\u5b9a\u4e09\u4e2a\u9876\u70b9\u6784\u9020\u4e09\u89d2\u5f62\u9762\u7684\u6b63\u9762\u3002<\/p>\n

HT \u4e2d\u901a\u8fc7 ht.Default.setShape3dModel(name, model)<\/strong> \u51fd\u6570\uff0c\u53ef\u6ce8\u518c\u81ea\u5b9a\u4e49 3D \u6a21\u578b\uff0c\u6444\u50cf\u5934\u524d\u65b9\u751f\u6210\u7684\u9525\u4f53\u4fbf\u662f\u901a\u8fc7\u8be5\u65b9\u6cd5\u751f\u6210\u3002\u53ef\u4ee5\u5c06\u8be5\u9525\u4f53\u770b\u6210\u7531 5 \u4e2a\u9876\u70b9\uff0c6 \u4e2a\u4e09\u89d2\u5f62\u7ec4\u6210\uff0c\u5177\u4f53\u56fe\u5982\u4e0b\uff1a<\/p>\n

\"2538dc126f34c2c3\"<\/a><\/p>\n

ht.Default.setShape3dModel(name, model)<\/strong><\/em><\/span><\/p>\n

1. name<\/strong> \u4e3a\u6a21\u578b\u540d\u79f0\uff0c\u5982\u679c\u540d\u79f0\u4e0e\u9884\u5b9a\u4e49\u7684\u4e00\u6837\uff0c\u5219\u4f1a\u66ff\u6362\u9884\u5b9a\u4e49\u7684\u6a21\u578b
\n2. model<\/strong> \u4e3aJSON\u7c7b\u578b\u5bf9\u8c61\uff0c\u5176\u4e2d vs<\/strong><\/em> \u8868\u793a\u9876\u70b9\u5750\u6807\u6570\u7ec4\uff0cis<\/strong><\/em> \u8868\u793a\u7d22\u5f15\u6570\u7ec4\uff0cuv<\/strong><\/em> \u8868\u793a\u8d34\u56fe\u5750\u6807\u6570\u7ec4\uff0c\u5982\u679c\u60f3\u8981\u5355\u72ec\u5b9a\u4e49\u67d0\u4e2a\u9762\uff0c\u53ef\u4ee5\u901a\u8fc7 bottom_vs\uff0cbottom_is\uff0cbottom_uv\uff0ctop_vs\uff0ctop_is\uff0c top_uv<\/strong> <\/em>\u7b49\u6765\u5b9a\u4e49\uff0c\u4e4b\u540e\u4fbf\u53ef\u4ee5\u901a\u8fc7 shape3d.top.*\uff0c shape3d.bottom.*<\/strong><\/em>\u00a0 \u7b49\u5355\u72ec\u63a7\u5236\u67d0\u4e2a\u9762<\/p>\n

\u4ee5\u4e0b\u662f\u6211\u5b9a\u4e49\u6a21\u578b\u7684\u4ee3\u7801:<\/strong><\/p>\n

\n
\/\/<\/span> camera \u662f\u5f53\u524d\u7684\u6444\u50cf\u5934\u56fe\u5143<\/span>\r\n\/\/<\/span> fovy \u4e3a\u6444\u50cf\u5934\u7684\u5f20\u89d2\u7684\u4e00\u534a\u7684 tan \u503c<\/span>\r\nvar<\/span> setRangeModel = function<\/span>(camera, fovy) {\r\n    <\/span>var<\/span> fovyVal = 0.5 * fovy;\r\n    <\/span>var<\/span> pointArr = [0, 0, 0, -fovyVal, fovyVal, 0.5, fovyVal, fovyVal, 0.5, fovyVal, -fovyVal, 0.5, -fovyVal, -fovyVal, 0.5];\r\n    ht.Default.setShape3dModel(camera.getTag(), [{\r\n        vs: pointArr,\r\n        is: [<\/span>2, 1, 0, 4, 1, 0, 4, 3, 0, 3, 2, 0],\r\n        from_vs: pointArr.slice(<\/span>3, 15),\r\n        from_is: [<\/span>3, 1, 0, 3, 2, 1],\r\n        from_uv: [<\/span>0, 0, 1, 0, 1, 1, 0, 1]\r\n    }]);\r\n}<\/span><\/pre>\n<\/div>\n
\u6211\u5c06\u5f53\u524d\u6444\u50cf\u5934\u7684 tag \u6807\u7b7e\u503c\u4f5c\u4e3a\u6a21\u578b\u7684\u540d\u79f0\uff0ctag \u6807\u7b7e\u5728 HT \u4e2d\u7528\u4e8e\u552f\u4e00\u6807\u8bc6\u4e00\u4e2a\u56fe\u5143\uff0c\u7528\u6237\u53ef\u4ee5\u81ea\u5b9a\u4e49 tag \u7684\u503c\u3002\u901a\u8fc7 pointArr \u8bb0\u5f55\u5f53\u524d\u4e94\u9762\u4f53\u7684\u4e94\u4e2a\u9876\u70b9\u5750\u6807\u4fe1\u606f\uff0c\u4ee3\u7801\u4e2d\u901a\u8fc7 from_vs, from_is, from_uv \u5355\u72ec\u6784\u5efa\u4e94\u9762\u4f53\u5e95\u9762\uff0c\u5e95\u9762\u7528\u4e8e\u663e\u793a\u5f53\u524d\u6444\u50cf\u5934\u5448\u73b0\u7684\u56fe\u50cf\u3002<\/p>\n
\u4ee3\u7801\u4e2d\u8bbe\u7f6e\u4e86\u9525\u4f53 style \u5bf9\u8c61\u7684 wf.geometry<\/strong> \u5c5e\u6027\uff0c\u901a\u8fc7\u8be5\u5c5e\u6027\u53ef\u4ee5\u4e3a\u9525\u4f53\u6dfb\u52a0\u6a21\u578b\u7684\u7ebf\u6846\uff0c\u589e\u5f3a\u6a21\u578b\u7684\u7acb\u4f53\u6548\u679c\uff0c\u5e76\u4e14\u901a\u8fc7 wf.color\uff0cwf.width<\/strong> \u7b49\u53c2\u6570\u8c03\u8282\u7ebf\u6846\u7684\u989c\u8272\uff0c\u7c97\u7ec6\u7b49\u3002<\/p>\n
\u76f8\u5173\u6a21\u578b style \u5c5e\u6027\u7684\u8bbe\u7f6e\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
\n
 1<\/span> rangeNode.s({\r\n<\/span> 2<\/span>     'shape3d': cameraName,\r\n<\/span> 3<\/span>     \/\/<\/span> \u6444\u50cf\u5934\u6a21\u578b\u540d\u79f0<\/span>\r\n 4<\/span>     'shape3d.color': 'rgba(52, 148, 252, 0.3)',\r\n<\/span> 5<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u989c\u8272<\/span>\r\n 6<\/span>     'shape3d.reverse.flip': true<\/span>,\r\n<\/span> 7<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u7684\u53cd\u9762\u662f\u5426\u663e\u793a\u6b63\u9762\u7684\u5185\u5bb9<\/span>\r\n 8<\/span>     'shape3d.light': false<\/span>,\r\n<\/span> 9<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u662f\u5426\u53d7\u5149\u7ebf\u5f71\u54cd<\/span>\r\n10<\/span>     'shape3d.transparent': true<\/span>,\r\n<\/span>11<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u662f\u5426\u900f\u660e<\/span>\r\n12<\/span>     '3d.movable': false<\/span>,\r\n<\/span>13<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u662f\u5426\u53ef\u79fb\u52a8<\/span>\r\n14<\/span>     'wf.geometry': true<\/span> \/\/<\/span> \u662f\u5426\u663e\u793a\u9525\u4f53\u6a21\u578b\u7ebf\u6846<\/span>\r\n15<\/span> });<\/pre>\n<\/div>\n
\u6444\u50cf\u5934\u56fe\u50cf\u751f\u6210\u539f\u7406<\/strong><\/span><\/p>\n
\u900f\u89c6\u6295\u5f71<\/strong><\/span><\/p>\n
\u900f\u89c6\u6295\u5f71\u662f\u4e3a\u4e86\u83b7\u5f97\u63a5\u8fd1\u771f\u5b9e\u4e09\u7ef4\u7269\u4f53\u7684\u89c6\u89c9\u6548\u679c\u800c\u5728\u4e8c\u7ef4\u7684\u7eb8\u6216\u8005\u753b\u5e03\u5e73\u9762\u4e0a\u7ed8\u56fe\u6216\u8005\u6e32\u67d3\u7684\u4e00\u79cd\u65b9\u6cd5\uff0c\u5b83\u4e5f\u79f0\u4e3a\u900f\u89c6\u56fe\u3002 \u900f\u89c6\u4f7f\u5f97\u8fdc\u7684\u5bf9\u8c61\u53d8\u5c0f\uff0c\u8fd1\u7684\u5bf9\u8c61\u53d8\u5927\uff0c\u5e73\u884c\u7ebf\u4f1a\u51fa\u73b0\u5148\u4ea4\u7b49\u66f4\u66f4\u63a5\u8fd1\u4eba\u773c\u89c2\u5bdf\u7684\u89c6\u89c9\u6548\u679c\u3002<\/p>\n
\"3DrNQNgFNYYAAAAASUVORK5CYII=\"<\/a><\/p>\n
\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u900f\u89c6\u6295\u5f71\u6700\u7ec8\u663e\u793a\u5230\u5c4f\u5e55\u4e0a\u7684\u5185\u5bb9\u53ea\u6709\u622a\u5934\u9525\u4f53( View Frustum )\u90e8\u5206\u7684\u5185\u5bb9\uff0c \u56e0\u6b64 Graph3dView \u63d0\u4f9b\u4e86 eye, center, up, far\uff0cnear\uff0cfovy \u548c aspect \u53c2\u6570\u6765\u63a7\u5236\u622a\u5934\u9525\u4f53\u7684\u5177\u4f53\u8303\u56f4\u3002\u5177\u4f53\u7684\u900f\u89c6\u6295\u5f71\u53ef\u4ee5\u53c2\u8003 HT for Web<\/strong> \u7684 3D<\/a>\u00a0\u624b\u518c\u3002<\/p>\n
\u6839\u636e\u4e0a\u56fe\u7684\u63cf\u8ff0\uff0c\u5728\u672c\u9879\u76ee\u4e2d\u53ef\u4ee5\u5728\u6444\u50cf\u5934\u521d\u59cb\u5316\u4e4b\u540e\uff0c\u7f13\u5b58\u5f53\u524d 3d \u573a\u666f eyes \u773c\u775b\u7684\u4f4d\u7f6e\uff0c\u4ee5\u53ca center \u4e2d\u5fc3\u7684\u4f4d\u7f6e\uff0c\u4e4b\u540e\u5c06 3d \u573a\u666f eyes \u773c\u775b\u548c center \u4e2d\u5fc3\u8bbe\u7f6e\u6210\u6444\u50cf\u5934\u4e2d\u5fc3\u70b9\u7684\u4f4d\u7f6e\uff0c\u7136\u540e\u5728\u8fd9\u4e2a\u65f6\u523b\u83b7\u53d6\u5f53\u524d 3d \u573a\u666f\u7684\u622a\u56fe\uff0c\u8be5\u622a\u56fe\u5373\u4e3a\u5f53\u524d\u6444\u50cf\u5934\u7684\u76d1\u63a7\u56fe\u50cf\uff0c\u4e4b\u540e\u518d\u5c06 3d \u573a\u666f\u7684 center \u4e0e eyes \u8bbe\u7f6e\u6210\u5f00\u59cb\u65f6\u7f13\u5b58\u7684 eyes \u4e0e center \u4f4d\u7f6e\uff0c\u901a\u8fc7\u8be5\u65b9\u6cd5\u5373\u53ef\u5b9e\u73b0 3d \u573a\u666f\u4e2d\u4efb\u610f\u4f4d\u7f6e\u7684\u5feb\u7167\uff0c\u4ece\u800c\u5b9e\u73b0\u6444\u50cf\u5934\u76d1\u63a7\u56fe\u50cf\u5b9e\u65f6\u751f\u6210\u3002<\/p>\n
\u76f8\u5173\u4f2a\u4ee3\u7801\u5982\u4e0b\uff1a<\/strong><\/p>\n
\n
 1<\/span> function<\/span> getFrontImg(camera, rangeNode) {\r\n<\/span> 2<\/span>     var<\/span> oldEye = g3d.getEye();\r\n<\/span> 3<\/span>     var<\/span> oldCenter = g3d.getCenter();\r\n<\/span> 4<\/span>     var<\/span> oldFovy = g3d.getFovy();\r\n<\/span> 5<\/span>     g3d.setEye(\u6444\u50cf\u5934\u4f4d\u7f6e);\r\n<\/span> 6<\/span>     g3d.setCenter(\u6444\u50cf\u5934\u671d\u5411);\r\n<\/span> 7<\/span>     g3d.setFovy(\u6444\u50cf\u5934\u5f20\u89d2);\r\n<\/span> 8<\/span>     g3d.setAspect(\u6444\u50cf\u5934\u5bbd\u9ad8\u6bd4);\r\n<\/span> 9<\/span>     g3d.validateImp();\r\n<\/span>10<\/span>     g3d.toDataURL();\r\n<\/span>11<\/span>     g3d.setEye(oldEye);;\r\n<\/span>12<\/span>     g3d.setCenter(oldCenter);\r\n<\/span>13<\/span>     g3d.setFovy(oldFovy);\r\n<\/span>14<\/span>     g3d.setAspect(undefined);\r\n<\/span>15<\/span>     g3d.validateImp();\r\n<\/span>16<\/span> }<\/pre>\n<\/div>\n
\u7ecf\u8fc7\u6d4b\u8bd5\u4e4b\u540e\uff0c\u901a\u8fc7\u8be5\u65b9\u6cd5\u8fdb\u884c\u56fe\u50cf\u7684\u83b7\u53d6\u4f1a\u5bfc\u81f4\u9875\u9762\u6709\u6240\u5361\u987f\uff0c\u56e0\u4e3a\u662f\u83b7\u53d6\u5f53\u524d 3d \u573a\u666f\u7684\u6574\u4f53\u622a\u56fe\uff0c\u7531\u4e8e\u5f53\u524d3d\u573a\u666f\u662f\u6bd4\u8f83\u5927\u7684\uff0c\u6240\u4ee5 toDataURL \u83b7\u53d6\u56fe\u50cf\u4fe1\u606f\u662f\u975e\u5e38\u6162\u7684\uff0c\u56e0\u6b64\u6211\u91c7\u53d6\u4e86\u79bb\u5c4f\u7684\u65b9\u5f0f\u6765\u83b7\u53d6\u56fe\u50cf\uff0c\u5177\u4f53\u65b9\u5f0f\u5982\u4e0b\uff1a
\n1. \u521b\u5efa\u4e00\u4e2a\u65b0\u7684 3d \u573a\u666f\uff0c\u5c06\u5f53\u524d\u573a\u666f\u7684\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u90fd\u8bbe\u7f6e\u4e3a 200px \u7684\u5927\u5c0f\uff0c\u5e76\u4e14\u5f53\u524d 3d \u573a\u666f\u7684\u5185\u5bb9\u4e0e\u4e3b\u5c4f\u7684\u573a\u666f\u662f\u4e00\u6837\u7684\uff0cHT\u4e2d\u901a\u8fc7 new ht.graph3d.Graph3dView(dataModel) \u6765\u65b0\u5efa\u573a\u666f\uff0c\u5176\u4e2d\u7684 dataModel \u4e3a\u5f53\u524d\u573a\u666f\u7684\u6240\u6709\u56fe\u5143\uff0c\u6240\u4ee5\u4e3b\u5c4f\u4e0e\u79bb\u5c4f\u7684 3d \u573a\u666f\u90fd\u5171\u7528\u540c\u4e00\u4e2a dataModel\uff0c\u4fdd\u8bc1\u4e86\u573a\u666f\u7684\u4e00\u81f4\u3002
\n2. \u5c06\u65b0\u521b\u5efa\u7684\u573a\u666f\u4f4d\u7f6e\u8bbe\u7f6e\u6210\u5c4f\u5e55\u770b\u4e0d\u5230\u7684\u5730\u65b9\uff0c\u5e76\u4e14\u6dfb\u52a0\u8fdb dom \u4e2d\u3002
\n3. \u5c06\u4e4b\u524d\u5bf9\u4e3b\u5c4f\u83b7\u53d6\u56fe\u50cf\u7684\u64cd\u4f5c\u53d8\u6210\u5bf9\u79bb\u5c4f\u83b7\u53d6\u56fe\u50cf\u7684\u64cd\u4f5c\uff0c\u6b64\u65f6\u79bb\u5c4f\u56fe\u50cf\u7684\u5927\u5c0f\u76f8\u5bf9\u4e4b\u524d\u4e3b\u5c4f\u83b7\u53d6\u56fe\u50cf\u7684\u5927\u5c0f\u5c0f\u5f88\u591a\uff0c\u5e76\u4e14\u79bb\u5c4f\u83b7\u53d6\u4e0d\u9700\u8981\u4fdd\u5b58\u539f\u6765\u7684\u773c\u775b eyes \u7684\u4f4d\u7f6e\u4ee5\u53ca center \u4e2d\u5fc3\u7684\u4f4d\u7f6e\uff0c\u56e0\u4e3a\u6211\u4eec\u6ca1\u6709\u6539\u53d8\u4e3b\u5c4f\u7684 eyes \u4e0e center \u7684\u4f4d\u7f6e\uff0c \u6240\u4ee5\u4e5f\u51cf\u5c11\u7684\u5207\u6362\u5e26\u6765\u7684\u5f00\u9500\uff0c\u5927\u5927\u63d0\u9ad8\u4e86\u6444\u50cf\u5934\u83b7\u53d6\u56fe\u50cf\u7684\u901f\u5ea6\u3002<\/p>\n
\u4ee5\u4e0b\u662f\u8be5\u65b9\u6cd5\u5b9e\u73b0\u7684\u4ee3\u7801\uff1a<\/strong><\/p>\n
\n
 1<\/span> function<\/span> getFrontImg(camera, rangeNode) {\r\n<\/span> 2<\/span>     \/\/<\/span> \u622a\u53d6\u5f53\u524d\u56fe\u50cf\u65f6\u5c06\u8be5\u6444\u50cf\u5934\u6240\u5c5e\u7684\u4e94\u9762\u4f53\u9690\u85cf<\/span>\r\n 3<\/span>     rangeNode.s('shape3d.from.visible', false<\/span>);\r\n<\/span> 4<\/span>     rangeNode.s('shape3d.visible', false<\/span>);\r\n<\/span> 5<\/span>     rangeNode.s('wf.geometry', false<\/span>);\r\n<\/span> 6<\/span>     var<\/span> cameraP3 = camera.p3();\r\n<\/span> 7<\/span>     var<\/span> cameraR3 = camera.r3();\r\n<\/span> 8<\/span>     var<\/span> cameraS3 = camera.s3();\r\n<\/span> 9<\/span>     var<\/span> updateScreen = function<\/span>() {\r\n<\/span>10<\/span>         demoUtil.Canvas2dRender(camera, outScreenG3d.getCanvas());\r\n<\/span>11<\/span>         rangeNode.s({\r\n<\/span>12<\/span>             'shape3d.from.image': camera.a('canvas')\r\n<\/span>13<\/span>         });\r\n<\/span>14<\/span>         rangeNode.s('shape3d.from.visible', true<\/span>);\r\n<\/span>15<\/span>         rangeNode.s('shape3d.visible', true<\/span>);\r\n<\/span>16<\/span>         rangeNode.s('wf.geometry', true<\/span>);\r\n<\/span>17<\/span>     };\r\n<\/span>18<\/span> \r\n19<\/span>     \/\/<\/span> \u5f53\u524d\u9525\u4f53\u8d77\u59cb\u4f4d\u7f6e<\/span>\r\n20<\/span>     var<\/span> realP3 = [cameraP3[0], cameraP3[1] + cameraS3[1] \/ 2, cameraP3[2] + cameraS3[2] \/ 2];\r\n<\/span>21<\/span>     \/\/<\/span> \u5c06\u5f53\u524d\u773c\u775b\u4f4d\u7f6e\u7ed5\u7740\u6444\u50cf\u5934\u8d77\u59cb\u4f4d\u7f6e\u65cb\u8f6c\u5f97\u5230\u6b63\u786e\u773c\u775b\u4f4d\u7f6e<\/span>\r\n22<\/span>     var<\/span> realEye = demoUtil.getCenter(cameraP3, realP3, cameraR3);\r\n<\/span>23<\/span> \r\n24<\/span>     outScreenG3d.setEye(realEye);\r\n<\/span>25<\/span>     outScreenG3d.setCenter(demoUtil.getCenter(realEye, [realEye[0], realEye[1], realEye[2] + 5], cameraR3));\r\n<\/span>26<\/span>     outScreenG3d.setFovy(camera.a('fovy'));\r\n<\/span>27<\/span>     outScreenG3d.validate();\r\n<\/span>28<\/span>     updateScreen();\r\n<\/span>29<\/span> }<\/pre>\n<\/div>\n
 <\/p>\n
\u4e0a\u9762\u4ee3\u7801\u4e2d\u6709\u4e00\u4e2a getCenter \u65b9\u6cd5\u662f\u7528\u4e8e\u83b7\u53d6 3d \u573a\u666f\u4e2d\u70b9 A \u7ed5\u7740\u70b9 B \u65cb\u8f6c angle \u89d2\u5ea6\u4e4b\u540e\u5f97\u5230\u7684\u70b9 A \u5728 3d \u573a\u666f\u4e2d\u7684\u4f4d\u7f6e\uff0c\u65b9\u6cd5\u4e2d\u91c7\u7528\u4e86 HT \u5c01\u88c5\u7684 ht.Math \u4e0b\u9762\u7684\u65b9\u6cd5\uff0c\u4ee5\u4e0b\u4e3a\u4ee3\u7801\uff1a<\/p>\n
\n
 1<\/span> \/\/<\/span> pointA \u4e3a pointB \u56f4\u7ed5\u7684\u65cb\u8f6c\u70b9<\/span>\r\n 2<\/span> \/\/<\/span> pointB \u4e3a\u9700\u8981\u65cb\u8f6c\u7684\u70b9<\/span>\r\n 3<\/span> \/\/<\/span> r3 \u4e3a\u65cb\u8f6c\u7684\u89d2\u5ea6\u6570\u7ec4 [xAngle, yAngle, zAngle] \u4e3a\u7ed5\u7740 x, y, z \u8f74\u5206\u522b\u65cb\u8f6c\u7684\u89d2\u5ea6 <\/span>\r\n 4<\/span> var<\/span> getCenter = function<\/span>(pointA, pointB, r3) {\r\n<\/span> 5<\/span>     var<\/span> mtrx = new<\/span> ht.Math.Matrix4();\r\n<\/span> 6<\/span>     var<\/span> euler = new<\/span> ht.Math.Euler();\r\n<\/span> 7<\/span>     var<\/span> v1 = new<\/span> ht.Math.Vector3();\r\n<\/span> 8<\/span>     var<\/span> v2 = new<\/span> ht.Math.Vector3();\r\n<\/span> 9<\/span> \r\n10<\/span>     mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]));\r\n<\/span>11<\/span> \r\n12<\/span>     v1.fromArray(pointB).sub(v2.fromArray(pointA));\r\n<\/span>13<\/span>     v2.copy(v1).applyMatrix4(mtrx);\r\n<\/span>14<\/span>     v2.sub(v1);\r\n<\/span>15<\/span> \r\n16<\/span>     return<\/span> [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z];\r\n<\/span>17<\/span> };<\/pre>\n<\/div>\n
\u8fd9\u91cc\u5e94\u7528\u5230\u5411\u91cf\u7684\u90e8\u5206\u77e5\u8bc6\uff0c\u5177\u4f53\u5982\u4e0b\uff1a<\/p>\n
OA + OB = OC<\/strong><\/span><\/p>\n
\"db1452ce9aaee3d8\"<\/a><\/p>\n
\u65b9\u6cd5\u5206\u4e3a\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\u6c42\u89e3\uff1a<\/p>\n
1.\u00a0 var mtrx = new ht.Math.Matrix4()<\/strong> \u521b\u5efa\u4e00\u4e2a\u8f6c\u6362\u77e9\u9635\uff0c\u901a\u8fc7 mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]))<\/strong> \u83b7\u53d6\u7ed5\u7740 r3[0]\uff0cr3[1]\uff0cr3[2] \u5373 x \u8f74\uff0cy \u8f74\uff0cz \u8f74\u65cb\u8f6c\u7684\u65cb\u8f6c\u77e9\u9635\u3002
\n2. \u901a\u8fc7 new ht.Math.Vector3()<\/strong> \u521b\u5efa v1\uff0cv2 \u4e24\u4e2a\u5411\u91cf\u3002
\n3. v1.fromArray(pointB)<\/strong> \u4e3a\u5efa\u7acb\u4e00\u4e2a\u4ece\u539f\u70b9\u5230 pointB \u7684\u4e00\u4e2a\u5411\u91cf\u3002
\n4. v2.fromArray(pointA)<\/strong> \u4e3a\u5efa\u7acb\u4e00\u4e2a\u4ece\u539f\u70b9\u5230 pointA \u7684\u4e00\u4e2a\u5411\u91cf\u3002
\n5. v1.fromArray(pointB).sub(v2.fromArray(pointA))<\/strong> \u5373\u5411\u91cf OB – OA \u6b64\u65f6\u5f97\u5230\u7684\u5411\u91cf\u4e3a AB\uff0c\u6b64\u65f6 v1 \u53d8\u4e3a\u5411\u91cf AB\u3002
\n6. v2.copy(v1)<\/strong> v2 \u5411\u91cf\u62f7\u8d1d v1 \u5411\u91cf\uff0c\u4e4b\u540e\u901a\u8fc7 v2.copy(v1).applyMatrix4(mtrx)<\/strong>\u00a0\u5bf9 v2 \u5411\u91cf\u5e94\u7528\u65cb\u8f6c\u77e9\u9635\uff0c\u53d8\u6362\u4e4b\u540e\u5373\u4e3a v1\u5411\u91cf\u7ed5\u7740 pointA \u65cb\u8f6c\u4e4b\u540e\u7684\u7684\u5411\u91cf v2\u3002
\n7. \u6b64\u65f6\u901a\u8fc7 v2.sub(v1)<\/strong> \u5c31\u83b7\u53d6\u4e86\u8d77\u59cb\u70b9\u4e3a pointB\uff0c\u7ec8\u70b9\u4e3a pointB \u65cb\u8f6c\u4e4b\u540e\u70b9\u6784\u6210\u7684\u5411\u91cf\uff0c\u8be5\u5411\u91cf\u6b64\u65f6\u5373\u4e3a v2\u3002
\n8. \u901a\u8fc7\u5411\u91cf\u516c\u5f0f\u5f97\u5230\u65cb\u8f6c\u4e4b\u540e\u7684\u70b9\u4e3a [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z]\u3002<\/p>\n
\u9879\u76ee\u4e2d\u7684 3D \u573a\u666f\u4f8b\u5b50\u5176\u5b9e\u662f Hightopo<\/a>\u00a0\u6700\u8fd1\u8d35\u5dde\u6570\u535a\u4f1a\uff0cHT \u4e0a\u5de5\u4e1a\u4e92\u8054\u7f51\u5c55\u53f0\u7684 VR \u793a\u4f8b\uff0c\u5927\u4f17\u5bf9 VR\/AR \u7684\u671f\u5f85\u5f88\u9ad8\uff0c\u4f46\u8def\u8fd8\u662f\u5f97\u4e00\u6b65\u6b65\u8d70\uff0c\u5373\u4f7f\u878d\u8d44\u4e86 23 \u4ebf\u7f8e\u91d1\u7684 Magic Leap \u7684\u7b2c\u4e00\u6b3e\u4ea7\u54c1\u4e5f\u53ea\u80fd\u662f Full of Shit<\/a>\uff0c\u8fd9\u8bdd\u9898\u4ee5\u540e\u518d\u5c55\u5f00\uff0c\u8fd9\u91cc\u5c31\u4e0a\u6bb5\u5f53\u65f6\u73b0\u573a\u7684\u89c6\u9891\u7167\u7247\uff1a<\/p>\n
 <\/p>\n
2d \u56fe\u50cf\u8d34\u5230 3d \u6a21\u578b<\/strong><\/span><\/p>\n
\u901a\u8fc7\u4e0a\u4e00\u6b65\u7684\u4ecb\u7ecd\u6211\u4eec\u53ef\u4ee5\u83b7\u53d6\u5f53\u524d\u6444\u50cf\u673a\u4f4d\u7f6e\u7684\u622a\u5c4f\u56fe\u50cf\uff0c\u90a3\u4e48\u5982\u4f55\u5c06\u5f53\u524d\u56fe\u50cf\u8d34\u5230\u524d\u9762\u6240\u6784\u5efa\u7684\u4e94\u9762\u4f53\u5e95\u90e8\u5462\uff1f\u524d\u9762\u901a\u8fc7 from_vs, from_is \u6765\u6784\u5efa\u5e95\u90e8\u7684\u957f\u65b9\u5f62\uff0c\u6240\u4ee5\u5728 HT \u4e2d\u53ef\u4ee5\u901a\u8fc7\u5c06\u4e94\u9762\u4f53\u7684 style \u4e2d shape3d.from.image \u5c5e\u6027\u8bbe\u7f6e\u6210\u5f53\u524d\u56fe\u50cf\uff0c\u5176\u4e2d from_uv \u6570\u7ec4\u7528\u6765\u5b9a\u4e49\u8d34\u56fe\u7684\u4f4d\u7f6e\uff0c\u5177\u4f53\u5982\u4e0b\u56fe\uff1a<\/p>\n
\"6aacf116614be143\"<\/a><\/p>\n
\u4ee5\u4e0b\u4e3a\u5b9a\u4e49\u8d34\u56fe\u4f4d\u7f6e from_uv \u7684\u4ee3\u7801\uff1a<\/strong><\/p>\n
\u00a0from_uv: [0, 0, 1, 0, 1, 1, 0, 1]<\/span>\u00a0<\/strong><\/p>\n
from_uv \u5c31\u662f\u5b9a\u4e49\u8d34\u56fe\u7684\u4f4d\u7f6e\u6570\u7ec4\uff0c\u6839\u636e\u4e0a\u56fe\u7684\u89e3\u91ca\uff0c\u53ef\u4ee5\u5c06 2d \u56fe\u50cf\u8d34\u5230 3d \u6a21\u578b\u7684 from \u9762\u3002<\/p>\n
\u63a7\u5236\u9762\u677f<\/strong><\/span><\/p>\n
HT \u4e2d\u901a\u8fc7 new ht.widget.Panel()<\/strong> \u6765\u751f\u6210\u5982\u4e0b\u56fe\u7684\u9762\u677f\uff1a<\/p>\n
\"2723adb3efb090d3\"<\/a><\/p>\n
\u9762\u677f\u4e2d\u6bcf\u4e2a\u6444\u50cf\u5934\u90fd\u6709\u4e00\u4e2a\u6a21\u5757\u6765\u5448\u73b0\u5f53\u524d\u76d1\u63a7\u56fe\u50cf\uff0c\u5176\u5b9e\u8fd9\u4e2a\u5730\u65b9\u4e5f\u662f\u4e00\u4e2a canvas\uff0c\u8be5 canvas \u4e0e\u573a\u666f\u4e2d\u9525\u4f53\u524d\u9762\u7684\u76d1\u63a7\u56fe\u50cf\u662f\u540c\u4e00\u4e2a canvas\uff0c\u6bcf\u4e00\u4e2a\u6444\u50cf\u5934\u90fd\u6709\u4e00\u4e2a\u81ea\u5df1\u7684 canvas \u7528\u6765\u4fdd\u5b58\u5f53\u524d\u6444\u50cf\u5934\u7684\u5b9e\u65f6\u76d1\u63a7\u753b\u9762\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u5c06\u8be5 canvas \u8d34\u5230\u4efb\u4f55\u5730\u65b9\uff0c\u5c06\u8be5 canvas \u6dfb\u52a0\u8fdb\u9762\u677f\u7684\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
formPane.addRow([{ <\/span>2<\/span> element: camera.a(‘canvas’) <\/span>3<\/span> }], 240, 240);<\/strong><\/span><\/p>\n
\u4ee3\u7801\u4e2d\u5c06 canvas \u8282\u70b9\u5b58\u50a8\u5728\u6444\u50cf\u5934\u56fe\u5143\u7684 attr \u5c5e\u6027\u4e0b\u9762\uff0c\u4e4b\u540e\u4fbf\u53ef\u4ee5\u901a\u8fc7 camera.a(‘canvas’)<\/strong> \u6765\u83b7\u53d6\u5f53\u524d\u6444\u50cf\u5934\u7684\u753b\u9762\u3002<\/p>\n
\u5728\u9762\u677f\u4e2d\u7684\u6bcf\u4e00\u4e2a\u63a7\u5236\u8282\u70b9\u90fd\u662f\u901a\u8fc7 formPane.addRow<\/strong> \u6765\u8fdb\u884c\u6dfb\u52a0\uff0c\u5177\u4f53\u53ef\u53c2\u8003 HT for Web \u7684\u8868\u5355\u624b\u518c<\/a>\u3002\u4e4b\u540e\u901a\u8fc7 ht.widget.Panel \u5c06\u8868\u5355\u9762\u677f formPane \u6dfb\u52a0\u8fdb panel \u9762\u677f\u4e2d\uff0c\u5177\u4f53\u53ef\u53c2\u8003 HT for Web \u7684\u9762\u677f\u624b\u518c<\/a>\u3002<\/p>\n
\u90e8\u5206\u63a7\u5236\u4ee3\u7801\u5982\u4e0b\uff1a<\/strong><\/p>\n
\n
 1<\/span> formPane.addRow(['rotateY', {\r\n<\/span> 2<\/span>     slider: {\r\n<\/span> 3<\/span>         min: -Math.PI,\r\n<\/span> 4<\/span>         max: Math.PI,\r\n<\/span> 5<\/span>         value: r3[1],\r\n<\/span> 6<\/span>         onValueChanged: function<\/span>() {\r\n<\/span> 7<\/span>             var<\/span> cameraR3 = camera.r3();\r\n<\/span> 8<\/span>             camera.r3([cameraR3[0], this<\/span>.getValue(), cameraR3[2]]);\r\n<\/span> 9<\/span>             rangeNode.r3([cameraR3[0], this<\/span>.getValue(), cameraR3[2]]);\r\n<\/span>10<\/span>             getFrontImg(camera, rangeNode);\r\n<\/span>11<\/span>         }\r\n<\/span>12<\/span>     }\r\n<\/span>13<\/span> }], [0.1, 0.15]);<\/pre>\n<\/div>\n
\u63a7\u5236\u9762\u677f\u901a\u8fc7 addRow<\/strong> \u6765\u6dfb\u52a0\u63a7\u5236\u5143\u7d20\uff0c\u4ee5\u4e0a\u4ee3\u7801\u4e3a\u6dfb\u52a0\u6444\u50cf\u5934\u7ed5\u7740 y \u8f74\u8fdb\u884c\u65cb\u8f6c\u7684\u63a7\u5236\uff0conValueChanged<\/strong>\u00a0\u5728 slider \u7684\u6570\u503c\u6539\u53d8\u7684\u65f6\u5019\u8c03\u7528\uff0c\u6b64\u65f6\u901a\u8fc7 camera.r3()<\/strong> \u83b7\u53d6\u5f53\u524d\u6444\u50cf\u5934\u7684\u65cb\u8f6c\u53c2\u6570\uff0c \u7531\u4e8e\u662f\u7ed5\u7740 y \u8f74\u65cb\u8f6c\u6240\u4ee5 x \u8f74\u4e0e z \u8f74\u7684\u89d2\u5ea6\u662f\u4e0d\u53d8\u7684\uff0c\u53d8\u7684\u662f y \u8f74\u7684\u65cb\u8f6c\u89d2\u5ea6\uff0c\u6240\u4ee5\u901a\u8fc7 camera.r3([cameraR3[0], this.getValue(), cameraR3[2]])<\/strong> \u6765\u8c03\u6574\u6444\u50cf\u5934\u7684\u65cb\u8f6c\u89d2\u5ea6\u4ee5\u53ca\u901a\u8fc7 rangeNode.r3([cameraR3[0], this.getValue(), cameraR3[2]])<\/strong>\u00a0\u6765\u8bbe\u7f6e\u6444\u50cf\u5934\u524d\u65b9\u9525\u4f53\u7684\u65cb\u8f6c\u89d2\u5ea6\uff0c\u7136\u540e\u8c03\u7528\u4e4b\u524d\u5c01\u88c5\u597d\u7684 getFrontImg<\/strong>\u00a0\u51fd\u6570\u6765\u83b7\u53d6\u6b64\u65f6\u65cb\u8f6c\u89d2\u5ea6\u4e0b\u9762\u7684\u5b9e\u65f6\u56fe\u50cf\u4fe1\u606f\u3002<\/p>\n
\u9879\u76ee\u4e2d\u901a\u8fc7 Panel \u9762\u677f\u7684\u914d\u7f6e\u53c2\u6570 titleBackground: rgba(230, 230, 230, 0.4)\u00a0<\/strong>\u5373\u53ef\u5c06\u6807\u9898\u80cc\u666f\u8bbe\u7f6e\u4e3a\u5177\u6709\u900f\u660e\u5ea6\u7684\u80cc\u666f\uff0c\u5176\u5b83\u7c7b\u4f3c\u7684 titleColor, titleHeight \u7b49\u6807\u9898\u53c2\u6570\u90fd\u53ef\u4ee5\u914d\u7f6e\uff0c\u901a\u8fc7 separatorColor,separatorWidth \u7b49\u5206\u5272\u53c2\u6570\u53ef\u4ee5\u8bbe\u7f6e\u5185\u90e8\u9762\u677f\u4e4b\u95f4\u5206\u5272\u7ebf\u7684\u989c\u8272\uff0c\u5bbd\u5ea6\u7b49\u3002\u6700\u540e\u9762\u677f\u901a\u8fc7 panel.setPositionRelativeTo(‘rightTop’)<\/strong> \u5c06\u9762\u677f\u7684\u4f4d\u7f6e\u8bbe\u7f6e\u6210\u53f3\u4e0a\u89d2\uff0c\u5e76\u4e14\u901a\u8fc7 document.body.appendChild(panel.getView())<\/strong> \u5c06\u9762\u677f\u6700\u5916\u5c42\u7684 div \u6dfb\u52a0\u8fdb\u9875\u9762\u4e2d\uff0c panel.getView()<\/strong> \u7528\u6765\u83b7\u53d6\u9762\u677f\u7684\u6700\u5916\u5c42 dom \u8282\u70b9\u3002<\/p>\n
\u5177\u4f53\u521d\u59cb\u5316\u9762\u677f\u4ee3\u7801\u5982\u4e0b\uff1a<\/strong><\/p>\n
\n
 1<\/span> function<\/span> initPanel() {\r\n<\/span> 2<\/span>     var<\/span> panel = new<\/span> ht.widget.Panel();\r\n<\/span> 3<\/span>     var<\/span> config = {\r\n<\/span> 4<\/span>         title: \"\u6444\u50cf\u5934\u63a7\u5236\u9762\u677f\",\r\n<\/span> 5<\/span>         titleBackground: 'rgba(230, 230, 230, 0.4)',\r\n<\/span> 6<\/span>         titleColor: 'rgb(0, 0, 0)',\r\n<\/span> 7<\/span>         titleHeight: 30,\r\n<\/span> 8<\/span>         separatorColor: 'rgb(67, 175, 241)',\r\n<\/span> 9<\/span>         separatorWidth: 1,\r\n<\/span>10<\/span>         exclusive: true<\/span>,\r\n<\/span>11<\/span>         items: []\r\n<\/span>12<\/span>     };\r\n<\/span>13<\/span>     cameraArr.forEach(function<\/span>(data, num) {\r\n<\/span>14<\/span>         var<\/span> camera = data['camera'];\r\n<\/span>15<\/span>         var<\/span> rangeNode = data['rangeNode'];\r\n<\/span>16<\/span>         var<\/span> formPane = new<\/span> ht.widget.FormPane();\r\n<\/span>17<\/span>         initFormPane(formPane, camera, rangeNode);\r\n<\/span>18<\/span>         config.items.push({\r\n<\/span>19<\/span>             title: \"\u6444\u50cf\u5934\" + (num + 1),\r\n<\/span>20<\/span>             titleBackground: 'rgba(230, 230, 230, 0.4)',\r\n<\/span>21<\/span>             titleColor: 'rgb(0, 0, 0)',\r\n<\/span>22<\/span>             titleHeight: 30,\r\n<\/span>23<\/span>             separatorColor: 'rgb(67, 175, 241)',\r\n<\/span>24<\/span>             separatorWidth: 1,\r\n<\/span>25<\/span>             content: formPane,\r\n<\/span>26<\/span>             flowLayout: true<\/span>,\r\n<\/span>27<\/span>             contentHeight: 400,\r\n<\/span>28<\/span>             width: 250,\r\n<\/span>29<\/span>             expanded: num === 0\r\n30<\/span>         });\r\n<\/span>31<\/span>     });\r\n<\/span>32<\/span>     panel.setConfig(config);\r\n<\/span>33<\/span>     panel.setPositionRelativeTo('rightTop');\r\n<\/span>34<\/span>     document.body.appendChild(panel.getView());\r\n<\/span>35<\/span>     window.addEventListener(\"resize\",\r\n<\/span>36<\/span>     function<\/span>() {\r\n<\/span>37<\/span>         panel.invalidate();\r\n<\/span>38<\/span>     });\r\n<\/span>39<\/span> }<\/pre>\n<\/div>\n
\u5728\u63a7\u5236\u9762\u677f\u4e2d\u53ef\u4ee5\u8c03\u6574\u6444\u50cf\u5934\u7684\u65b9\u5411\uff0c\u6444\u50cf\u5934\u76d1\u63a7\u7684\u8f90\u5c04\u8303\u56f4\uff0c\u6444\u50cf\u5934\u524d\u65b9\u9525\u4f53\u7684\u957f\u5ea6\u7b49\u7b49\uff0c\u5e76\u4e14\u6444\u50cf\u5934\u7684\u56fe\u50cf\u662f\u5b9e\u65f6\u751f\u6210\uff0c\u4ee5\u4e0b\u4e3a\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n
\"ef95587d7f3d4635\"<\/a><\/p>\n
\u4ee5\u4e0b\u662f\u672c\u9879\u76ee\u91c7\u7528\u7684 3D \u573a\u666f\u7ed3\u5408 VR \u6280\u672f\u5b9e\u73b0\u7684\u64cd\u4f5c\uff1a<\/p>\n
\"10f0551267fdbc4418bd4d8dce7e7195<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u8a00<\/strong><\/span><\/p>\n
\u968f\u7740\u89c6\u9891\u76d1\u63a7\u8054\u7f51\u7cfb\u7edf\u7684\u4e0d\u65ad\u666e\u53ca\u548c\u53d1\u5c55, \u7f51\u7edc\u6444\u50cf\u673a\u66f4\u591a\u7684\u5e94\u7528\u4e8e\u76d1\u63a7\u7cfb\u7edf\u4e2d\uff0c\u5c24\u5176\u662f\u9ad8\u6e05\u65f6\u4ee3\u7684\u6765\u4e34\uff0c\u66f4\u52a0\u5feb\u4e86\u7f51\u7edc\u6444\u50cf\u673a\u7684\u53d1\u5c55\u548c\u5e94\u7528\u3002<\/p>\n
\u5728\u76d1\u63a7\u6444\u50cf\u673a\u6570\u91cf\u7684\u4e0d\u65ad\u5e9e\u5927\u7684\u540c\u65f6\uff0c\u5728\u76d1\u63a7\u7cfb\u7edf\u4e2d\u9762\u4e34\u7740\u4e25\u5cfb\u7684\u73b0\u72b6\u95ee\u9898\uff1a\u6d77\u91cf\u89c6\u9891\u5206\u6563\u3001\u5b64\u7acb\u3001\u89c6\u89d2\u4e0d\u5b8c\u6574\u3001\u4f4d\u7f6e\u4e0d\u660e\u786e\u7b49\u95ee\u9898\uff0c\u59cb\u7ec8\u56f4\u7ed5\u7740\u4f7f\u7528\u8005\u3002\u56e0\u6b64\uff0c\u5982\u4f55\u66f4\u76f4\u89c2\u3001\u66f4\u660e\u786e\u7684\u7ba1\u7406\u6444\u50cf\u673a\u548c\u638c\u63a7\u89c6\u9891\u52a8\u6001\uff0c\u5df2\u6210\u4e3a\u63d0\u5347\u89c6\u9891\u5e94\u7528\u4ef7\u503c\u7684\u91cd\u8981\u8bdd\u9898\u3002\u6240\u4ee5\u5f53\u524d\u9879\u76ee\u6b63\u662f\u4ece\u89e3\u51b3\u6b64\u73b0\u72b6\u95ee\u9898\u7684\u89d2\u5ea6\uff0c\u5e94\u8fd0\u800c\u751f\u3002\u56f4\u7ed5\u5982\u4f55\u63d0\u9ad8\u3001\u7ba1\u7406\u548c\u6709\u6548\u5229\u7528\u524d\u7aef\u8bbe\u5907\u91c7\u96c6\u7684\u6d77\u91cf\u4fe1\u606f\u4e3a\u516c\u5171\u5b89\u5168\u670d\u52a1\uff0c\u7279\u522b\u662f\u5728\u6280\u672f\u878d\u5408\u5927\u8d8b\u52bf\u4e0b\uff0c\u5982\u4f55\u7ed3\u5408\u5f53\u524d\u5148\u8fdb\u7684\u89c6\u9891\u878d\u5408\uff0c\u865a\u5b9e\u878d\u5408\u3001\u4e09\u7ef4\u52a8\u6001\u7b49\u6280\u672f\uff0c\u5b9e\u73b0\u4e09\u7ef4\u573a\u666f\u5b9e\u65f6\u52a8\u6001\u53ef\u89c6\u5316\u76d1\u63a7\uff0c\u66f4\u6709\u6548\u7684\u8bc6\u522b\u3001\u5206\u6790\u3001\u6316\u6398\u6d77\u91cf\u6570\u636e\u7684\u6709\u6548\u4fe1\u606f\u670d\u52a1\u516c\u5171\u5e94\u7528\uff0c\u5df2\u6210\u4e3a\u89c6\u9891\u76d1\u63a7\u5e73\u53f0\u53ef\u89c6\u5316\u53d1\u5c55\u7684\u8d8b\u52bf\u548c\u65b9\u5411\u3002\u76ee\u524d\uff0c\u5728\u76d1\u63a7\u884c\u4e1a\u4e2d\uff0c\u6d77\u5eb7\u3001\u5927\u534e\u7b49\u505a\u76d1\u63a7\u884c\u4e1a\u9886\u5bfc\u8005\u53ef\u57fa\u4e8e\u8fd9\u6837\u7684\u65b9\u5f0f\u89c4\u5212\u516c\u5171\u573a\u6240\u56ed\u533a\u7b49\u7684\u6444\u50cf\u5934\u89c4\u5212\u5b89\u653e\u5e03\u5c40\uff0c\u53ef\u4ee5\u901a\u8fc7\u6d77\u5eb7\u3001\u5927\u534e\u7b49\u6444\u50cf\u5934\u54c1\u724c\u7684\u6444\u50cf\u5934\u53c2\u6570\uff0c\u8c03\u6574\u7cfb\u7edf\u4e2d\u6444\u50cf\u5934\u6a21\u578b\u7684\u53ef\u89c6\u8303\u56f4\uff0c\u76d1\u63a7\u65b9\u5411\u7b49\uff0c\u66f4\u65b9\u4fbf\u7684\u8ba9\u4eba\u4eec\u76f4\u89c2\u7684\u4e86\u89e3\u6444\u50cf\u5934\u7684\u76d1\u63a7\u533a\u57df\uff0c\u76d1\u63a7\u89d2\u5ea6\u7b49\u3002<\/p>\n
\u4ee5\u4e0b\u662f\u9879\u76ee\u5730\u5740\uff1a\u57fa\u4e8e HTML5 \u7684 WebGL \u81ea\u5b9a\u4e49 3D \u6444\u50cf\u5934\u76d1\u63a7\u6a21\u578b<\/a><\/p>\n
\u6548\u679c\u9884\u89c8<\/span><\/strong><\/p>\n
\u6574\u4f53\u573a\u666f-\u6444\u50cf\u5934\u6548\u679c\u56fe<\/strong><\/span><\/p>\n
\"ef95587d7f3d4635\"<\/a><\/p>\n
\u5c40\u90e8\u573a\u666f-\u6444\u50cf\u5934\u6548\u679c\u56fe<\/strong><\/span><\/p>\n
\"886fcc58bca826de\"<\/a><\/p>\n
\u4ee3\u7801\u751f\u6210<\/strong><\/span>
\n\u6444\u50cf\u5934\u6a21\u578b\u53ca\u573a\u666f<\/strong><\/span><\/p>\n
\u9879\u76ee\u4e2d\u4f7f\u7528\u7684\u6444\u50cf\u5934\u6a21\u578b\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\u6444\u50cf\u5934\u6a21\u578b\u3002<\/p>\n
\u9879\u76ee\u4e2d\u573a\u666f\u901a\u8fc7 HT \u7684 3d \u7f16\u8f91\u5668\u8fdb\u884c\u642d\u5efa\uff0c\u573a\u666f\u4e2d\u7684\u6a21\u578b\u6709\u4e9b\u662f\u901a\u8fc7 HT \u5efa\u6a21\uff0c\u6709\u4e9b\u901a\u8fc7 3dMax \u5efa\u6a21\uff0c\u4e4b\u540e\u5bfc\u5165 HT \u4e2d\uff0c\u573a\u666f\u4e2d\u7684\u5730\u9762\u767d\u8272\u7684\u706f\u5149\uff0c\u662f\u901a\u8fc7 HT \u7684 3d \u7f16\u8f91\u5668\u8fdb\u884c\u5730\u9762\u8d34\u56fe\u5448\u73b0\u51fa\u6765\u7684\u6548\u679c\u3002<\/p>\n
\u9525\u4f53\u5efa\u6a21<\/strong><\/span><\/p>\n
3D \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 \u91c7\u7528\u53f3\u624b\u87ba\u65cb\u5b9a\u5219\u6765\u786e\u5b9a\u4e09\u4e2a\u9876\u70b9\u6784\u9020\u4e09\u89d2\u5f62\u9762\u7684\u6b63\u9762\u3002<\/p>\n
HT \u4e2d\u901a\u8fc7 ht.Default.setShape3dModel(name, model)<\/strong> \u51fd\u6570\uff0c\u53ef\u6ce8\u518c\u81ea\u5b9a\u4e49 3D \u6a21\u578b\uff0c\u6444\u50cf\u5934\u524d\u65b9\u751f\u6210\u7684\u9525\u4f53\u4fbf\u662f\u901a\u8fc7\u8be5\u65b9\u6cd5\u751f\u6210\u3002\u53ef\u4ee5\u5c06\u8be5\u9525\u4f53\u770b\u6210\u7531 5 \u4e2a\u9876\u70b9\uff0c6 \u4e2a\u4e09\u89d2\u5f62\u7ec4\u6210\uff0c\u5177\u4f53\u56fe\u5982\u4e0b\uff1a<\/p>\n
\"2538dc126f34c2c3\"<\/a><\/p>\n
ht.Default.setShape3dModel(name, model)<\/strong><\/em><\/span><\/p>\n
1. name<\/strong> \u4e3a\u6a21\u578b\u540d\u79f0\uff0c\u5982\u679c\u540d\u79f0\u4e0e\u9884\u5b9a\u4e49\u7684\u4e00\u6837\uff0c\u5219\u4f1a\u66ff\u6362\u9884\u5b9a\u4e49\u7684\u6a21\u578b
\n2. model<\/strong> \u4e3aJSON\u7c7b\u578b\u5bf9\u8c61\uff0c\u5176\u4e2d vs<\/strong><\/em> \u8868\u793a\u9876\u70b9\u5750\u6807\u6570\u7ec4\uff0cis<\/strong><\/em> \u8868\u793a\u7d22\u5f15\u6570\u7ec4\uff0cuv<\/strong><\/em> \u8868\u793a\u8d34\u56fe\u5750\u6807\u6570\u7ec4\uff0c\u5982\u679c\u60f3\u8981\u5355\u72ec\u5b9a\u4e49\u67d0\u4e2a\u9762\uff0c\u53ef\u4ee5\u901a\u8fc7 bottom_vs\uff0cbottom_is\uff0cbottom_uv\uff0ctop_vs\uff0ctop_is\uff0c top_uv<\/strong> <\/em>\u7b49\u6765\u5b9a\u4e49\uff0c\u4e4b\u540e\u4fbf\u53ef\u4ee5\u901a\u8fc7 shape3d.top.*\uff0c shape3d.bottom.*<\/strong><\/em>\u00a0 \u7b49\u5355\u72ec\u63a7\u5236\u67d0\u4e2a\u9762<\/p>\n
\u4ee5\u4e0b\u662f\u6211\u5b9a\u4e49\u6a21\u578b\u7684\u4ee3\u7801:<\/strong><\/p>\n
\n
\/\/<\/span> camera \u662f\u5f53\u524d\u7684\u6444\u50cf\u5934\u56fe\u5143<\/span>\r\n\/\/<\/span> fovy \u4e3a\u6444\u50cf\u5934\u7684\u5f20\u89d2\u7684\u4e00\u534a\u7684 tan \u503c<\/span>\r\nvar<\/span> setRangeModel = function<\/span>(camera, fovy) {\r\n    <\/span>var<\/span> fovyVal = 0.5 * fovy;\r\n    <\/span>var<\/span> pointArr = [0, 0, 0, -fovyVal, fovyVal, 0.5, fovyVal, fovyVal, 0.5, fovyVal, -fovyVal, 0.5, -fovyVal, -fovyVal, 0.5];\r\n    ht.Default.setShape3dModel(camera.getTag(), [{\r\n        vs: pointArr,\r\n        is: [<\/span>2, 1, 0, 4, 1, 0, 4, 3, 0, 3, 2, 0],\r\n        from_vs: pointArr.slice(<\/span>3, 15),\r\n        from_is: [<\/span>3, 1, 0, 3, 2, 1],\r\n        from_uv: [<\/span>0, 0, 1, 0, 1, 1, 0, 1]\r\n    }]);\r\n}<\/span><\/pre>\n<\/div>\n
\u6211\u5c06\u5f53\u524d\u6444\u50cf\u5934\u7684 tag \u6807\u7b7e\u503c\u4f5c\u4e3a\u6a21\u578b\u7684\u540d\u79f0\uff0ctag \u6807\u7b7e\u5728 HT \u4e2d\u7528\u4e8e\u552f\u4e00\u6807\u8bc6\u4e00\u4e2a\u56fe\u5143\uff0c\u7528\u6237\u53ef\u4ee5\u81ea\u5b9a\u4e49 tag \u7684\u503c\u3002\u901a\u8fc7 pointArr \u8bb0\u5f55\u5f53\u524d\u4e94\u9762\u4f53\u7684\u4e94\u4e2a\u9876\u70b9\u5750\u6807\u4fe1\u606f\uff0c\u4ee3\u7801\u4e2d\u901a\u8fc7 from_vs, from_is, from_uv \u5355\u72ec\u6784\u5efa\u4e94\u9762\u4f53\u5e95\u9762\uff0c\u5e95\u9762\u7528\u4e8e\u663e\u793a\u5f53\u524d\u6444\u50cf\u5934\u5448\u73b0\u7684\u56fe\u50cf\u3002<\/p>\n
\u4ee3\u7801\u4e2d\u8bbe\u7f6e\u4e86\u9525\u4f53 style \u5bf9\u8c61\u7684 wf.geometry<\/strong> \u5c5e\u6027\uff0c\u901a\u8fc7\u8be5\u5c5e\u6027\u53ef\u4ee5\u4e3a\u9525\u4f53\u6dfb\u52a0\u6a21\u578b\u7684\u7ebf\u6846\uff0c\u589e\u5f3a\u6a21\u578b\u7684\u7acb\u4f53\u6548\u679c\uff0c\u5e76\u4e14\u901a\u8fc7 wf.color\uff0cwf.width<\/strong> \u7b49\u53c2\u6570\u8c03\u8282\u7ebf\u6846\u7684\u989c\u8272\uff0c\u7c97\u7ec6\u7b49\u3002<\/p>\n
\u76f8\u5173\u6a21\u578b style \u5c5e\u6027\u7684\u8bbe\u7f6e\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
\n
 1<\/span> rangeNode.s({\r\n<\/span> 2<\/span>     'shape3d': cameraName,\r\n<\/span> 3<\/span>     \/\/<\/span> \u6444\u50cf\u5934\u6a21\u578b\u540d\u79f0<\/span>\r\n 4<\/span>     'shape3d.color': 'rgba(52, 148, 252, 0.3)',\r\n<\/span> 5<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u989c\u8272<\/span>\r\n 6<\/span>     'shape3d.reverse.flip': true<\/span>,\r\n<\/span> 7<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u7684\u53cd\u9762\u662f\u5426\u663e\u793a\u6b63\u9762\u7684\u5185\u5bb9<\/span>\r\n 8<\/span>     'shape3d.light': false<\/span>,\r\n<\/span> 9<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u662f\u5426\u53d7\u5149\u7ebf\u5f71\u54cd<\/span>\r\n10<\/span>     'shape3d.transparent': true<\/span>,\r\n<\/span>11<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u662f\u5426\u900f\u660e<\/span>\r\n12<\/span>     '3d.movable': false<\/span>,\r\n<\/span>13<\/span>     \/\/<\/span> \u9525\u4f53\u6a21\u578b\u662f\u5426\u53ef\u79fb\u52a8<\/span>\r\n14<\/span>     'wf.geometry': true<\/span> \/\/<\/span> \u662f\u5426\u663e\u793a\u9525\u4f53\u6a21\u578b\u7ebf\u6846<\/span>\r\n15<\/span> });<\/pre>\n<\/div>\n
\u6444\u50cf\u5934\u56fe\u50cf\u751f\u6210\u539f\u7406<\/strong><\/span><\/p>\n
\u900f\u89c6\u6295\u5f71<\/strong><\/span><\/p>\n
\u900f\u89c6\u6295\u5f71\u662f\u4e3a\u4e86\u83b7\u5f97\u63a5\u8fd1\u771f\u5b9e\u4e09\u7ef4\u7269\u4f53\u7684\u89c6\u89c9\u6548\u679c\u800c\u5728\u4e8c\u7ef4\u7684\u7eb8\u6216\u8005\u753b\u5e03\u5e73\u9762\u4e0a\u7ed8\u56fe\u6216\u8005\u6e32\u67d3\u7684\u4e00\u79cd\u65b9\u6cd5\uff0c\u5b83\u4e5f\u79f0\u4e3a\u900f\u89c6\u56fe\u3002 \u900f\u89c6\u4f7f\u5f97\u8fdc\u7684\u5bf9\u8c61\u53d8\u5c0f\uff0c\u8fd1\u7684\u5bf9\u8c61\u53d8\u5927\uff0c\u5e73\u884c\u7ebf\u4f1a\u51fa\u73b0\u5148\u4ea4\u7b49\u66f4\u66f4\u63a5\u8fd1\u4eba\u773c\u89c2\u5bdf\u7684\u89c6\u89c9\u6548\u679c\u3002<\/p>\n
\"3DrNQNgFNYYAAAAASUVORK5CYII=\"<\/a><\/p>\n
\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u900f\u89c6\u6295\u5f71\u6700\u7ec8\u663e\u793a\u5230\u5c4f\u5e55\u4e0a\u7684\u5185\u5bb9\u53ea\u6709\u622a\u5934\u9525\u4f53( View Frustum )\u90e8\u5206\u7684\u5185\u5bb9\uff0c \u56e0\u6b64 Graph3dView \u63d0\u4f9b\u4e86 eye, center, up, far\uff0cnear\uff0cfovy \u548c aspect \u53c2\u6570\u6765\u63a7\u5236\u622a\u5934\u9525\u4f53\u7684\u5177\u4f53\u8303\u56f4\u3002\u5177\u4f53\u7684\u900f\u89c6\u6295\u5f71\u53ef\u4ee5\u53c2\u8003 HT for Web<\/strong> \u7684 3D<\/a>\u00a0\u624b\u518c\u3002<\/p>\n
\u6839\u636e\u4e0a\u56fe\u7684\u63cf\u8ff0\uff0c\u5728\u672c\u9879\u76ee\u4e2d\u53ef\u4ee5\u5728\u6444\u50cf\u5934\u521d\u59cb\u5316\u4e4b\u540e\uff0c\u7f13\u5b58\u5f53\u524d 3d \u573a\u666f eyes \u773c\u775b\u7684\u4f4d\u7f6e\uff0c\u4ee5\u53ca center \u4e2d\u5fc3\u7684\u4f4d\u7f6e\uff0c\u4e4b\u540e\u5c06 3d \u573a\u666f eyes \u773c\u775b\u548c center \u4e2d\u5fc3\u8bbe\u7f6e\u6210\u6444\u50cf\u5934\u4e2d\u5fc3\u70b9\u7684\u4f4d\u7f6e\uff0c\u7136\u540e\u5728\u8fd9\u4e2a\u65f6\u523b\u83b7\u53d6\u5f53\u524d 3d \u573a\u666f\u7684\u622a\u56fe\uff0c\u8be5\u622a\u56fe\u5373\u4e3a\u5f53\u524d\u6444\u50cf\u5934\u7684\u76d1\u63a7\u56fe\u50cf\uff0c\u4e4b\u540e\u518d\u5c06 3d \u573a\u666f\u7684 center \u4e0e eyes \u8bbe\u7f6e\u6210\u5f00\u59cb\u65f6\u7f13\u5b58\u7684 eyes \u4e0e center \u4f4d\u7f6e\uff0c\u901a\u8fc7\u8be5\u65b9\u6cd5\u5373\u53ef\u5b9e\u73b0 3d \u573a\u666f\u4e2d\u4efb\u610f\u4f4d\u7f6e\u7684\u5feb\u7167\uff0c\u4ece\u800c\u5b9e\u73b0\u6444\u50cf\u5934\u76d1\u63a7\u56fe\u50cf\u5b9e\u65f6\u751f\u6210\u3002<\/p>\n
\u76f8\u5173\u4f2a\u4ee3\u7801\u5982\u4e0b\uff1a<\/strong><\/p>\n
\n
 1<\/span> function<\/span> getFrontImg(camera, rangeNode) {\r\n<\/span> 2<\/span>     var<\/span> oldEye = g3d.getEye();\r\n<\/span> 3<\/span>     var<\/span> oldCenter = g3d.getCenter();\r\n<\/span> 4<\/span>     var<\/span> oldFovy = g3d.getFovy();\r\n<\/span> 5<\/span>     g3d.setEye(\u6444\u50cf\u5934\u4f4d\u7f6e);\r\n<\/span> 6<\/span>     g3d.setCenter(\u6444\u50cf\u5934\u671d\u5411);\r\n<\/span> 7<\/span>     g3d.setFovy(\u6444\u50cf\u5934\u5f20\u89d2);\r\n<\/span> 8<\/span>     g3d.setAspect(\u6444\u50cf\u5934\u5bbd\u9ad8\u6bd4);\r\n<\/span> 9<\/span>     g3d.validateImp();\r\n<\/span>10<\/span>     g3d.toDataURL();\r\n<\/span>11<\/span>     g3d.setEye(oldEye);;\r\n<\/span>12<\/span>     g3d.setCenter(oldCenter);\r\n<\/span>13<\/span>     g3d.setFovy(oldFovy);\r\n<\/span>14<\/span>     g3d.setAspect(undefined);\r\n<\/span>15<\/span>     g3d.validateImp();\r\n<\/span>16<\/span> }<\/pre>\n<\/div>\n
\u7ecf\u8fc7\u6d4b\u8bd5\u4e4b\u540e\uff0c\u901a\u8fc7\u8be5\u65b9\u6cd5\u8fdb\u884c\u56fe\u50cf\u7684\u83b7\u53d6\u4f1a\u5bfc\u81f4\u9875\u9762\u6709\u6240\u5361\u987f\uff0c\u56e0\u4e3a\u662f\u83b7\u53d6\u5f53\u524d 3d \u573a\u666f\u7684\u6574\u4f53\u622a\u56fe\uff0c\u7531\u4e8e\u5f53\u524d3d\u573a\u666f\u662f\u6bd4\u8f83\u5927\u7684\uff0c\u6240\u4ee5 toDataURL \u83b7\u53d6\u56fe\u50cf\u4fe1\u606f\u662f\u975e\u5e38\u6162\u7684\uff0c\u56e0\u6b64\u6211\u91c7\u53d6\u4e86\u79bb\u5c4f\u7684\u65b9\u5f0f\u6765\u83b7\u53d6\u56fe\u50cf\uff0c\u5177\u4f53\u65b9\u5f0f\u5982\u4e0b\uff1a
\n1. \u521b\u5efa\u4e00\u4e2a\u65b0\u7684 3d \u573a\u666f\uff0c\u5c06\u5f53\u524d\u573a\u666f\u7684\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u90fd\u8bbe\u7f6e\u4e3a 200px \u7684\u5927\u5c0f\uff0c\u5e76\u4e14\u5f53\u524d 3d \u573a\u666f\u7684\u5185\u5bb9\u4e0e\u4e3b\u5c4f\u7684\u573a\u666f\u662f\u4e00\u6837\u7684\uff0cHT\u4e2d\u901a\u8fc7 new ht.graph3d.Graph3dView(dataModel) \u6765\u65b0\u5efa\u573a\u666f\uff0c\u5176\u4e2d\u7684 dataModel \u4e3a\u5f53\u524d\u573a\u666f\u7684\u6240\u6709\u56fe\u5143\uff0c\u6240\u4ee5\u4e3b\u5c4f\u4e0e\u79bb\u5c4f\u7684 3d \u573a\u666f\u90fd\u5171\u7528\u540c\u4e00\u4e2a dataModel\uff0c\u4fdd\u8bc1\u4e86\u573a\u666f\u7684\u4e00\u81f4\u3002
\n2. \u5c06\u65b0\u521b\u5efa\u7684\u573a\u666f\u4f4d\u7f6e\u8bbe\u7f6e\u6210\u5c4f\u5e55\u770b\u4e0d\u5230\u7684\u5730\u65b9\uff0c\u5e76\u4e14\u6dfb\u52a0\u8fdb dom \u4e2d\u3002
\n3. \u5c06\u4e4b\u524d\u5bf9\u4e3b\u5c4f\u83b7\u53d6\u56fe\u50cf\u7684\u64cd\u4f5c\u53d8\u6210\u5bf9\u79bb\u5c4f\u83b7\u53d6\u56fe\u50cf\u7684\u64cd\u4f5c\uff0c\u6b64\u65f6\u79bb\u5c4f\u56fe\u50cf\u7684\u5927\u5c0f\u76f8\u5bf9\u4e4b\u524d\u4e3b\u5c4f\u83b7\u53d6\u56fe\u50cf\u7684\u5927\u5c0f\u5c0f\u5f88\u591a\uff0c\u5e76\u4e14\u79bb\u5c4f\u83b7\u53d6\u4e0d\u9700\u8981\u4fdd\u5b58\u539f\u6765\u7684\u773c\u775b eyes \u7684\u4f4d\u7f6e\u4ee5\u53ca center \u4e2d\u5fc3\u7684\u4f4d\u7f6e\uff0c\u56e0\u4e3a\u6211\u4eec\u6ca1\u6709\u6539\u53d8\u4e3b\u5c4f\u7684 eyes \u4e0e center \u7684\u4f4d\u7f6e\uff0c \u6240\u4ee5\u4e5f\u51cf\u5c11\u7684\u5207\u6362\u5e26\u6765\u7684\u5f00\u9500\uff0c\u5927\u5927\u63d0\u9ad8\u4e86\u6444\u50cf\u5934\u83b7\u53d6\u56fe\u50cf\u7684\u901f\u5ea6\u3002<\/p>\n
\u4ee5\u4e0b\u662f\u8be5\u65b9\u6cd5\u5b9e\u73b0\u7684\u4ee3\u7801\uff1a<\/strong><\/p>\n
\n
 1<\/span> function<\/span> getFrontImg(camera, rangeNode) {\r\n<\/span> 2<\/span>     \/\/<\/span> \u622a\u53d6\u5f53\u524d\u56fe\u50cf\u65f6\u5c06\u8be5\u6444\u50cf\u5934\u6240\u5c5e\u7684\u4e94\u9762\u4f53\u9690\u85cf<\/span>\r\n 3<\/span>     rangeNode.s('shape3d.from.visible', false<\/span>);\r\n<\/span> 4<\/span>     rangeNode.s('shape3d.visible', false<\/span>);\r\n<\/span> 5<\/span>     rangeNode.s('wf.geometry', false<\/span>);\r\n<\/span> 6<\/span>     var<\/span> cameraP3 = camera.p3();\r\n<\/span> 7<\/span>     var<\/span> cameraR3 = camera.r3();\r\n<\/span> 8<\/span>     var<\/span> cameraS3 = camera.s3();\r\n<\/span> 9<\/span>     var<\/span> updateScreen = function<\/span>() {\r\n<\/span>10<\/span>         demoUtil.Canvas2dRender(camera, outScreenG3d.getCanvas());\r\n<\/span>11<\/span>         rangeNode.s({\r\n<\/span>12<\/span>             'shape3d.from.image': camera.a('canvas')\r\n<\/span>13<\/span>         });\r\n<\/span>14<\/span>         rangeNode.s('shape3d.from.visible', true<\/span>);\r\n<\/span>15<\/span>         rangeNode.s('shape3d.visible', true<\/span>);\r\n<\/span>16<\/span>         rangeNode.s('wf.geometry', true<\/span>);\r\n<\/span>17<\/span>     };\r\n<\/span>18<\/span> \r\n19<\/span>     \/\/<\/span> \u5f53\u524d\u9525\u4f53\u8d77\u59cb\u4f4d\u7f6e<\/span>\r\n20<\/span>     var<\/span> realP3 = [cameraP3[0], cameraP3[1] + cameraS3[1] \/ 2, cameraP3[2] + cameraS3[2] \/ 2];\r\n<\/span>21<\/span>     \/\/<\/span> \u5c06\u5f53\u524d\u773c\u775b\u4f4d\u7f6e\u7ed5\u7740\u6444\u50cf\u5934\u8d77\u59cb\u4f4d\u7f6e\u65cb\u8f6c\u5f97\u5230\u6b63\u786e\u773c\u775b\u4f4d\u7f6e<\/span>\r\n22<\/span>     var<\/span> realEye = demoUtil.getCenter(cameraP3, realP3, cameraR3);\r\n<\/span>23<\/span> \r\n24<\/span>     outScreenG3d.setEye(realEye);\r\n<\/span>25<\/span>     outScreenG3d.setCenter(demoUtil.getCenter(realEye, [realEye[0], realEye[1], realEye[2] + 5], cameraR3));\r\n<\/span>26<\/span>     outScreenG3d.setFovy(camera.a('fovy'));\r\n<\/span>27<\/span>     outScreenG3d.validate();\r\n<\/span>28<\/span>     updateScreen();\r\n<\/span>29<\/span> }<\/pre>\n<\/div>\n
 <\/p>\n
\u4e0a\u9762\u4ee3\u7801\u4e2d\u6709\u4e00\u4e2a getCenter \u65b9\u6cd5\u662f\u7528\u4e8e\u83b7\u53d6 3d \u573a\u666f\u4e2d\u70b9 A \u7ed5\u7740\u70b9 B \u65cb\u8f6c angle \u89d2\u5ea6\u4e4b\u540e\u5f97\u5230\u7684\u70b9 A \u5728 3d \u573a\u666f\u4e2d\u7684\u4f4d\u7f6e\uff0c\u65b9\u6cd5\u4e2d\u91c7\u7528\u4e86 HT \u5c01\u88c5\u7684 ht.Math \u4e0b\u9762\u7684\u65b9\u6cd5\uff0c\u4ee5\u4e0b\u4e3a\u4ee3\u7801\uff1a<\/p>\n
\n
 1<\/span> \/\/<\/span> pointA \u4e3a pointB \u56f4\u7ed5\u7684\u65cb\u8f6c\u70b9<\/span>\r\n 2<\/span> \/\/<\/span> pointB \u4e3a\u9700\u8981\u65cb\u8f6c\u7684\u70b9<\/span>\r\n 3<\/span> \/\/<\/span> r3 \u4e3a\u65cb\u8f6c\u7684\u89d2\u5ea6\u6570\u7ec4 [xAngle, yAngle, zAngle] \u4e3a\u7ed5\u7740 x, y, z \u8f74\u5206\u522b\u65cb\u8f6c\u7684\u89d2\u5ea6 <\/span>\r\n 4<\/span> var<\/span> getCenter = function<\/span>(pointA, pointB, r3) {\r\n<\/span> 5<\/span>     var<\/span> mtrx = new<\/span> ht.Math.Matrix4();\r\n<\/span> 6<\/span>     var<\/span> euler = new<\/span> ht.Math.Euler();\r\n<\/span> 7<\/span>     var<\/span> v1 = new<\/span> ht.Math.Vector3();\r\n<\/span> 8<\/span>     var<\/span> v2 = new<\/span> ht.Math.Vector3();\r\n<\/span> 9<\/span> \r\n10<\/span>     mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]));\r\n<\/span>11<\/span> \r\n12<\/span>     v1.fromArray(pointB).sub(v2.fromArray(pointA));\r\n<\/span>13<\/span>     v2.copy(v1).applyMatrix4(mtrx);\r\n<\/span>14<\/span>     v2.sub(v1);\r\n<\/span>15<\/span> \r\n16<\/span>     return<\/span> [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z];\r\n<\/span>17<\/span> };<\/pre>\n<\/div>\n
\u8fd9\u91cc\u5e94\u7528\u5230\u5411\u91cf\u7684\u90e8\u5206\u77e5\u8bc6\uff0c\u5177\u4f53\u5982\u4e0b\uff1a<\/p>\n
OA + OB = OC<\/strong><\/span><\/p>\n
\"db1452ce9aaee3d8\"<\/a><\/p>\n
\u65b9\u6cd5\u5206\u4e3a\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\u6c42\u89e3\uff1a<\/p>\n
1.\u00a0 var mtrx = new ht.Math.Matrix4()<\/strong> \u521b\u5efa\u4e00\u4e2a\u8f6c\u6362\u77e9\u9635\uff0c\u901a\u8fc7 mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]))<\/strong> \u83b7\u53d6\u7ed5\u7740 r3[0]\uff0cr3[1]\uff0cr3[2] \u5373 x \u8f74\uff0cy \u8f74\uff0cz \u8f74\u65cb\u8f6c\u7684\u65cb\u8f6c\u77e9\u9635\u3002
\n2. \u901a\u8fc7 new ht.Math.Vector3()<\/strong> \u521b\u5efa v1\uff0cv2 \u4e24\u4e2a\u5411\u91cf\u3002
\n3. v1.fromArray(pointB)<\/strong> \u4e3a\u5efa\u7acb\u4e00\u4e2a\u4ece\u539f\u70b9\u5230 pointB \u7684\u4e00\u4e2a\u5411\u91cf\u3002
\n4. v2.fromArray(pointA)<\/strong> \u4e3a\u5efa\u7acb\u4e00\u4e2a\u4ece\u539f\u70b9\u5230 pointA \u7684\u4e00\u4e2a\u5411\u91cf\u3002
\n5. v1.fromArray(pointB).sub(v2.fromArray(pointA))<\/strong> \u5373\u5411\u91cf OB – OA \u6b64\u65f6\u5f97\u5230\u7684\u5411\u91cf\u4e3a AB\uff0c\u6b64\u65f6 v1 \u53d8\u4e3a\u5411\u91cf AB\u3002
\n6. v2.copy(v1)<\/strong> v2 \u5411\u91cf\u62f7\u8d1d v1 \u5411\u91cf\uff0c\u4e4b\u540e\u901a\u8fc7 v2.copy(v1).applyMatrix4(mtrx)<\/strong>\u00a0\u5bf9 v2 \u5411\u91cf\u5e94\u7528\u65cb\u8f6c\u77e9\u9635\uff0c\u53d8\u6362\u4e4b\u540e\u5373\u4e3a v1\u5411\u91cf\u7ed5\u7740 pointA \u65cb\u8f6c\u4e4b\u540e\u7684\u7684\u5411\u91cf v2\u3002
\n7. \u6b64\u65f6\u901a\u8fc7 v2.sub(v1)<\/strong> \u5c31\u83b7\u53d6\u4e86\u8d77\u59cb\u70b9\u4e3a pointB\uff0c\u7ec8\u70b9\u4e3a pointB \u65cb\u8f6c\u4e4b\u540e\u70b9\u6784\u6210\u7684\u5411\u91cf\uff0c\u8be5\u5411\u91cf\u6b64\u65f6\u5373\u4e3a v2\u3002
\n8. \u901a\u8fc7\u5411\u91cf\u516c\u5f0f\u5f97\u5230\u65cb\u8f6c\u4e4b\u540e\u7684\u70b9\u4e3a [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z]\u3002<\/p>\n
\u9879\u76ee\u4e2d\u7684 3D \u573a\u666f\u4f8b\u5b50\u5176\u5b9e\u662f Hightopo<\/a>\u00a0\u6700\u8fd1\u8d35\u5dde\u6570\u535a\u4f1a\uff0cHT \u4e0a\u5de5\u4e1a\u4e92\u8054\u7f51\u5c55\u53f0\u7684 VR \u793a\u4f8b\uff0c\u5927\u4f17\u5bf9 VR\/AR \u7684\u671f\u5f85\u5f88\u9ad8\uff0c\u4f46\u8def\u8fd8\u662f\u5f97\u4e00\u6b65\u6b65\u8d70\uff0c\u5373\u4f7f\u878d\u8d44\u4e86 23 \u4ebf\u7f8e\u91d1\u7684 Magic Leap \u7684\u7b2c\u4e00\u6b3e\u4ea7\u54c1\u4e5f\u53ea\u80fd\u662f Full of Shit<\/a>\uff0c\u8fd9\u8bdd\u9898\u4ee5\u540e\u518d\u5c55\u5f00\uff0c\u8fd9\u91cc\u5c31\u4e0a\u6bb5\u5f53\u65f6\u73b0\u573a\u7684\u89c6\u9891\u7167\u7247\uff1a<\/p>\n
 <\/p>\n
2d \u56fe\u50cf\u8d34\u5230 3d \u6a21\u578b<\/strong><\/span><\/p>\n
\u901a\u8fc7\u4e0a\u4e00\u6b65\u7684\u4ecb\u7ecd\u6211\u4eec\u53ef\u4ee5\u83b7\u53d6\u5f53\u524d\u6444\u50cf\u673a\u4f4d\u7f6e\u7684\u622a\u5c4f\u56fe\u50cf\uff0c\u90a3\u4e48\u5982\u4f55\u5c06\u5f53\u524d\u56fe\u50cf\u8d34\u5230\u524d\u9762\u6240\u6784\u5efa\u7684\u4e94\u9762\u4f53\u5e95\u90e8\u5462\uff1f\u524d\u9762\u901a\u8fc7 from_vs, from_is \u6765\u6784\u5efa\u5e95\u90e8\u7684\u957f\u65b9\u5f62\uff0c\u6240\u4ee5\u5728 HT \u4e2d\u53ef\u4ee5\u901a\u8fc7\u5c06\u4e94\u9762\u4f53\u7684 style \u4e2d shape3d.from.image \u5c5e\u6027\u8bbe\u7f6e\u6210\u5f53\u524d\u56fe\u50cf\uff0c\u5176\u4e2d from_uv \u6570\u7ec4\u7528\u6765\u5b9a\u4e49\u8d34\u56fe\u7684\u4f4d\u7f6e\uff0c\u5177\u4f53\u5982\u4e0b\u56fe\uff1a<\/p>\n
\"6aacf116614be143\"<\/a><\/p>\n
\u4ee5\u4e0b\u4e3a\u5b9a\u4e49\u8d34\u56fe\u4f4d\u7f6e from_uv \u7684\u4ee3\u7801\uff1a<\/strong><\/p>\n
\u00a0from_uv: [0, 0, 1, 0, 1, 1, 0, 1]<\/span>\u00a0<\/strong><\/p>\n
from_uv \u5c31\u662f\u5b9a\u4e49\u8d34\u56fe\u7684\u4f4d\u7f6e\u6570\u7ec4\uff0c\u6839\u636e\u4e0a\u56fe\u7684\u89e3\u91ca\uff0c\u53ef\u4ee5\u5c06 2d \u56fe\u50cf\u8d34\u5230 3d \u6a21\u578b\u7684 from \u9762\u3002<\/p>\n
\u63a7\u5236\u9762\u677f<\/strong><\/span><\/p>\n
HT \u4e2d\u901a\u8fc7 new ht.widget.Panel()<\/strong> \u6765\u751f\u6210\u5982\u4e0b\u56fe\u7684\u9762\u677f\uff1a<\/p>\n
\"2723adb3efb090d3\"<\/a><\/p>\n
\u9762\u677f\u4e2d\u6bcf\u4e2a\u6444\u50cf\u5934\u90fd\u6709\u4e00\u4e2a\u6a21\u5757\u6765\u5448\u73b0\u5f53\u524d\u76d1\u63a7\u56fe\u50cf\uff0c\u5176\u5b9e\u8fd9\u4e2a\u5730\u65b9\u4e5f\u662f\u4e00\u4e2a canvas\uff0c\u8be5 canvas \u4e0e\u573a\u666f\u4e2d\u9525\u4f53\u524d\u9762\u7684\u76d1\u63a7\u56fe\u50cf\u662f\u540c\u4e00\u4e2a canvas\uff0c\u6bcf\u4e00\u4e2a\u6444\u50cf\u5934\u90fd\u6709\u4e00\u4e2a\u81ea\u5df1\u7684 canvas \u7528\u6765\u4fdd\u5b58\u5f53\u524d\u6444\u50cf\u5934\u7684\u5b9e\u65f6\u76d1\u63a7\u753b\u9762\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u5c06\u8be5 canvas \u8d34\u5230\u4efb\u4f55\u5730\u65b9\uff0c\u5c06\u8be5 canvas \u6dfb\u52a0\u8fdb\u9762\u677f\u7684\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
formPane.addRow([{ <\/span>2<\/span> element: camera.a(‘canvas’) <\/span>3<\/span> }], 240, 240);<\/strong><\/span><\/p>\n
\u4ee3\u7801\u4e2d\u5c06 canvas \u8282\u70b9\u5b58\u50a8\u5728\u6444\u50cf\u5934\u56fe\u5143\u7684 attr \u5c5e\u6027\u4e0b\u9762\uff0c\u4e4b\u540e\u4fbf\u53ef\u4ee5\u901a\u8fc7 camera.a(‘canvas’)<\/strong> \u6765\u83b7\u53d6\u5f53\u524d\u6444\u50cf\u5934\u7684\u753b\u9762\u3002<\/p>\n
\u5728\u9762\u677f\u4e2d\u7684\u6bcf\u4e00\u4e2a\u63a7\u5236\u8282\u70b9\u90fd\u662f\u901a\u8fc7 formPane.addRow<\/strong> \u6765\u8fdb\u884c\u6dfb\u52a0\uff0c\u5177\u4f53\u53ef\u53c2\u8003 HT for Web \u7684\u8868\u5355\u624b\u518c<\/a>\u3002\u4e4b\u540e\u901a\u8fc7 ht.widget.Panel \u5c06\u8868\u5355\u9762\u677f formPane \u6dfb\u52a0\u8fdb panel \u9762\u677f\u4e2d\uff0c\u5177\u4f53\u53ef\u53c2\u8003 HT for Web \u7684\u9762\u677f\u624b\u518c<\/a>\u3002<\/p>\n
\u90e8\u5206\u63a7\u5236\u4ee3\u7801\u5982\u4e0b\uff1a<\/strong><\/p>\n
\n
 1<\/span> formPane.addRow(['rotateY', {\r\n<\/span> 2<\/span>     slider: {\r\n<\/span> 3<\/span>         min: -Math.PI,\r\n<\/span> 4<\/span>         max: Math.PI,\r\n<\/span> 5<\/span>         value: r3[1],\r\n<\/span> 6<\/span>         onValueChanged: function<\/span>() {\r\n<\/span> 7<\/span>             var<\/span> cameraR3 = camera.r3();\r\n<\/span> 8<\/span>             camera.r3([cameraR3[0], this<\/span>.getValue(), cameraR3[2]]);\r\n<\/span> 9<\/span>             rangeNode.r3([cameraR3[0], this<\/span>.getValue(), cameraR3[2]]);\r\n<\/span>10<\/span>             getFrontImg(camera, rangeNode);\r\n<\/span>11<\/span>         }\r\n<\/span>12<\/span>     }\r\n<\/span>13<\/span> }], [0.1, 0.15]);<\/pre>\n<\/div>\n
\u63a7\u5236\u9762\u677f\u901a\u8fc7 addRow<\/strong> \u6765\u6dfb\u52a0\u63a7\u5236\u5143\u7d20\uff0c\u4ee5\u4e0a\u4ee3\u7801\u4e3a\u6dfb\u52a0\u6444\u50cf\u5934\u7ed5\u7740 y \u8f74\u8fdb\u884c\u65cb\u8f6c\u7684\u63a7\u5236\uff0conValueChanged<\/strong>\u00a0\u5728 slider \u7684\u6570\u503c\u6539\u53d8\u7684\u65f6\u5019\u8c03\u7528\uff0c\u6b64\u65f6\u901a\u8fc7 camera.r3()<\/strong> \u83b7\u53d6\u5f53\u524d\u6444\u50cf\u5934\u7684\u65cb\u8f6c\u53c2\u6570\uff0c \u7531\u4e8e\u662f\u7ed5\u7740 y \u8f74\u65cb\u8f6c\u6240\u4ee5 x \u8f74\u4e0e z \u8f74\u7684\u89d2\u5ea6\u662f\u4e0d\u53d8\u7684\uff0c\u53d8\u7684\u662f y \u8f74\u7684\u65cb\u8f6c\u89d2\u5ea6\uff0c\u6240\u4ee5\u901a\u8fc7 camera.r3([cameraR3[0], this.getValue(), cameraR3[2]])<\/strong> \u6765\u8c03\u6574\u6444\u50cf\u5934\u7684\u65cb\u8f6c\u89d2\u5ea6\u4ee5\u53ca\u901a\u8fc7 rangeNode.r3([cameraR3[0], this.getValue(), cameraR3[2]])<\/strong>\u00a0\u6765\u8bbe\u7f6e\u6444\u50cf\u5934\u524d\u65b9\u9525\u4f53\u7684\u65cb\u8f6c\u89d2\u5ea6\uff0c\u7136\u540e\u8c03\u7528\u4e4b\u524d\u5c01\u88c5\u597d\u7684 getFrontImg<\/strong>\u00a0\u51fd\u6570\u6765\u83b7\u53d6\u6b64\u65f6\u65cb\u8f6c\u89d2\u5ea6\u4e0b\u9762\u7684\u5b9e\u65f6\u56fe\u50cf\u4fe1\u606f\u3002<\/p>\n
\u9879\u76ee\u4e2d\u901a\u8fc7 Panel \u9762\u677f\u7684\u914d\u7f6e\u53c2\u6570 titleBackground: rgba(230, 230, 230, 0.4)\u00a0<\/strong>\u5373\u53ef\u5c06\u6807\u9898\u80cc\u666f\u8bbe\u7f6e\u4e3a\u5177\u6709\u900f\u660e\u5ea6\u7684\u80cc\u666f\uff0c\u5176\u5b83\u7c7b\u4f3c\u7684 titleColor, titleHeight \u7b49\u6807\u9898\u53c2\u6570\u90fd\u53ef\u4ee5\u914d\u7f6e\uff0c\u901a\u8fc7 separatorColor,separatorWidth \u7b49\u5206\u5272\u53c2\u6570\u53ef\u4ee5\u8bbe\u7f6e\u5185\u90e8\u9762\u677f\u4e4b\u95f4\u5206\u5272\u7ebf\u7684\u989c\u8272\uff0c\u5bbd\u5ea6\u7b49\u3002\u6700\u540e\u9762\u677f\u901a\u8fc7 panel.setPositionRelativeTo(‘rightTop’)<\/strong> \u5c06\u9762\u677f\u7684\u4f4d\u7f6e\u8bbe\u7f6e\u6210\u53f3\u4e0a\u89d2\uff0c\u5e76\u4e14\u901a\u8fc7 document.body.appendChild(panel.getView())<\/strong> \u5c06\u9762\u677f\u6700\u5916\u5c42\u7684 div \u6dfb\u52a0\u8fdb\u9875\u9762\u4e2d\uff0c panel.getView()<\/strong> \u7528\u6765\u83b7\u53d6\u9762\u677f\u7684\u6700\u5916\u5c42 dom \u8282\u70b9\u3002<\/p>\n
\u5177\u4f53\u521d\u59cb\u5316\u9762\u677f\u4ee3\u7801\u5982\u4e0b\uff1a<\/strong><\/p>\n
\n
 1<\/span> function<\/span> initPanel() {\r\n<\/span> 2<\/span>     var<\/span> panel = new<\/span> ht.widget.Panel();\r\n<\/span> 3<\/span>     var<\/span> config = {\r\n<\/span> 4<\/span>         title: \"\u6444\u50cf\u5934\u63a7\u5236\u9762\u677f\",\r\n<\/span> 5<\/span>         titleBackground: 'rgba(230, 230, 230, 0.4)',\r\n<\/span> 6<\/span>         titleColor: 'rgb(0, 0, 0)',\r\n<\/span> 7<\/span>         titleHeight: 30,\r\n<\/span> 8<\/span>         separatorColor: 'rgb(67, 175, 241)',\r\n<\/span> 9<\/span>         separatorWidth: 1,\r\n<\/span>10<\/span>         exclusive: true<\/span>,\r\n<\/span>11<\/span>         items: []\r\n<\/span>12<\/span>     };\r\n<\/span>13<\/span>     cameraArr.forEach(function<\/span>(data, num) {\r\n<\/span>14<\/span>         var<\/span> camera = data['camera'];\r\n<\/span>15<\/span>         var<\/span> rangeNode = data['rangeNode'];\r\n<\/span>16<\/span>         var<\/span> formPane = new<\/span> ht.widget.FormPane();\r\n<\/span>17<\/span>         initFormPane(formPane, camera, rangeNode);\r\n<\/span>18<\/span>         config.items.push({\r\n<\/span>19<\/span>             title: \"\u6444\u50cf\u5934\" + (num + 1),\r\n<\/span>20<\/span>             titleBackground: 'rgba(230, 230, 230, 0.4)',\r\n<\/span>21<\/span>             titleColor: 'rgb(0, 0, 0)',\r\n<\/span>22<\/span>             titleHeight: 30,\r\n<\/span>23<\/span>             separatorColor: 'rgb(67, 175, 241)',\r\n<\/span>24<\/span>             separatorWidth: 1,\r\n<\/span>25<\/span>             content: formPane,\r\n<\/span>26<\/span>             flowLayout: true<\/span>,\r\n<\/span>27<\/span>             contentHeight: 400,\r\n<\/span>28<\/span>             width: 250,\r\n<\/span>29<\/span>             expanded: num === 0\r\n30<\/span>         });\r\n<\/span>31<\/span>     });\r\n<\/span>32<\/span>     panel.setConfig(config);\r\n<\/span>33<\/span>     panel.setPositionRelativeTo('rightTop');\r\n<\/span>34<\/span>     document.body.appendChild(panel.getView());\r\n<\/span>35<\/span>     window.addEventListener(\"resize\",\r\n<\/span>36<\/span>     function<\/span>() {\r\n<\/span>37<\/span>         panel.invalidate();\r\n<\/span>38<\/span>     });\r\n<\/span>39<\/span> }<\/pre>\n<\/div>\n
\u5728\u63a7\u5236\u9762\u677f\u4e2d\u53ef\u4ee5\u8c03\u6574\u6444\u50cf\u5934\u7684\u65b9\u5411\uff0c\u6444\u50cf\u5934\u76d1\u63a7\u7684\u8f90\u5c04\u8303\u56f4\uff0c\u6444\u50cf\u5934\u524d\u65b9\u9525\u4f53\u7684\u957f\u5ea6\u7b49\u7b49\uff0c\u5e76\u4e14\u6444\u50cf\u5934\u7684\u56fe\u50cf\u662f\u5b9e\u65f6\u751f\u6210\uff0c\u4ee5\u4e0b\u4e3a\u8fd0\u884c\u622a\u56fe\uff1a<\/p>\n
\"ef95587d7f3d4635\"<\/a><\/p>\n
\u4ee5\u4e0b\u662f\u672c\u9879\u76ee\u91c7\u7528\u7684 3D \u573a\u666f\u7ed3\u5408 VR \u6280\u672f\u5b9e\u73b0\u7684\u64cd\u4f5c\uff1a<\/p>\n
\"10f0551267fdbc4418bd4d8dce7e7195<\/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\/600"}],"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=600"}],"version-history":[{"count":12,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/600\/revisions"}],"predecessor-version":[{"id":626,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/600\/revisions\/626"}],"wp:attachment":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media?parent=600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/categories?post=600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/tags?post=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}