{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/post/how-to-use-mmdjs/",
    "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"44d590c4-9d81-54d8-9062-d7147f71a80c","excerpt":"2016/12/03 末尾に追記しました この記事は12/3 Three.js Advent Calendarと12/4 Hamee Advent Calendar…","html":"<p>2016/12/03 末尾に追記しました</p>\n<p>この記事は<a href=\"http://qiita.com/advent-calendar/2016/threejs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">12/3 Three.js Advent Calendar</a>と<a href=\"http://qiita.com/advent-calendar/2016/hamee\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">12/4 Hamee Advent Calendar</a>の記事です。<br>\nもう半年以上前の話ですが、猛烈に<a href=\"https://www.d3p.co.jp/dreamclub/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ドリームクラブ</a>というゲームの実況にハマりまして、あまりにハマりすぎて <strong>「ノノノちゃん踊らせたい！ ！ ！ 歌ってほしい!!」</strong> と思い、<br>\nそれと同時期にスプラトゥーンの実況にもハマっており、ハイカラシンカを踊るアオリちゃんとホタルちゃんが可愛すぎて <strong>「二人ともぎゃんかわ！ ！ もう手中に収めて無限ループしたい!!！」</strong></p>\n<p>とか思い、 <strong>「ブラウザでもMMDしたい！ ！ ！」</strong> と想いから<a href=\"https://threejs.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">three.js</a>と<a href=\"https://threejs.org/examples/webgl_loader_mmd.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">MMD.js</a>を使ってみた話を。</p>\n<!--more-->\n<h2 id=\"完成物\" style=\"position:relative;\"><a href=\"#%E5%AE%8C%E6%88%90%E7%89%A9\" aria-label=\"完成物 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>完成物</h2>\n<ul>\n<li><a href=\"http://closet.leko.jp/2016/mmd/dreamclub/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ノノノ ☆Paradise☆(ドリームクラブ)</a></li>\n<li><a href=\"http://ika:fes@closet.leko.jp/2016/mmd/splatoon\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">シオカラーズ ハイカラシンカ(splatoon)</a></li>\n</ul>\n<p>どちらも、各素材様へのリンクはページ内にあります。<br>\nこのページから落とすのではなく、素材元のページからDLをお願い致します。<br>\nノノノちゃんの方は無音です（ハイカラシンカの曲は裏側にYouTubeを埋め込んで流しているので、動画が消された場合無音です）</p>\n<h2 id=\"使ったもの\" style=\"position:relative;\"><a href=\"#%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE\" aria-label=\"使ったもの permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使ったもの</h2>\n<ul>\n<li><a href=\"https://threejs.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">three.js</a></li>\n<li><a href=\"https://threejs.org/examples/?q=mmd\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">MMD Loader</a></li>\n</ul>\n<h2 id=\"やったこと\" style=\"position:relative;\"><a href=\"#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8\" aria-label=\"やったこと permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>やったこと</h2>\n<ul>\n<li>素材をニコ動とかニコニ・コモンズから見つけてくる</li>\n<li>展開してファイル名の文字化け治す</li>\n<li>デモ実装をコピー&#x26;ペースト</li>\n</ul>\n<h2 id=\"ハマったこととmmd-loader中の人の神対応\" style=\"position:relative;\"><a href=\"#%E3%83%8F%E3%83%9E%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8%E3%81%A8mmd-loader%E4%B8%AD%E3%81%AE%E4%BA%BA%E3%81%AE%E7%A5%9E%E5%AF%BE%E5%BF%9C\" aria-label=\"ハマったこととmmd loader中の人の神対応 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ハマったこととMMD Loader中の人の神対応</h2>\n<blockquote class=\"twitter-tweet\" data-lang=\"ja\">\n  <p lang=\"ja\" dir=\"ltr\">\n    亜麻音の右目が真っ白。なんでじゃ\n  </p>&mdash; れこ (@L_e_k_o)   \n  <a href=\"https://twitter.com/L_e_k_o/status/718804877116243968\">2016年4月9日</a>\n</blockquote>\n<p>※一瞬ノノノ用のモーションを亜麻音モデルに当てて二人で踊らせようとした時の話</p>\n<blockquote class=\"twitter-tweet\" data-lang=\"ja\">\n  <p lang=\"ja\" dir=\"ltr\">\n    <a href=\"https://twitter.com/L_e_k_o\">@L_e_k_o</a> MMDLoaderがどううまく動いていないのか興味あるのでスクリーンショットつきで詳細とモデルを教えてもらえませんか？ <a href=\"https://t.co/FlFZYhFQlg\">https://t.co/FlFZYhFQlg</a> <a href=\"https://t.co/nYy3nhxzJl\">https://t.co/nYy3nhxzJl</a> <a href=\"https://t.co/7r93J09ybG\">https://t.co/7r93J09ybG</a>\n  </p>&mdash; takahiro(John Smith) (@superhoge)   \n  <a href=\"https://twitter.com/superhoge/status/719030809252876289\">2016年4月10日</a>\n</blockquote>\n<p>この後デバッグしつつ、色々教えてもらいつつ、結局私は何もできずに治して頂き、完成という感じでした。</p>\n<p>なんかノノノちゃんの足が変な方向に向きますが、それくらいご愛嬌です。<br>\n<strong>モデルもモーションも完成度が高すぎて、ノノノはがに股でも可愛い</strong> ということが証明されました。</p>\n<h2 id=\"まとめ\" style=\"position:relative;\"><a href=\"#%E3%81%BE%E3%81%A8%E3%82%81\" aria-label=\"まとめ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>まとめ</h2>\n<p>横展開して色々観賞用にしようと思ったのですが、<br>\nファイル名が日本語になってるとエンコーディング周りでものすごく面倒で、横展開する元気が削がれてしまいました。</p>\n<p>またドはまりした作品が出たら、ブラウザ上でこっそり眺めようと思います。</p>\n<hr>\n<p>2016/12/03 追記</p>\n<p>という記事を公開したら、再び中の人からご指摘を頂きました。</p>\n<blockquote class=\"twitter-tweet\" data-lang=\"ja\">\n  <p lang=\"ja\" dir=\"ltr\">\n    <a href=\"https://twitter.com/L_e_k_o\">@L_e_k_o</a> この足がおかしい問題は <a href=\"https://t.co/7cvMkiTukq\">https://t.co/7cvMkiTukq</a> 最新のThree.js r83 devを使えば直るのではと思います\n  </p>&mdash; takahiro(John Smith) (@superhoge)   \n  <a href=\"https://twitter.com/superhoge/status/804740710364610560\">2016年12月2日</a>\n</blockquote>\n<p>まだ未検証ですが、最新版のThree.jsを利用することで思った通りの挙動になるようです。</p>","timeToRead":4,"frontmatter":{"title":"MMDのモデルにブラウザで踊って頂いた","tags":["JavaScript","MikuMikuDance","Three.js"],"date":"December 02, 2016","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='218'%20viewBox='0%200%20400%20218'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20109v109h399v-11l1%205%201-103V0H0v109m99-65c-8%203-14%2010-18%2019l-2%207%202%204c3%203%208%206%207%203l1-2%201-8%202-5%201-1c-2-2%201-9%204-11l7-3c8-1%209-2%204-4l-2-1-7%202m202%201l-14%201-14%202-11%203%202%202%203%202-2%202c-3%204-4%204-6%200-1-4-3-3-2%201%201%205-1%203-4-3-4-8-5-9-5-2v5c-3%200-2%207%201%2011%202%203%202%204%201%206v7c0%203-1%204-2%203-3-1-7%200-10%201s-3%201-2%203h6c2-1%205%201%206%205l3%206%204%205v-1c0-3%203-4%206-2%202%202%2012%206%2015%206l6-3%204-3c5%201%2012%202%2017%201h5l-4-2c-7-3-8-4-7-5s3-2%206-1l4-1c-1-2%200-2%201-2%204%200%207-1%207-2l-2-1c-2%200-9-6-9-8l3-2c2%200%204-1%204-3l5-6c5-4%205-8%202-14-3-8-14-15-17-11m-154%208c-2%206-6%209-5%205s-1-4-3%200l-2%204-1%202c0%201-1%201-2-1-2-5-7-7-12-7-4%201-5%201-4%203%200%201%201%201%203-1h5c5%202%207%208%204%209h-3l1-1v-5c-2-2-3-1-6%202-5%204-5%205-1%205%202%201%201%201-2%201-5%200-6%200-8%202l-4%203-4%201h-1c-1-2-3%200-3%203%201%201%200%202-1%202-2-1-1%200%201%203s2%203%200%203c-1-1-3%200-5%202-4%204-4%205%202%205l6%202%202%202-3%2010a850%20850%200%2000-5%2014l-6-1-5-1%205%202c4%200%207%201%207%202h13c2%200%202-1%202-7l1-11v-3l3%203%206%203c4%200%2015-4%2016-6s5-1%205%201c0%203%205-3%208-9%203-5%203-5%206-4h5l3-2-3-1h-11c-4%203-3-13%200-19%204-6%204-9%201-10s-3-1-1-5c2-7%200-7-4%200m-45%208l-7%202%201%2014%201%203v-3c0-5%200-6%202-7%202%200%202%200%201-2-2-2%203-7%206-6%202%201%201%205-1%206-1%201-1%201%202%201%203%201%208-1%208-3l1-2c0-1-1-2-3-1-2%200-3%200-4-2%200-2-1-2-7%200m167%201c-3%202-3%204-1%205%201%202%202%201%201-1-3-3%204-4%2010-1%204%202%204%203%200%203-2%200-1%201%202%201%205%200%206%201%207%204l2%202c0-1%201-2%202-1%204%200%206%203%206%206v2l1-3c2-7-3-12-8-10-3%201-6-1-7-4l-2-4c-3-2-10-1-13%201M135%2075l-4%207c-2%203-2%203%200%205l5%202%205%201c1%201%201%201%201-3%200-5-1-8-3-8s-2-2-1-4c2-3%202-4%201-4l-4%204m179%2043l-7%202-9%203c-3%201-5%202-12%201h-8l1%205%202%206c0%201%2016-3%2022-6l11-2%206-2%203-1%204-5-10-3-3%202M97%20131l-3%2016c0%208-2%2019-4%2025-3%2014-3%2018%202%2026l5%209c0%204%201%204%204%200%208-10%2010-17%2010-49l-1-25-4-2c-8-2-9-2-9%200m29%2024a443%20443%200%20011%2018c1%201%201%200%201-4l2-9c3-11%201-21-3-21l-1%2016m136%204l3%2010c1%204%201%204-1%203-2%200-2%200-1%202l3%201c3-1%203%200%203%202%200%203%202%207%204%207l1-3-1-6-1-3-2-9c-1-9-2-10-6-10-2%200-2%200-2%206m-126%209l-1%205-3%202c-3%200-4%202-4%208l-1%204c-2%201%202%206%204%206l1-4v-3l1%202c2%204%202%204%204-1%202-4%202-17%200-20-1-2-1-2-1%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.835164835164835,"src":"/static/85a8ca2dc6f20ceae4bc18b031238593/035d9/featured-image.png","srcSet":"/static/85a8ca2dc6f20ceae4bc18b031238593/1ec58/featured-image.png 334w,\n/static/85a8ca2dc6f20ceae4bc18b031238593/ccb4a/featured-image.png 668w,\n/static/85a8ca2dc6f20ceae4bc18b031238593/035d9/featured-image.png 990w","srcWebp":"/static/85a8ca2dc6f20ceae4bc18b031238593/8b5b8/featured-image.webp","srcSetWebp":"/static/85a8ca2dc6f20ceae4bc18b031238593/cd98f/featured-image.webp 334w,\n/static/85a8ca2dc6f20ceae4bc18b031238593/7535d/featured-image.webp 668w,\n/static/85a8ca2dc6f20ceae4bc18b031238593/8b5b8/featured-image.webp 990w","sizes":"(max-width: 990px) 100vw, 990px"}}}}}},"pageContext":{"slug":"/how-to-use-mmdjs/","previous":{"fields":{"slug":"/how-to-mount-data-volume-to-local-with-docker-compose/"},"frontmatter":{"title":"docker composeでMySQLのデータ領域をローカルにマウントする","tags":["Docker","Docker compose","MySQL"]}},"next":{"fields":{"slug":"/create-cheap-apps-about-girlish-number/"},"frontmatter":{"title":"難波社長と「勝ったな ガハハ」できるクソアプリ作った","tags":["React","Youtube"]}}}},
    "staticQueryHashes": ["2585454260","2954598359"]}