{"id":4758,"date":"2024-09-24T17:52:54","date_gmt":"2024-09-24T09:52:54","guid":{"rendered":"https:\/\/www.hightopo.com\/blog\/?p=4758"},"modified":"2024-11-26T19:15:55","modified_gmt":"2024-11-26T11:15:55","slug":"%e5%9f%ba%e4%ba%8e%e5%9b%be%e6%89%91-ht-for-web-%e5%ae%9e%e7%8e%b0%e7%9a%84%e6%98%bc%e5%a4%9c%e5%88%87%e6%8d%a2%e5%9c%ba%e6%99%af%e5%ba%94%e7%94%a8","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/4758.html","title":{"rendered":"\u57fa\u4e8e\u56fe\u6251 HT for Web \u5b9e\u73b0\u7684\u663c\u591c\u5207\u6362\u573a\u666f\u5e94\u7528"},"content":{"rendered":"\n

\u56fe\u6251\u8f6f\u4ef6 HT \u7684\u6848\u4f8b\u4e2d\u6709\u8bb8\u591a\u767d\u5929\u9ed1\u591c\u6548\u679c\u3002\u8fd9\u79cd\u6548\u679c\u5728\u5404\u7c7b\u4e0d\u540c\u7684\u9879\u76ee\u4e2d\u5f97\u5230\u4e86\u5e7f\u6cdb\u7684\u5e94\u7528\u548c\u8ba4\u53ef\u3002<\/p>\n\n\n\n

\u767d\u5929\u9ed1\u591c\u6548\u679c\u662f\u89c6\u89c9\u8bbe\u8ba1\u548c\u4ea4\u4e92\u8bbe\u8ba1\u4e2d\u5e38\u89c1\u7684\u4e00\u79cd\u624b\u6cd5\u3002\u901a\u8fc7\u7ec6\u81f4\u5de7\u5999\u5730\u8c03\u6574\u8272\u5f69\u3001\u4eae\u5ea6\u3001\u5bf9\u6bd4\u5ea6\u7b49\u89c6\u89c9\u53c2\u6570\uff0c<\/strong>\u5373\u53ef\u6210\u529f\u6a21\u62df\u51fa\u573a\u666f\u4ece\u767d\u5929\u9010\u6e10\u8fc7\u6e21\u5230\u9ed1\u591c\u7684\u53d8\u5316\u3002\u4e0d\u4ec5\u80fd\u663e\u8457\u589e\u5f3a\u7528\u6237\u7684\u89c6\u89c9\u4f53\u9a8c\uff0c\u63d0\u9ad8\u8bbe\u8ba1\u7684\u5438\u5f15\u529b\u548c\u7f8e\u611f\uff0c\u8fd8\u80fd\u8d4b\u4e88\u7a7a\u95f4\u6216\u754c\u9762\u4e00\u79cd\u52a8\u611f\u548c\u751f\u547d\u529b\uff0c\u4f7f\u6574\u4e2a\u5e94\u7528\u6216\u7f51\u7ad9\u5448\u73b0\u51fa\u66f4\u52a0\u751f\u52a8\u548c\u5bcc\u6709\u5c42\u6b21\u611f\u7684\u8868\u73b0\u3002<\/p>\n\n\n\n

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

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

\u5207\u6362\u767d\u5929\u4e0e\u9ed1\u591c\u7684\u65b9\u6848\u4e3b\u8981\u6709 2 \u79cd\uff1a<\/strong><\/p>\n\n\n\n

  1. \u5206\u522b\u505a\u597d\u767d\u5929\u548c\u9ed1\u591c\u7684\u573a\u666f\uff0c\u5e76\u5728\u9700\u8981\u65f6\u8fdb\u884c\u5207\u6362\uff1b<\/li>
  2. \u5728\u540c\u4e00\u573a\u666f\u4e2d\uff0c\u901a\u8fc7\u8c03\u6574\u9634\u5f71\u3001\u706f\u5149\u3001\u5929\u7a7a\u7403\u7b49\u5143\u7d20\uff0c\u6765\u5b9e\u73b0\u767d\u5929\u4e0e\u9ed1\u591c\u7684\u8fc7\u6e21\u3002<\/li><\/ol>\n\n\n\n

    \u72ec\u7acb\u642d\u5efa\u663c\u591c\u573a\u666f\u518d\u5207\u6362<\/h2>\n\n\n\n

    \u5206\u522b\u505a\u597d\u767d\u5929\u548c\u9ed1\u591c\u7684\u573a\u666f\u518d\u8fdb\u884c\u5207\u6362\uff0c\u901a\u5e38\u9002\u7528\u4e8e\u9700\u8981\u7cbe\u7ec6\u64cd\u4f5c\u53ca\u63a7\u5236\u7684\u573a\u5408\u3002<\/strong>\u4f8b\u5982\u4e3a\u4e86\u786e\u4fdd\u6bcf\u4e2a\u65f6\u95f4\u6bb5\u7684\u5149\u5f71\u6548\u548c\u73af\u5883\u7ec6\u8282\u90fd\u8fbe\u5230\u4f18\u8d28\u72b6\u6001\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u5206\u522b\u9488\u5bf9\u767d\u5929\u548c\u9ed1\u591c\u8bbe\u8ba1\u4e0d\u540c\u7684\u573a\u666f\u3002\u5c3d\u7ba1\u8fd9\u79cd\u65b9\u5f0f\u8f83\u4e3a\u8017\u65f6\uff0c\u4f46\u5b83\u80fd\u63d0\u4f9b\u66f4\u7cbe\u7ec6\u548c\u4e2a\u6027\u5316\u7684\u89c6\u89c9\u6548\u679c\u3002<\/strong>\u5728\u5b9e\u9645\u5207\u6362\u8fc7\u7a0b\u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7\u6de1\u5165\u6de1\u51fa\u6216\u77ac\u95f4\u8f6c\u6362<\/strong>\u7b49\u65b9\u5f0f\uff0c\u8425\u9020\u51fa\u66f4\u4e3a\u903c\u771f\u7684\u65f6\u95f4\u53d8\u5316\u4f53\u9a8c\u3002<\/p>\n\n\n\n

    \u4ee5\u4e0b\u6848\u4f8b\u5c55\u793a\u4e86\u901a\u8fc7\u666f\u6df1\u6de1\u5165\u6de1\u51fa\u7684\u65b9\u5f0f\uff0c\u5b9e\u73b0\u767d\u5929\u4e0e\u9ed1\u591c\u8fc7\u6e21\u5207\u6362\u7684\u6548\u679c\u3002<\/p>\n\n\n\n

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

    \u5c01\u88c5\u5207\u6362\u573a\u666f\u65b9\u6cd5\u5982\u4e0b\uff1a<\/p>\n\n\n\n

    function switchScene(json,callBack){\n    g3d.dm().clear();\n    g3d.deserialze(json,callBack)\n}<\/code><\/pre>\n\n\n\n
    \u8bbe\u7f6e\u4e00\u5f20\u4e0d\u900f\u660e\u666f\u6df1\u8d34\u56fe\uff0c\u5c06\u666f\u6df1 aperture \u5b54\u5f84\u8bbe\u7f6e\u4e3a 0\uff0c\u505a\u666f\u6df1\u8fc7\u5ea6\u52a8\u753b\uff1a<\/p>\n\n\n\n
    function sceneDofTransitions(isToDeep, callBack){\n    g3d.enablePostProcessing(\"Dof\", true); \n    var module =  g3d.getPostProcessingModule('Dof');\n    module.image = '\u4e0d\u900f\u660e\u666f\u6df1.png';\n\n\n    var toAperture = isToDeep ? 1 : 0;\n    var range = toAperture - (module .aperture),\n        beginAperture = module .aperture ;\n\n\n    ht.Default.startAnim({\n        duration:  1e3,\n        easing(t) {return t},\n        action(v, t) {\n             module.aperture = beginAperture + (range * v)\n             g3d.iv();\n        },\n        finishFunc() {\n              callBack && callBack();\n        }\n    })\n}<\/code><\/pre>\n\n\n\n
    \u5728\u5207\u6362\u573a\u666f\u4e4b\u524d\uff0c\u5148\u8c03\u7528\u666f\u6df1\u52a8\u753b\uff0c\u5c06\u666f\u6df1\u8c03\u6574\u5230\u6700\u4e0d\u900f\u660e\u7684\u72b6\u6001\u3002\u5728\u52a8\u753b\u56de\u8c03\u540e\uff0c\u518d\u8fdb\u884c\u573a\u666f\u5207\u6362\u3002\u5207\u6362\u5b8c\u6210\u540e\uff0c\u518d\u5c06\u666f\u6df1\u8c03\u6574\u4e3a\u6700\u900f\u660e\u72b6\u6001\u3002<\/p>\n\n\n\n
    sceneDofTransitions(true, function() {\n    switchScene(json,function(json, dm, view, datas) {\n         sceneDofTransitions(false)\n  })\n})<\/code><\/pre>\n\n\n\n
    \u5728\u4f7f\u7528\u6b64\u65b9\u6848\u65f6\u9700\u8981\u6ce8\u610f\uff0c\u5982\u679c\u573a\u666f\u672c\u8eab\u5df2\u7ecf\u5177\u6709\u666f\u6df1\u6548\u679c\uff0c\u8bf7\u5728\u8c03\u7528\u52a8\u753b\u524d\u8bb0\u5f55\u539f\u6709\u7684\u666f\u6df1\u4fe1\u606f\uff0c\u5e76\u5728\u52a8\u753b\u7ed3\u675f\u540e\u5c06\u5176\u6062\u590d\u3002<\/p>\n\n\n\n
    \u8c03\u6574\u89c6\u89c9\u5143\u7d20\u5b9e\u73b0\u663c\u591c\u5207\u6362<\/h2>\n\n\n\n
    \u901a\u8fc7\u7efc\u5408\u8c03\u6574\u706f\u5149\u3001\u9634\u5f71\u548c\u5929\u7a7a\u7403\uff0c\u53ef\u4ee5\u6a21\u62df\u5149\u5f71\u7684\u53d8\u5316\uff0c<\/strong>\u5b9e\u73b0\u767d\u5929\u5230\u591c\u665a\u7684\u81ea\u7136\u8fc7\u6e21\uff0c\u4f7f\u6574\u4e2a\u573a\u666f\u66f4\u52a0\u751f\u52a8\u903c\u771f\u3002\u901a\u8fc7\u7cbe\u7ec6\u8c03\u63a7\u8fd9\u4e9b\u5143\u7d20\uff0c\u80fd\u591f\u4f7f\u5f97\u865a\u62df\u573a\u666f\u66f4\u52a0\u771f\u5b9e\uff0c\u5f15\u4eba\u5165\u80dc\u3002<\/p>\n\n\n\n
    \u706f\u5149<\/strong><\/p>\n\n\n\n
    \u5728\u573a\u666f\u4e2d\uff0c\u9ed8\u8ba4\u5b58\u5728\u4e00\u4e2a\u5934\u706f\u3002\u5728\u5b9e\u73b0\u767d\u5929\u548c\u9ed1\u591c\u7684\u8fc7\u6e21\u8fc7\u7a0b\u4e2d\uff0c\u9996\u5148\u9700\u8981\u8c03\u6574\u706f\u5149\u7684\u5f3a\u5ea6\u548c\u989c\u8272\u3002<\/strong>\u767d\u5929\u7684\u706f\u5149\u901a\u5e38\u8f83\u4e3a\u660e\u4eae\uff0c\u5e76\u5448\u73b0\u6e29\u6696\u7684\u9ec4\u8272\u6216\u767d\u8272\uff0c\u4ee5\u6a21\u62df\u592a\u9633\u5149\u7684\u6548\u679c\u3002\u5230\u4e86\u591c\u665a\uff0c\u706f\u5149\u7684\u5f3a\u5ea6\u5e94\u5f53\u51cf\u5f31\uff0c\u5e76\u8f6c\u4e3a\u51b7\u8272\u8c03\u7684\u84dd\u8272\u6216\u7d2b\u8272\uff0c\u4ee5\u6a21\u62df\u6708\u5149\u548c\u661f\u5149\u7684\u6548\u679c\u3002<\/p>\n\n\n\n
    g3d.setHeadlightDisabled(false);\/\/\u5f00\u542f\u5934\u706f\ng3d.setHeadlightColor(color);\/\/\u8bbe\u7f6e\u5934\u706f\u989c\u8272\ng3d.setHeadlightIntensity(intensity);\/\/\u5934\u706f\u5f3a\u5ea6<\/code><\/pre>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    \u9634\u5f71<\/strong><\/p>\n\n\n\n
    \u9634\u5f71\u7684\u8868\u73b0\u5f62\u5f0f\u4e5f\u81f3\u5173\u91cd\u8981\u3002<\/strong>\u767d\u5929\u7684\u9634\u5f71\u8f83\u4e3a\u6e05\u6670\u4e14\u9510\u5229\uff0c\u80fd\u591f\u5f88\u597d\u5730\u8868\u73b0\u51fa\u7269\u4f53\u7684\u7acb\u4f53\u611f\u3002\u800c\u591c\u665a\u7684\u9634\u5f71\u5219\u5e94\u66f4\u52a0\u67d4\u548c\u548c\u6a21\u7cca\uff0c\u4ee5\u6a21\u62df\u591c\u95f4\u7684\u6d45\u6d45\u5149\u7167\u548c\u6697\u6de1\u73af\u5883\u3002\u901a\u8fc7\u8c03\u8282\u9634\u5f71\u7684\u6e05\u6670\u5ea6\u548c\u8f6f\u5316\u7a0b\u5ea6\uff0c<\/strong>\u53ef\u4ee5\u5b9e\u73b0\u573a\u666f\u5728\u767d\u5929\u548c\u591c\u665a\u4e4b\u95f4\u7684\u81ea\u7136\u8fc7\u6e21\u3002<\/p>\n\n\n\n
    g3d.enableShadow();\/\/\u5f00\u542f\u9634\u5f71\ng3d.setShadowIntensity(intensity);\/\/\u9634\u5f71\u5f3a\u5ea6\u503c\ng3d.setShadowRadius(radius);\/\/ \u9634\u5f71\u67d4\u5316\u534a\u5f84\ng3d.setShadowDegreeX(degreeX);\/\/\u9634\u5f71\u5728X\u8f74\u65b9\u5411\u4e0a\u7684\u89d2\u5ea6\ng3d.setShadowDegreeZ(degreeZ);\/\/\u9634\u5f71\u5728Z\u8f74\u65b9\u5411\u4e0a\u7684\u89d2\u5ea6<\/code><\/pre>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    \u5929\u7a7a\u7403<\/strong><\/p>\n\n\n\n
    \u9664\u4e86\u4e0a\u8ff0\u4e24\u4e2a\u8981\u7d20\u4e4b\u5916\uff0c\u5929\u7a7a\u7403\u7684\u8272\u5f69\u548c\u7eb9\u7406\u662f\u6a21\u62df\u663c\u591c\u53d8\u5316\u7684\u5173\u952e\u8981\u7d20\u3002<\/strong>\u767d\u5929\u7684\u5929\u7a7a\u7403\u901a\u5e38\u5448\u73b0\u660e\u4eae\u7684\u84dd\u8272\uff0c\u5e76\u5e26\u6709\u52a8\u6001\u7684\u4e91\u6735\uff0c\u6548\u679c\u751f\u52a8\u4e14\u5bcc\u6709\u5c42\u6b21\u611f\u3002\u591c\u665a\u7684\u5929\u7a7a\u7403\u5219\u53d8\u4e3a\u6df1\u9083\u7684\u9ed1\u8272\u6216\u6df1\u84dd\u8272\uff0c\u4e0a\u9762\u70b9\u7f00\u7740\u95ea\u70c1\u7684\u661f\u5149\uff0c\u8fdb\u800c\u8425\u9020\u51fa\u795e\u79d8\u800c\u5b81\u9759\u7684\u591c\u665a\u6c1b\u56f4\u3002<\/p>\n\n\n\n
    var sky = new ht.Node();\nsky.s({\n  'shape3d': 'sphere',\n  'shape3d.image': '\u5929\u7a7a\u7403\u8d34\u56fe.jpg',\n  'shape3d.reverse.flip': true\n});\ng3d.setSkyBox(sky);<\/code><\/pre>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    \u901a\u8fc7\u7ed3\u5408\u4e0a\u8ff0\u5143\u7d20\uff0c<\/strong>\u53ef\u4ee5\u5b9e\u73b0\u767d\u5929\u5230\u591c\u665a\u7684\u81ea\u7136\u8fc7\u6e21\u3002\u5728\u8fdb\u884c\u8fd9\u4e9b\u8c03\u6574\u65f6\uff0c\u53ef\u4ee5\u5229\u7528\u52a8\u753b\u6765\u4fee\u6539\u6570\u503c\uff0c<\/strong>\u4ece\u800c\u5e73\u6ed1\u5c55\u793a\u767d\u5929\u5230\u591c\u665a\u7684\u53d8\u5316\u8fc7\u7a0b\uff0c\u63d0\u5347\u7528\u6237\u7684\u6c89\u6d78\u4f53\u9a8c\u3002<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    \u603b\u7ed3<\/h1>\n\n\n\n
    \u901a\u8fc7\u767d\u5929\u9ed1\u591c\u6548\u679c\uff0c\u4f7f\u7528\u6237\u5728\u4e0d\u540c\u65f6\u95f4\u6bb5\u90fd\u80fd\u4f53\u9a8c\u5230\u72ec\u7279\u7684\u573a\u666f\u53d8\u5316\uff0c\u5927\u5e45\u63d0\u5347\u4ea4\u4e92\u4f53\u9a8c\u548c\u7528\u6237\u53c2\u4e0e\u5ea6\u3002<\/strong>\u6b64\u5916\uff0c\u5408\u7406\u8fd0\u7528\u767d\u5929\u9ed1\u591c\u6548\u679c\u8fd8\u80fd\u589e\u5f3a\u573a\u666f\u7684\u6c89\u6d78\u611f\uff0c<\/strong>\u4f7f\u7528\u6237\u5728\u4f7f\u7528\u8fc7\u7a0b\u4e2d\u611f\u53d7\u5230\u65f6\u5149\u6d41\u8f6c\u7684\u81ea\u7136\u53d8\u5316\uff0c\u8fdb\u4e00\u6b65\u62c9\u8fd1\u865a\u62df\u4e16\u754c\u4e0e\u73b0\u5b9e\u4e16\u754c\u7684\u8ddd\u79bb\u3002<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    \u200b\u60a8\u53ef\u4ee5\u81f3\u56fe\u6251\u8f6f\u4ef6\u5b98\u7f51\u67e5\u770b\u66f4\u591a\u6848\u4f8b\u53ca\u6548\u679c\uff1a<\/p>\n\n\n\n
    \u56fe\u6251\u8f6f\u4ef6 – \u6784\u5efa\u5148\u8fdb 2D \u548c 3D \u53ef\u89c6\u5316\u6240\u9700\u8981\u7684\u4e00\u5207<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    <\/p>\n
    \u56fe\u6251\u8f6f\u4ef6 HT \u7684\u6848\u4f8b\u4e2d\u6709\u8bb8\u591a\u767d\u5929\u9ed1\u591c\u6548\u679c\u3002\u8fd9\u79cd\u6548\u679c\u5728\u5404\u7c7b\u4e0d\u540c\u7684\u9879\u76ee\u4e2d\u5f97\u5230\u4e86\u5e7f\u6cdb\u7684\u5e94\u7528\u548c\u8ba4\u53ef\u3002<\/p>\n
    <\/p>\n
    <\/p>\n
    \u767d\u5929\u9ed1\u591c\u6548\u679c\u662f\u89c6\u89c9\u8bbe\u8ba1\u548c\u4ea4\u4e92\u8bbe\u8ba1\u4e2d\u5e38\u89c1\u7684\u4e00\u79cd\u624b\u6cd5\u3002\u901a\u8fc7\u7ec6\u81f4\u5de7\u5999\u5730\u8c03\u6574\u8272\u5f69\u3001\u4eae\u5ea6\u3001\u5bf9\u6bd4\u5ea6\u7b49\u89c6\u89c9\u53c2\u6570\uff0c<\/strong>\u5373\u53ef\u6210\u529f\u6a21\u62df\u51fa\u573a\u666f\u4ece\u767d\u5929\u9010\u6e10\u8fc7\u6e21\u5230\u9ed1\u591c\u7684\u53d8\u5316\u3002\u4e0d\u4ec5\u80fd\u663e\u8457\u589e\u5f3a\u7528\u6237\u7684\u89c6\u89c9\u4f53\u9a8c\uff0c\u63d0\u9ad8\u8bbe\u8ba1\u7684\u5438\u5f15\u529b\u548c\u7f8e\u611f\uff0c\u8fd8\u80fd\u8d4b\u4e88\u7a7a\u95f4\u6216\u754c\u9762\u4e00\u79cd\u52a8\u611f\u548c\u751f\u547d\u529b\uff0c\u4f7f\u6574\u4e2a\u5e94\u7528\u6216\u7f51\u7ad9\u5448\u73b0\u51fa\u66f4\u52a0\u751f\u52a8\u548c\u5bcc\u6709\u5c42\u6b21\u611f\u7684\u8868\u73b0\u3002<\/p>\n
    <\/p>\n
    <\/p>\n
    \"\"<\/a><\/figure>\n
    <\/p>\n
    <\/p>\n
    \u7cfb\u7edf\u5206\u6790<\/h1>\n
    <\/p>\n
    <\/p>\n
    \u5207\u6362\u767d\u5929\u4e0e\u9ed1\u591c\u7684\u65b9\u6848\u4e3b\u8981\u6709 2 \u79cd\uff1a<\/strong><\/p>\n
    <\/p>\n
    <\/p>\n
      \n
    1. \u5206\u522b\u505a\u597d\u767d\u5929\u548c\u9ed1\u591c\u7684\u573a\u666f\uff0c\u5e76\u5728\u9700\u8981\u65f6\u8fdb\u884c\u5207\u6362\uff1b<\/li>\n
    2. \u5728\u540c\u4e00\u573a\u666f\u4e2d\uff0c\u901a\u8fc7\u8c03\u6574\u9634\u5f71\u3001\u706f\u5149\u3001\u5929\u7a7a\u7403\u7b49\u5143\u7d20\uff0c\u6765\u5b9e\u73b0\u767d\u5929\u4e0e\u9ed1\u591c\u7684\u8fc7\u6e21\u3002<\/li>\n<\/ol>\n
      <\/p>\n
      <\/p>\n
      \u72ec\u7acb\u642d\u5efa\u663c\u591c\u573a\u666f\u518d\u5207\u6362<\/h2>\n
      <\/p>\n
      <\/p>\n
      \u5206\u522b\u505a\u597d\u767d\u5929\u548c\u9ed1\u591c\u7684\u573a\u666f\u518d\u8fdb\u884c\u5207\u6362\uff0c\u901a\u5e38\u9002\u7528\u4e8e\u9700\u8981\u7cbe\u7ec6\u64cd\u4f5c\u53ca\u63a7\u5236\u7684\u573a\u5408\u3002<\/strong>\u4f8b\u5982\u4e3a\u4e86\u786e\u4fdd\u6bcf\u4e2a\u65f6\u95f4\u6bb5\u7684\u5149\u5f71\u6548\u548c\u73af\u5883\u7ec6\u8282\u90fd\u8fbe\u5230\u4f18\u8d28\u72b6\u6001\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u5206\u522b\u9488\u5bf9\u767d\u5929\u548c\u9ed1\u591c\u8bbe\u8ba1\u4e0d\u540c\u7684\u573a\u666f\u3002\u5c3d\u7ba1\u8fd9\u79cd\u65b9\u5f0f\u8f83\u4e3a\u8017\u65f6\uff0c\u4f46\u5b83\u80fd\u63d0\u4f9b\u66f4\u7cbe\u7ec6\u548c\u4e2a\u6027\u5316\u7684\u89c6\u89c9\u6548\u679c\u3002<\/strong>\u5728\u5b9e\u9645\u5207\u6362\u8fc7\u7a0b\u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7\u6de1\u5165\u6de1\u51fa\u6216\u77ac\u95f4\u8f6c\u6362<\/strong>\u7b49\u65b9\u5f0f\uff0c\u8425\u9020\u51fa\u66f4\u4e3a\u903c\u771f\u7684\u65f6\u95f4\u53d8\u5316\u4f53\u9a8c\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      \u4ee5\u4e0b\u6848\u4f8b\u5c55\u793a\u4e86\u901a\u8fc7\u666f\u6df1\u6de1\u5165\u6de1\u51fa\u7684\u65b9\u5f0f\uff0c\u5b9e\u73b0\u767d\u5929\u4e0e\u9ed1\u591c\u8fc7\u6e21\u5207\u6362\u7684\u6548\u679c\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      \"\"<\/a><\/figure>\n
      <\/p>\n
      <\/p>\n
      \u5c01\u88c5\u5207\u6362\u573a\u666f\u65b9\u6cd5\u5982\u4e0b\uff1a<\/p>\n
      <\/p>\n
      <\/p>\n
      function switchScene(json,callBack){\n    g3d.dm().clear();\n    g3d.deserialze(json,callBack)\n}<\/code><\/pre>\n
      <\/p>\n
      <\/p>\n
      \u8bbe\u7f6e\u4e00\u5f20\u4e0d\u900f\u660e\u666f\u6df1\u8d34\u56fe\uff0c\u5c06\u666f\u6df1 aperture \u5b54\u5f84\u8bbe\u7f6e\u4e3a 0\uff0c\u505a\u666f\u6df1\u8fc7\u5ea6\u52a8\u753b\uff1a<\/p>\n
      <\/p>\n
      <\/p>\n
      function sceneDofTransitions(isToDeep, callBack){\n    g3d.enablePostProcessing(\"Dof\", true); \n    var module =  g3d.getPostProcessingModule('Dof');\n    module.image = '\u4e0d\u900f\u660e\u666f\u6df1.png';\n\n\n    var toAperture = isToDeep ? 1 : 0;\n    var range = toAperture - (module .aperture),\n        beginAperture = module .aperture ;\n\n\n    ht.Default.startAnim({\n        duration:  1e3,\n        easing(t) {return t},\n        action(v, t) {\n             module.aperture = beginAperture + (range * v)\n             g3d.iv();\n        },\n        finishFunc() {\n              callBack && callBack();\n        }\n    })\n}<\/code><\/pre>\n
      <\/p>\n
      <\/p>\n
      \u5728\u5207\u6362\u573a\u666f\u4e4b\u524d\uff0c\u5148\u8c03\u7528\u666f\u6df1\u52a8\u753b\uff0c\u5c06\u666f\u6df1\u8c03\u6574\u5230\u6700\u4e0d\u900f\u660e\u7684\u72b6\u6001\u3002\u5728\u52a8\u753b\u56de\u8c03\u540e\uff0c\u518d\u8fdb\u884c\u573a\u666f\u5207\u6362\u3002\u5207\u6362\u5b8c\u6210\u540e\uff0c\u518d\u5c06\u666f\u6df1\u8c03\u6574\u4e3a\u6700\u900f\u660e\u72b6\u6001\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      sceneDofTransitions(true, function() {\n    switchScene(json,function(json, dm, view, datas) {\n         sceneDofTransitions(false)\n  })\n})<\/code><\/pre>\n
      <\/p>\n
      <\/p>\n
      \u5728\u4f7f\u7528\u6b64\u65b9\u6848\u65f6\u9700\u8981\u6ce8\u610f\uff0c\u5982\u679c\u573a\u666f\u672c\u8eab\u5df2\u7ecf\u5177\u6709\u666f\u6df1\u6548\u679c\uff0c\u8bf7\u5728\u8c03\u7528\u52a8\u753b\u524d\u8bb0\u5f55\u539f\u6709\u7684\u666f\u6df1\u4fe1\u606f\uff0c\u5e76\u5728\u52a8\u753b\u7ed3\u675f\u540e\u5c06\u5176\u6062\u590d\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      \u8c03\u6574\u89c6\u89c9\u5143\u7d20\u5b9e\u73b0\u663c\u591c\u5207\u6362<\/h2>\n
      <\/p>\n
      <\/p>\n
      \u901a\u8fc7\u7efc\u5408\u8c03\u6574\u706f\u5149\u3001\u9634\u5f71\u548c\u5929\u7a7a\u7403\uff0c\u53ef\u4ee5\u6a21\u62df\u5149\u5f71\u7684\u53d8\u5316\uff0c<\/strong>\u5b9e\u73b0\u767d\u5929\u5230\u591c\u665a\u7684\u81ea\u7136\u8fc7\u6e21\uff0c\u4f7f\u6574\u4e2a\u573a\u666f\u66f4\u52a0\u751f\u52a8\u903c\u771f\u3002\u901a\u8fc7\u7cbe\u7ec6\u8c03\u63a7\u8fd9\u4e9b\u5143\u7d20\uff0c\u80fd\u591f\u4f7f\u5f97\u865a\u62df\u573a\u666f\u66f4\u52a0\u771f\u5b9e\uff0c\u5f15\u4eba\u5165\u80dc\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      \u706f\u5149<\/strong><\/p>\n
      <\/p>\n
      <\/p>\n
      \u5728\u573a\u666f\u4e2d\uff0c\u9ed8\u8ba4\u5b58\u5728\u4e00\u4e2a\u5934\u706f\u3002\u5728\u5b9e\u73b0\u767d\u5929\u548c\u9ed1\u591c\u7684\u8fc7\u6e21\u8fc7\u7a0b\u4e2d\uff0c\u9996\u5148\u9700\u8981\u8c03\u6574\u706f\u5149\u7684\u5f3a\u5ea6\u548c\u989c\u8272\u3002<\/strong>\u767d\u5929\u7684\u706f\u5149\u901a\u5e38\u8f83\u4e3a\u660e\u4eae\uff0c\u5e76\u5448\u73b0\u6e29\u6696\u7684\u9ec4\u8272\u6216\u767d\u8272\uff0c\u4ee5\u6a21\u62df\u592a\u9633\u5149\u7684\u6548\u679c\u3002\u5230\u4e86\u591c\u665a\uff0c\u706f\u5149\u7684\u5f3a\u5ea6\u5e94\u5f53\u51cf\u5f31\uff0c\u5e76\u8f6c\u4e3a\u51b7\u8272\u8c03\u7684\u84dd\u8272\u6216\u7d2b\u8272\uff0c\u4ee5\u6a21\u62df\u6708\u5149\u548c\u661f\u5149\u7684\u6548\u679c\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      g3d.setHeadlightDisabled(false);\/\/\u5f00\u542f\u5934\u706f\ng3d.setHeadlightColor(color);\/\/\u8bbe\u7f6e\u5934\u706f\u989c\u8272\ng3d.setHeadlightIntensity(intensity);\/\/\u5934\u706f\u5f3a\u5ea6<\/code><\/pre>\n
      <\/p>\n
      <\/p>\n
      \"\"<\/a><\/figure>\n
      <\/p>\n
      <\/p>\n
      \u9634\u5f71<\/strong><\/p>\n
      <\/p>\n
      <\/p>\n
      \u9634\u5f71\u7684\u8868\u73b0\u5f62\u5f0f\u4e5f\u81f3\u5173\u91cd\u8981\u3002<\/strong>\u767d\u5929\u7684\u9634\u5f71\u8f83\u4e3a\u6e05\u6670\u4e14\u9510\u5229\uff0c\u80fd\u591f\u5f88\u597d\u5730\u8868\u73b0\u51fa\u7269\u4f53\u7684\u7acb\u4f53\u611f\u3002\u800c\u591c\u665a\u7684\u9634\u5f71\u5219\u5e94\u66f4\u52a0\u67d4\u548c\u548c\u6a21\u7cca\uff0c\u4ee5\u6a21\u62df\u591c\u95f4\u7684\u6d45\u6d45\u5149\u7167\u548c\u6697\u6de1\u73af\u5883\u3002\u901a\u8fc7\u8c03\u8282\u9634\u5f71\u7684\u6e05\u6670\u5ea6\u548c\u8f6f\u5316\u7a0b\u5ea6\uff0c<\/strong>\u53ef\u4ee5\u5b9e\u73b0\u573a\u666f\u5728\u767d\u5929\u548c\u591c\u665a\u4e4b\u95f4\u7684\u81ea\u7136\u8fc7\u6e21\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      g3d.enableShadow();\/\/\u5f00\u542f\u9634\u5f71\ng3d.setShadowIntensity(intensity);\/\/\u9634\u5f71\u5f3a\u5ea6\u503c\ng3d.setShadowRadius(radius);\/\/ \u9634\u5f71\u67d4\u5316\u534a\u5f84\ng3d.setShadowDegreeX(degreeX);\/\/\u9634\u5f71\u5728X\u8f74\u65b9\u5411\u4e0a\u7684\u89d2\u5ea6\ng3d.setShadowDegreeZ(degreeZ);\/\/\u9634\u5f71\u5728Z\u8f74\u65b9\u5411\u4e0a\u7684\u89d2\u5ea6<\/code><\/pre>\n
      <\/p>\n
      <\/p>\n
      \"\"<\/a><\/figure>\n
      <\/p>\n
      <\/p>\n
      \u5929\u7a7a\u7403<\/strong><\/p>\n
      <\/p>\n
      <\/p>\n
      \u9664\u4e86\u4e0a\u8ff0\u4e24\u4e2a\u8981\u7d20\u4e4b\u5916\uff0c\u5929\u7a7a\u7403\u7684\u8272\u5f69\u548c\u7eb9\u7406\u662f\u6a21\u62df\u663c\u591c\u53d8\u5316\u7684\u5173\u952e\u8981\u7d20\u3002<\/strong>\u767d\u5929\u7684\u5929\u7a7a\u7403\u901a\u5e38\u5448\u73b0\u660e\u4eae\u7684\u84dd\u8272\uff0c\u5e76\u5e26\u6709\u52a8\u6001\u7684\u4e91\u6735\uff0c\u6548\u679c\u751f\u52a8\u4e14\u5bcc\u6709\u5c42\u6b21\u611f\u3002\u591c\u665a\u7684\u5929\u7a7a\u7403\u5219\u53d8\u4e3a\u6df1\u9083\u7684\u9ed1\u8272\u6216\u6df1\u84dd\u8272\uff0c\u4e0a\u9762\u70b9\u7f00\u7740\u95ea\u70c1\u7684\u661f\u5149\uff0c\u8fdb\u800c\u8425\u9020\u51fa\u795e\u79d8\u800c\u5b81\u9759\u7684\u591c\u665a\u6c1b\u56f4\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      var sky = new ht.Node();\nsky.s({\n  'shape3d': 'sphere',\n  'shape3d.image': '\u5929\u7a7a\u7403\u8d34\u56fe.jpg',\n  'shape3d.reverse.flip': true\n});\ng3d.setSkyBox(sky);<\/code><\/pre>\n
      <\/p>\n
      <\/p>\n
      \"\"<\/a><\/figure>\n
      <\/p>\n
      <\/p>\n
      \u901a\u8fc7\u7ed3\u5408\u4e0a\u8ff0\u5143\u7d20\uff0c<\/strong>\u53ef\u4ee5\u5b9e\u73b0\u767d\u5929\u5230\u591c\u665a\u7684\u81ea\u7136\u8fc7\u6e21\u3002\u5728\u8fdb\u884c\u8fd9\u4e9b\u8c03\u6574\u65f6\uff0c\u53ef\u4ee5\u5229\u7528\u52a8\u753b\u6765\u4fee\u6539\u6570\u503c\uff0c<\/strong>\u4ece\u800c\u5e73\u6ed1\u5c55\u793a\u767d\u5929\u5230\u591c\u665a\u7684\u53d8\u5316\u8fc7\u7a0b\uff0c\u63d0\u5347\u7528\u6237\u7684\u6c89\u6d78\u4f53\u9a8c\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      \"\"<\/a><\/figure>\n
      <\/p>\n
      <\/p>\n
      \u603b\u7ed3<\/h1>\n
      <\/p>\n
      <\/p>\n
      \u901a\u8fc7\u767d\u5929\u9ed1\u591c\u6548\u679c\uff0c\u4f7f\u7528\u6237\u5728\u4e0d\u540c\u65f6\u95f4\u6bb5\u90fd\u80fd\u4f53\u9a8c\u5230\u72ec\u7279\u7684\u573a\u666f\u53d8\u5316\uff0c\u5927\u5e45\u63d0\u5347\u4ea4\u4e92\u4f53\u9a8c\u548c\u7528\u6237\u53c2\u4e0e\u5ea6\u3002<\/strong>\u6b64\u5916\uff0c\u5408\u7406\u8fd0\u7528\u767d\u5929\u9ed1\u591c\u6548\u679c\u8fd8\u80fd\u589e\u5f3a\u573a\u666f\u7684\u6c89\u6d78\u611f\uff0c<\/strong>\u4f7f\u7528\u6237\u5728\u4f7f\u7528\u8fc7\u7a0b\u4e2d\u611f\u53d7\u5230\u65f6\u5149\u6d41\u8f6c\u7684\u81ea\u7136\u53d8\u5316\uff0c\u8fdb\u4e00\u6b65\u62c9\u8fd1\u865a\u62df\u4e16\u754c\u4e0e\u73b0\u5b9e\u4e16\u754c\u7684\u8ddd\u79bb\u3002<\/p>\n
      <\/p>\n
      <\/p>\n
      \"\"<\/a><\/figure>\n
      <\/p>\n
      <\/p>\n
      \u200b\u60a8\u53ef\u4ee5\u81f3\u56fe\u6251\u8f6f\u4ef6\u5b98\u7f51\u67e5\u770b\u66f4\u591a\u6848\u4f8b\u53ca\u6548\u679c\uff1a<\/p>\n
      <\/p>\n
      <\/p>\n
      \u56fe\u6251\u8f6f\u4ef6 – \u6784\u5efa\u5148\u8fdb 2D \u548c 3D \u53ef\u89c6\u5316\u6240\u9700\u8981\u7684\u4e00\u5207<\/a><\/p>\n
      <\/p>\n","protected":false},"author":2,"featured_media":4759,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[3,7,9,277,20,40,17,59,25,39,684,27,685],"_links":{"self":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/4758"}],"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=4758"}],"version-history":[{"count":4,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/4758\/revisions"}],"predecessor-version":[{"id":5156,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/4758\/revisions\/5156"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media\/4759"}],"wp:attachment":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media?parent=4758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/categories?post=4758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/tags?post=4758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}