{"id":1005,"date":"2024-05-21T10:38:14","date_gmt":"2024-05-21T01:38:14","guid":{"rendered":"https:\/\/elosove.com\/?p=1005"},"modified":"2024-05-21T10:38:14","modified_gmt":"2024-05-21T01:38:14","slug":"three-jsr158%e3%81%ab%e3%82%88%e3%82%8bvmd%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%81%ae%e5%88%87%e6%9b%bf-mmd","status":"publish","type":"post","link":"https:\/\/elosove.com\/?p=1005","title":{"rendered":"three.js[r158]\u306b\u3088\u308bVMD\u30d5\u30a1\u30a4\u30eb\u306e\u5207\u66ff | MMD"},"content":{"rendered":"\n<p>three.js\u3092\u4f7f\u3063\u3066VMD\u30d5\u30a1\u30a4\u30eb\u3092\u5207\u308a\u66ff\u3048\u305f\u3044\u5834\u5408\u306e\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u304c\u5c11\u306a\u304b\u3063\u305f\u306e\u3067\u65e5\u8a18\u306b\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/elosove.com\/?p=1005\/#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83\" title=\"\u958b\u767a\u74b0\u5883\">\u958b\u767a\u74b0\u5883<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/elosove.com\/?p=1005\/#%E8%AA%B2%E9%A1%8C1_%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E8%89%B2%E8%A4%AA%E3%81%9B%E8%A3%9C%E6%AD%A3\" title=\"\u8ab2\u984c1: \u30c6\u30af\u30b9\u30c1\u30e3\u8272\u892a\u305b\u88dc\u6b63\">\u8ab2\u984c1: \u30c6\u30af\u30b9\u30c1\u30e3\u8272\u892a\u305b\u88dc\u6b63<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/elosove.com\/?p=1005\/#%E8%AA%B2%E9%A1%8C2_VMD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%AD%E3%83%BC%E3%83%89\" title=\"\u8ab2\u984c2: VMD\u30d5\u30a1\u30a4\u30eb\u30ed\u30fc\u30c9\">\u8ab2\u984c2: VMD\u30d5\u30a1\u30a4\u30eb\u30ed\u30fc\u30c9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/elosove.com\/?p=1005\/#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%87%A6%E7%90%86%E6%A6%82%E8%A6%81\" title=\"\u30b3\u30fc\u30c9\u306e\u51e6\u7406\u6982\u8981\">\u30b3\u30fc\u30c9\u306e\u51e6\u7406\u6982\u8981<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/elosove.com\/?p=1005\/#%E5%88%87%E6%9B%BF%E6%A1%88%EF%BC%91_%E5%8D%B3%E6%99%82\" title=\"\u5207\u66ff\u6848\uff11: \u5373\u6642\">\u5207\u66ff\u6848\uff11: \u5373\u6642<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/elosove.com\/?p=1005\/#%E5%88%87%E6%9B%BF%E6%A1%88%EF%BC%92_%E5%BE%90%E3%80%85%E3%81%AB\" title=\"\u5207\u66ff\u6848\uff12: \u5f90\u3005\u306b\">\u5207\u66ff\u6848\uff12: \u5f90\u3005\u306b<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83\"><\/span>\u958b\u767a\u74b0\u5883<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>OS: Windows<br>three.js: r158<br>server: python[local]<br>MMD model: <a href=\"https:\/\/3d.nicovideo.jp\/works\/td84836\">\u5742\u53c9\u30af\u30ed\u30f1<\/a>\u3010\u516c\u5f0f\u3011\u00a9 2016 COVER Corp.<\/p>\n<\/blockquote>\n\n\n\n<p>index.html\u30d5\u30a1\u30a4\u30eb\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067&#8221;python -m http.server&#8221;\u30b3\u30de\u30f3\u30c9\u3092\u6253\u3061\u30b5\u30fc\u30d0\u30fc\u3092\u7acb\u3066\u305f\u5f8c\u306b\u30d6\u30e9\u30a6\u30b6\u3067\u30ed\u30fc\u30ab\u30eb\u53c2\u7167\u3059\u308b\u3088\u3046\u306a\u69cb\u6210\u3092\u524d\u63d0\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%AA%B2%E9%A1%8C1_%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E8%89%B2%E8%A4%AA%E3%81%9B%E8%A3%9C%E6%AD%A3\"><\/span>\u8ab2\u984c1: \u30c6\u30af\u30b9\u30c1\u30e3\u8272\u892a\u305b\u88dc\u6b63<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u30cd\u30c3\u30c8\u3092\u8abf\u3079\u308b\u3068\u6050\u3089\u304fr155~\u73fe\u5728\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u307e\u3067\u3067\u767a\u751f\u3057\u3066\u3044\u308b\u30ab\u30e9\u30fc\u8a2d\u5b9a\u554f\u984c\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u516c\u5f0f\u306e\u30b5\u30f3\u30d7\u30eb\u901a\u308a\u306b\u30ed\u30fc\u30c9\u3057\u305fMMD\u3092\u305d\u306e\u307e\u307e\u30b7\u30fc\u30f3\u306badd\u3059\u308b\u3068\u5c11\u3057\u8272\u892a\u305b\u305f\u8272\u5408\u3044\u306b\u306a\u308b\u70ba\u3001\u30e2\u30c7\u30eb\u306e\u30ed\u30fc\u30c9\u5f8c\u306b\u30de\u30c6\u30ea\u30a2\u30eb\u8a2d\u5b9a\u3092\u4fee\u6b63\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%AA%B2%E9%A1%8C2_VMD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%AD%E3%83%BC%E3%83%89\"><\/span>\u8ab2\u984c2: VMD\u30d5\u30a1\u30a4\u30eb\u30ed\u30fc\u30c9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u8907\u6570\u306eVMD\u30d5\u30a1\u30a4\u30eb\u3092MMDLoader\u3067\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u95a2\u6570\u3067\u8aad\u307f\u8fbc\u3080\u3068VMD\u30c7\u30fc\u30bf\u304c\u30de\u30fc\u30b8\u3055\u308c\u3066\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306floadVMD\u95a2\u6570\u5185\u3067&#8221;parser.mergeVmds( vmds )&#8221;\u304c\u5b9f\u884c\u3055\u308c\u3066\u3057\u307e\u3046\u305f\u3081\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u3092\u56de\u907f\u3057\u3066\u8907\u6570\u306eVMD\u3092\u500b\u5225\u306b\u518d\u751f\u3059\u308b\u65b9\u6cd5\u6848\u3092\u4e0b\u8a18\u306b\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%87%A6%E7%90%86%E6%A6%82%E8%A6%81\"><\/span>\u30b3\u30fc\u30c9\u306e\u51e6\u7406\u6982\u8981<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>\u30a4\u30f3\u30dd\u30fc\u30c8\u51e6\u7406<\/strong><br>    &#8211; three.js\u306funpkg.com\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3001ammo.js\u306fsrc\u5f62\u5f0f\u3067\u8aad\u307f\u8fbc\u307f<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;VMD Switch Example&lt;\/title&gt;\n    \n    &lt;script src=&quot;https:\/\/unpkg.com\/es-module-shims@1.8.2\/dist\/es-module-shims.js&quot;&gt;&lt;\/script&gt;\n\n    &lt;script type=&quot;importmap&quot;&gt;\n        {\n            &quot;imports&quot;: {\n                &quot;three&quot;: &quot;https:\/\/unpkg.com\/three@0.158.0\/build\/three.module.js&quot;,\n                &quot;three\/addons\/&quot;: &quot;https:\/\/unpkg.com\/three@0.158.0\/examples\/jsm\/&quot;\n            }\n        }\n    &lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/unpkg.com\/three@0.158.0\/examples\/jsm\/libs\/ammo.wasm.js&quot;&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">charset<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;UTF-8&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">VMD Switch Example<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/unpkg.com\/es-module-shims@1.8.2\/dist\/es-module-shims.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">type<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;importmap&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #CE9178\">&quot;imports&quot;<\/span><span style=\"color: #D4D4D4\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #CE9178\">&quot;three&quot;<\/span><span style=\"color: #9CDCFE\">:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&quot;https:\/\/unpkg.com\/three@0.158.0\/build\/three.module.js&quot;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #CE9178\">&quot;three\/addons\/&quot;<\/span><span style=\"color: #9CDCFE\">:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&quot;https:\/\/unpkg.com\/three@0.158.0\/examples\/jsm\/&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/unpkg.com\/three@0.158.0\/examples\/jsm\/libs\/ammo.wasm.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;script type=&quot;module&quot;&gt;\n        import * as THREE from 'three';\n        import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n        import { OutlineEffect } from 'three\/addons\/effects\/OutlineEffect.js';\n        import { MMDLoader } from 'three\/addons\/loaders\/MMDLoader.js';\n        import { MMDAnimationHelper } from 'three\/addons\/animation\/MMDAnimationHelper.js';\n        import { MMDParser } from 'three\/addons\/libs\/mmdparser.module.js';\n        import { GUI } from 'three\/addons\/libs\/lil-gui.module.min.js';\n        \u30fb\n        \u30fb\n        \u30fb\n&lt;\/script&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">type<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;module&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        import * as THREE from &#39;three&#39;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        import <\/span><span style=\"color: #569CD6\">{<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">OrbitControls<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #D4D4D4\"> from &#39;three\/addons\/controls\/OrbitControls.js&#39;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        import <\/span><span style=\"color: #569CD6\">{<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">OutlineEffect<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #D4D4D4\"> from &#39;three\/addons\/effects\/OutlineEffect.js&#39;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        import <\/span><span style=\"color: #569CD6\">{<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">MMDLoader<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #D4D4D4\"> from &#39;three\/addons\/loaders\/MMDLoader.js&#39;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        import <\/span><span style=\"color: #569CD6\">{<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">MMDAnimationHelper<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #D4D4D4\"> from &#39;three\/addons\/animation\/MMDAnimationHelper.js&#39;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        import <\/span><span style=\"color: #569CD6\">{<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">MMDParser<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #D4D4D4\"> from &#39;three\/addons\/libs\/mmdparser.module.js&#39;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        import <\/span><span style=\"color: #569CD6\">{<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">GUI<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #D4D4D4\"> from &#39;three\/addons\/libs\/lil-gui.module.min.js&#39;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        \u30fb<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        \u30fb<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        \u30fb<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<p><em><strong>\u30b7\u30fc\u30f3\u3068\u30b7\u30fc\u30f3\u5185\u306e\u8981\u7d20\u306e\u8a2d\u5b9a<\/strong><\/em><br> &#8211; scene, camera, renderer, light, GUI etc&#8230;\u306e\u5909\u6570\u7528\u610f\u3001\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5207\u66ff\u7528\u306e\u30dc\u30bf\u30f3\u3092\u4f5c\u6210<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ for MMD&amp;VMD\nconst loader = new MMDLoader();\nconst perser = new MMDParser.Parser();\nlet helper = new MMDAnimationHelper({afterglow: 2.0});\n\nconst baseVmdUrl = '.\/~your base url'\nconst vmdUrlList = [baseVmdUrl + 'walk.vmd', baseVmdUrl + 'skip.vmd',];\n\nlet mesh, currentVmdId;\nvar isLoadFinished = false;\nvar animations = [];\nvar actions = [];\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6A9955\">\/\/ for MMD&amp;VMD<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">loader<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">MMDLoader<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">perser<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">MMDParser<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">Parser<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">MMDAnimationHelper<\/span><span style=\"color: #D4D4D4\">({<\/span><span style=\"color: #9CDCFE\">afterglow:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">2.0<\/span><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">baseVmdUrl<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#39;.\/~your base url&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">vmdUrlList<\/span><span style=\"color: #D4D4D4\"> = [<\/span><span style=\"color: #9CDCFE\">baseVmdUrl<\/span><span style=\"color: #D4D4D4\"> + <\/span><span style=\"color: #CE9178\">&#39;walk.vmd&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">baseVmdUrl<\/span><span style=\"color: #D4D4D4\"> + <\/span><span style=\"color: #CE9178\">&#39;skip.vmd&#39;<\/span><span style=\"color: #D4D4D4\">,];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">currentVmdId<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">isLoadFinished<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\"> = [];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">actions<\/span><span style=\"color: #D4D4D4\"> = [];<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function initScene(){\n        \/\/ Animation switch button\n        const vrmButton = gui.addFolder( 'VRM' );\n        currentVmdId = 0;\n\n        const params = {\n                func: (idx) =&gt; changeMotion(idx) \/\/ your motion switch function\n        };\n\n        for (let idx = 0; idx &lt; vmdUrlList.length; idx++){\n                let vmdName = vmdUrlList[idx].replace(baseVmdUrl, &quot;&quot;);\n                vmdName = vmdName.replace(&quot;.vmd&quot;, &quot;&quot;);\n                vrmButton\n                .add({ \n                        executeFunc: () =&gt; params.func(idx) \n                        }, 'executeFunc' )\n                .name( vmdName );\n        };\n};\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">initScene<\/span><span style=\"color: #D4D4D4\">(){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ Animation switch button<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">vrmButton<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">gui<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">addFolder<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #CE9178\">&#39;VRM&#39;<\/span><span style=\"color: #D4D4D4\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">currentVmdId<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">params<\/span><span style=\"color: #D4D4D4\"> = {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #DCDCAA\">func<\/span><span style=\"color: #9CDCFE\">:<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">changeMotion<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #6A9955\">\/\/ your motion switch function<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">for<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\"> &lt; <\/span><span style=\"color: #9CDCFE\">vmdUrlList<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">length<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">++){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">vmdName<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">vmdUrlList<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">].<\/span><span style=\"color: #DCDCAA\">replace<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">baseVmdUrl<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&quot;&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">vmdName<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">vmdName<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">replace<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;.vmd&quot;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&quot;&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">vrmButton<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                .<\/span><span style=\"color: #DCDCAA\">add<\/span><span style=\"color: #D4D4D4\">({ <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #DCDCAA\">executeFunc<\/span><span style=\"color: #9CDCFE\">:<\/span><span style=\"color: #D4D4D4\"> () <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">params<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">func<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        }, <\/span><span style=\"color: #CE9178\">&#39;executeFunc&#39;<\/span><span style=\"color: #D4D4D4\"> )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                .<\/span><span style=\"color: #DCDCAA\">name<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">vmdName<\/span><span style=\"color: #D4D4D4\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<p><strong>pmx\u30d5\u30a1\u30a4\u30eb\u306e\u30ed\u30fc\u30c9<\/strong><br> &#8211; load\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u30e2\u30c7\u30eb\u3060\u3051\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<br> &#8211; \u305d\u306e\u307e\u307e\u8aad\u307f\u8fbc\u3080\u3068\u8272\u892a\u305b\u305f\u3088\u3046\u306a\u30ab\u30e9\u30fc\u306b\u306a\u308b\u306e\u3067\u3001\u3053\u308c\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002[r155~r162\u3050\u3089\u3044\u304b\u3089\u5b58\u5728\u3057\u3066\u3044\u308b\u554f\u984c: <a href=\"https:\/\/github.com\/mrdoob\/three.js\/issues\/28336#issuecomment-2105643560\">three.js issue<\/a>]<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"234\" src=\"https:\/\/elosove.com\/wp-content\/uploads\/2024\/05\/mmdloader-washed-out.png\" alt=\"\" class=\"wp-image-1025\" srcset=\"https:\/\/elosove.com\/wp-content\/uploads\/2024\/05\/mmdloader-washed-out.png 555w, https:\/\/elosove.com\/wp-content\/uploads\/2024\/05\/mmdloader-washed-out-300x126.png 300w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"async function loadMyMMD() {\n        loader.load('path\/to\/your.pmx', function(mmd){\n                mesh = mmd;\n                \/\/ for colorization issue \n                for ( const material of mesh.material ) {\n                    material.emissive.set( 0x000000 );\n                }\n                scene.add( mesh );\n                loadMyVMD();\n                },\n                (progress) =&gt; console.log('Loading model...', 100.0 * (progress.loaded \/ progress.total), '%'),\n                (error) =&gt; console.error(error)\n        );  \n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">loadMyMMD<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">loader<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">load<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;path\/to\/your.pmx&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">mmd<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">mmd<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #6A9955\">\/\/ for colorization issue <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #C586C0\">for<\/span><span style=\"color: #D4D4D4\"> ( <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">material<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">of<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">material<\/span><span style=\"color: #D4D4D4\"> ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #9CDCFE\">material<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">emissive<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">set<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #B5CEA8\">0x000000<\/span><span style=\"color: #D4D4D4\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">scene<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">add<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #DCDCAA\">loadMyVMD<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                (<\/span><span style=\"color: #9CDCFE\">progress<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">log<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;Loading model...&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">100.0<\/span><span style=\"color: #D4D4D4\"> * (<\/span><span style=\"color: #9CDCFE\">progress<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">loaded<\/span><span style=\"color: #D4D4D4\"> \/ <\/span><span style=\"color: #9CDCFE\">progress<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">total<\/span><span style=\"color: #D4D4D4\">), <\/span><span style=\"color: #CE9178\">&#39;%&#39;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                (<\/span><span style=\"color: #9CDCFE\">error<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">error<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">error<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        );  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<p><strong>vmd\u30d5\u30a1\u30a4\u30eb\u7fa4\u306e\u30ed\u30fc\u30c9<\/strong><br> &#8211; loadVMD\u95a2\u6570\u3092\u53c2\u8003\u306b\u81ea\u4f5c\u3057\u307e\u3059\u3002[<a href=\"https:\/\/github.com\/mrdoob\/three.js\/blob\/dev\/examples\/jsm\/loaders\/MMDLoader.js#L304\">loadVMD<\/a>]<\/p>\n\n\n\n<p>MMDLoader\u306eloader(FileLoader)\u306eload\u95a2\u6570\u3067vmd\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u307f\u3001AnimationBuilder\u30af\u30e9\u30b9\u3092\u4f7f\u3063\u3066AnimationClip\u3092\u5404VMD\u30d5\u30a1\u30a4\u30eb\u306b\u3064\u304d\u4e00\u3064\u751f\u6210\u3057\u3066\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function loadMyVMD(){\n        for (let url of vmdUrlList) {\n            loader.loader.load([url], function( vmdBuffer ) {\n                let vmd = perser.parseVmd( vmdBuffer, true );\n                let anime = loader.animationBuilder.build(vmd, mesh);\n                animations.push(anime);\n            },\n            (progress) =&gt; console.log('Loading ' + url, 100.0 * (progress.loaded \/ progress.total), '%'),\n            (error) =&gt; console.error(error)\n            );\n        }\n};\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">loadMyVMD<\/span><span style=\"color: #D4D4D4\">(){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">for<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">url<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">of<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">vmdUrlList<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">loader<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">loader<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">load<\/span><span style=\"color: #D4D4D4\">([<\/span><span style=\"color: #9CDCFE\">url<\/span><span style=\"color: #D4D4D4\">], <\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">vmdBuffer<\/span><span style=\"color: #D4D4D4\"> ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">vmd<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">perser<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">parseVmd<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">vmdBuffer<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">anime<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">loader<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">animationBuilder<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">build<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">vmd<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">push<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">anime<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            (<\/span><span style=\"color: #9CDCFE\">progress<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">log<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;Loading &#39;<\/span><span style=\"color: #D4D4D4\"> + <\/span><span style=\"color: #9CDCFE\">url<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">100.0<\/span><span style=\"color: #D4D4D4\"> * (<\/span><span style=\"color: #9CDCFE\">progress<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">loaded<\/span><span style=\"color: #D4D4D4\"> \/ <\/span><span style=\"color: #9CDCFE\">progress<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">total<\/span><span style=\"color: #D4D4D4\">), <\/span><span style=\"color: #CE9178\">&#39;%&#39;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            (<\/span><span style=\"color: #9CDCFE\">error<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">error<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">error<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<p><strong>Ammo.js\u306e\u30ed\u30fc\u30c9<\/strong><br> &#8211; \u516c\u5f0f\u30b5\u30f3\u30d7\u30eb (<a href=\"https:\/\/github.com\/mrdoob\/three.js\/blob\/dev\/examples\/webgl_loader_mmd.html\">webgl_loader_mmd.html<\/a>)<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"Ammo().then(function (AmmoLib) {\n            Ammo = AmmoLib;\n            loadMyMMD().catch(e =&gt; console.error('Initialization failed:', e));\n            initScene();\n            animate();\n});\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #DCDCAA\">Ammo<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">then<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">AmmoLib<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">Ammo<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">AmmoLib<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #DCDCAA\">loadMyMMD<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">catch<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">e<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">error<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;Initialization failed:&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">e<\/span><span style=\"color: #D4D4D4\">));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #DCDCAA\">initScene<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #DCDCAA\">animate<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<p><strong>MMDAnimationHelper\u306e\u8a2d\u5b9a<\/strong><br> &#8211; helper\u3078\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u8a2d\u5b9a\u5f8c\u306bAnimationMixer\u304b\u3089(VMD\u304b\u3089\u30ed\u30fc\u30c9\u3055\u308c\u305f)action\u3092\u53d6\u308a\u51fa\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function helperLoad(){\n        \/\/ helper setting\n        helper.add( mesh, {\n            animation: animations,\n            physics: true\n        });\n\n        let ikHelper = helper.objects.get( mesh ).ikSolver.createHelper();\n        ikHelper.visible = false;\n        scene.add( ikHelper );\n        \n        let physicsHelper = helper.objects.get( mesh ).physics.createHelper();\n        physicsHelper.visible = false;\n        scene.add( physicsHelper );\n\n        \/\/ mixer setting\n        let mixer = helper.objects.get( mesh ).mixer;\n        mixer.stopAllAction();\n\n        \/\/ add action(vmd) data\n        for (let idx = 0; idx &lt; animations.length; idx++){\n            if(animations[idx]){\n                let action = mixer.clipAction( animations[idx] );\n                action.setLoop( THREE.LoopOnce );\n                actions.push(action);\n            }else{return false;}\n        }\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">helperLoad<\/span><span style=\"color: #D4D4D4\">(){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ helper setting<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">add<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\">, {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">animation:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">physics:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        });<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">ikHelper<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">objects<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\"> ).<\/span><span style=\"color: #9CDCFE\">ikSolver<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">createHelper<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">ikHelper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">visible<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">scene<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">add<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">ikHelper<\/span><span style=\"color: #D4D4D4\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">physicsHelper<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">objects<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\"> ).<\/span><span style=\"color: #9CDCFE\">physics<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">createHelper<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">physicsHelper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">visible<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">scene<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">add<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">physicsHelper<\/span><span style=\"color: #D4D4D4\"> );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ mixer setting<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">objects<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\"> ).<\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">stopAllAction<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ add action(vmd) data<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">for<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\"> &lt; <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">length<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">++){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">]){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">clipAction<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">] );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">setLoop<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #4FC1FF\">THREE<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">LoopOnce<\/span><span style=\"color: #D4D4D4\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">actions<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">push<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            }<\/span><span style=\"color: #C586C0\">else<\/span><span style=\"color: #D4D4D4\">{<\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">;}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<p><strong>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u51e6\u7406<\/strong><br> &#8211; \u6bce\u30d5\u30ec\u30fc\u30e0\u547c\u3073\u51fa\u3055\u308c\u308b\u306e\u3067helper\u3068renderer\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3092\u5b9f\u884c\u3057\u3066\u3044\u304f<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function animate(currentTime) {\n        requestAnimationFrame(animate);\n        const delta = currentTime - lastTime;\n\n        if (delta &gt; interval) {\n            lastTime = currentTime - (delta % interval);\n\n            if(isLoadFinished){\n                \/\/ update\n                helper.update(clock.getDelta());\n                renderer.render(scene, camera);\n            } else {\n                \/\/ all vmd files are loaded\n                if(animations.length == vmdUrlList.length){\n                    if(isLoadFinished == false){\n                        helperLoad();\n                        isLoadFinished = true;\n                    }\n                }\n            }\n        }\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">animate<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">currentTime<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #DCDCAA\">requestAnimationFrame<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">animate<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">delta<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">currentTime<\/span><span style=\"color: #D4D4D4\"> - <\/span><span style=\"color: #9CDCFE\">lastTime<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">delta<\/span><span style=\"color: #D4D4D4\"> &gt; <\/span><span style=\"color: #9CDCFE\">interval<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">lastTime<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">currentTime<\/span><span style=\"color: #D4D4D4\"> - (<\/span><span style=\"color: #9CDCFE\">delta<\/span><span style=\"color: #D4D4D4\"> % <\/span><span style=\"color: #9CDCFE\">interval<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">isLoadFinished<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #6A9955\">\/\/ update<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">update<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">clock<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getDelta<\/span><span style=\"color: #D4D4D4\">());<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">renderer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">render<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">scene<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            } <\/span><span style=\"color: #C586C0\">else<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #6A9955\">\/\/ all vmd files are loaded<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">length<\/span><span style=\"color: #D4D4D4\"> == <\/span><span style=\"color: #9CDCFE\">vmdUrlList<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">length<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">isLoadFinished<\/span><span style=\"color: #D4D4D4\"> == <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #DCDCAA\">helperLoad<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #9CDCFE\">isLoadFinished<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>\u5207\u66ff\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u6642\u306e\u52d5\u4f5c<\/strong><br> &#8211; \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3(VMD)\u3092\u5207\u308a\u66ff\u3048\u308b\u51e6\u7406\u3002\u8272\u3005\u306a\u65b9\u6cd5\u304c\u8003\u3048\u3089\u308c\u308b\u306e\u3067\u5f8c\u8ff0\u3002<\/p>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%88%87%E6%9B%BF%E6%A1%88%EF%BC%91_%E5%8D%B3%E6%99%82\"><\/span>\u5207\u66ff\u6848\uff11: \u5373\u6642<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>initScene\u95a2\u6570\u5185\u3067\u30dc\u30bf\u30f3\u306b\u30bb\u30c3\u30c8\u3057\u3066\u3044\u308bchangeMotion\u95a2\u6570\u3092instantSwitchAnimation\u306b\u5909\u66f4\u3057\u3066\u4e0b\u8a18\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function instantSwitchAnimation(idx) {\n        let mixer = helper.objects.get( mesh ).mixer;\n        let action = mixer.clipAction( animations[currentVmdId] );\n        let nextAction = mixer.clipAction( animations[idx] );\n\n        action.stop()\n        mixer.stopAllAction();\n        nextAction.play();\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">instantSwitchAnimation<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">objects<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\"> ).<\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">clipAction<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #9CDCFE\">currentVmdId<\/span><span style=\"color: #D4D4D4\">] );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">nextAction<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">clipAction<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">] );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">stop<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">stopAllAction<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">nextAction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">play<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"540\" src=\"https:\/\/elosove.com\/wp-content\/uploads\/2024\/05\/instant-motion-switch.gif\" alt=\"\" class=\"wp-image-1026\"\/><\/figure>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%88%87%E6%9B%BF%E6%A1%88%EF%BC%92_%E5%BE%90%E3%80%85%E3%81%AB\"><\/span>\u5207\u66ff\u6848\uff12: \u5f90\u3005\u306b<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>2\u3064\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u6642\u9593\u3068\u3068\u3082\u306bsetEffectiveWeight\u3067\u5f90\u3005\u306b\u5207\u308a\u66ff\u3048\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u5fc5\u8981\u306a\u5909\u6570\u3092\u7528\u610f\u3057\u3001\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u969b\u306b\u30d5\u30a7\u30fc\u30c9\u51e6\u7406\u304cON\u306b\u306a\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ for animation switching\nlet fadeOutVmdId;\nlet fadeTimer = 0;\nlet fadeDuration = 1000 \/\/msec\nlet isFading = false;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6A9955\">\/\/ for animation switching<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">fadeOutVmdId<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">fadeTimer<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">fadeDuration<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">1000<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #6A9955\">\/\/msec<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">isFading<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function smoothTransitionAnimation(idx) {\n    isFading = true;\n    fadeOutVmdId = currentVmdId;\n    currentVmdId = idx;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">smoothTransitionAnimation<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">isFading<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">fadeOutVmdId<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">currentVmdId<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">currentVmdId<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">idx<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u30d5\u30a7\u30fc\u30c9\u51e6\u7406\u30d5\u30e9\u30b0(isFading)\u304ctrue\u306b\u306a\u3063\u305f\u5f8c\u306fanimate\u95a2\u6570\u304b\u3089\u30d5\u30a7\u30fc\u30c9\u51e6\u7406\u7528\u306e\u95a2\u6570\u3046fadeAnimation\u95a2\u6570\u3092\u547c\u3073\u3001\u6307\u5b9a\u6642\u9593(fadeDuration)\u306e\u9593\u306b\uff12\u3064\u306e\u30e2\u30fc\u30b7\u30e7\u30f3\u306eweight\u3092\u5909\u3048\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function fadeAnimation(dulation){\n    let mixer = helper.objects.get( mesh ).mixer;\n    let action = mixer.clipAction( animations[fadeOutVmdId] );\n    let nextAction = mixer.clipAction( animations[currentVmdId] );\n    \n\n    if(fadeOutVmdId == currentVmdId){\n        \/\/ cancel fade animation if same vmd ID\n        isFading = false;\n        fadeTimer = 0;\n    }\n    else{\n        \/\/ init next action\n        if(fadeTimer == 0){\n            nextAction.reset();\n        }\n        \n        \/\/ Reset if motion is not playing\n        if(action.isRunning() == false &amp;&amp; nextAction.isRunning() == false){\n            mixer.stopAllAction();\n        }\n\n        \/\/ change action weight\n        fadeTimer = fadeTimer + dulation;\n\n        let weight = (fadeDuration - fadeTimer)\/fadeDuration;\n        if( weight &gt; 0){\n            action.setEffectiveWeight(weight);\n            nextAction.setEffectiveWeight(1 - weight);\n        }\n        else{\n            action.setEffectiveWeight(0);\n            nextAction.setEffectiveWeight(1);\n            isFading = false;\n            fadeTimer = 0;\n        }\n        nextAction.play();\n    }\n}\n\nfunction animate(currentTime) {\n...\n    if(isLoadFinished){\n        if(isFading){\n            fadeAnimation(delta);\n        }\n        \n        \/\/ update\n        helper.update(clock.getDelta());\n        renderer.render(scene, camera);\n    }\n...\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">fadeAnimation<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">dulation<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">objects<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">mesh<\/span><span style=\"color: #D4D4D4\"> ).<\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">clipAction<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #9CDCFE\">fadeOutVmdId<\/span><span style=\"color: #D4D4D4\">] );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">nextAction<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">clipAction<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">animations<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #9CDCFE\">currentVmdId<\/span><span style=\"color: #D4D4D4\">] );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">fadeOutVmdId<\/span><span style=\"color: #D4D4D4\"> == <\/span><span style=\"color: #9CDCFE\">currentVmdId<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ cancel fade animation if same vmd ID<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">isFading<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">fadeTimer<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">else<\/span><span style=\"color: #D4D4D4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ init next action<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">fadeTimer<\/span><span style=\"color: #D4D4D4\"> == <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">nextAction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reset<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ Reset if motion is not playing<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">isRunning<\/span><span style=\"color: #D4D4D4\">() == <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\"> &amp;&amp; <\/span><span style=\"color: #9CDCFE\">nextAction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">isRunning<\/span><span style=\"color: #D4D4D4\">() == <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">mixer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">stopAllAction<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ change action weight<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">fadeTimer<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">fadeTimer<\/span><span style=\"color: #D4D4D4\"> + <\/span><span style=\"color: #9CDCFE\">dulation<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">weight<\/span><span style=\"color: #D4D4D4\"> = (<\/span><span style=\"color: #9CDCFE\">fadeDuration<\/span><span style=\"color: #D4D4D4\"> - <\/span><span style=\"color: #9CDCFE\">fadeTimer<\/span><span style=\"color: #D4D4D4\">)\/<\/span><span style=\"color: #9CDCFE\">fadeDuration<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">( <\/span><span style=\"color: #9CDCFE\">weight<\/span><span style=\"color: #D4D4D4\"> &gt; <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">setEffectiveWeight<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">weight<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">nextAction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">setEffectiveWeight<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">1<\/span><span style=\"color: #D4D4D4\"> - <\/span><span style=\"color: #9CDCFE\">weight<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">else<\/span><span style=\"color: #D4D4D4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">action<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">setEffectiveWeight<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">nextAction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">setEffectiveWeight<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">1<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">isFading<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">fadeTimer<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">nextAction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">play<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">animate<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">currentTime<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">...<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">isLoadFinished<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">isFading<\/span><span style=\"color: #D4D4D4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #DCDCAA\">fadeAnimation<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">delta<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ update<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">helper<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">update<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">clock<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getDelta<\/span><span style=\"color: #D4D4D4\">());<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">renderer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">render<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">scene<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">...<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"540\" src=\"https:\/\/elosove.com\/wp-content\/uploads\/2024\/05\/smooth-motion-switch.gif\" alt=\"\" class=\"wp-image-1029\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>three.js\u3092\u4f7f\u3063\u3066VMD\u30d5\u30a1\u30a4\u30eb\u3092\u5207\u308a\u66ff\u3048\u305f\u3044\u5834\u5408\u306e\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u304c\u5c11\u306a\u304b\u3063\u305f\u306e\u3067\u65e5\u8a18\u306b\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002 \u958b\u767a\u74b0\u5883 OS: Windowsthree.js: r158server: python[local]MMD [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1035,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[34,33],"class_list":["post-1005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-mmd","tag-three-js"],"_links":{"self":[{"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/posts\/1005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1005"}],"version-history":[{"count":27,"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/posts\/1005\/revisions"}],"predecessor-version":[{"id":1036,"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/posts\/1005\/revisions\/1036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/media\/1035"}],"wp:attachment":[{"href":"https:\/\/elosove.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}