{"id":15037165,"url":"https://github.com/galnetwen/live2d","last_synced_at":"2025-04-13T07:46:46.853Z","repository":{"id":122131421,"uuid":"112846468","full_name":"galnetwen/Live2D","owner":"galnetwen","description":"在 Web 上展示 Live2D 吧！","archived":false,"fork":false,"pushed_at":"2020-09-21T07:04:01.000Z","size":599,"stargazers_count":1032,"open_issues_count":9,"forks_count":188,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-04T05:07:25.825Z","etag":null,"topics":["live2d"],"latest_commit_sha":null,"homepage":"https://haremu.com/p/205","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/galnetwen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-12-02T14:00:29.000Z","updated_at":"2025-04-01T17:20:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"c145c010-f0c3-4898-83c2-dbf1c0e284d3","html_url":"https://github.com/galnetwen/Live2D","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galnetwen%2FLive2D","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galnetwen%2FLive2D/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galnetwen%2FLive2D/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galnetwen%2FLive2D/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/galnetwen","download_url":"https://codeload.github.com/galnetwen/Live2D/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247123106,"owners_count":20887261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["live2d"],"created_at":"2024-09-24T20:33:39.881Z","updated_at":"2025-04-04T05:07:29.573Z","avatar_url":"https://github.com/galnetwen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"原项目出自一个大佬的博客，猫与向日葵。[阅读原文](https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 \"阅读原文\")  \n本文对于原文和原作有删改。  \n\n嘛，不少人对这个 Live2D 看板娘很感兴趣呢！\n纷纷让我写文章，而学长也是懒癌晚期，一直拖到现在 ~\n\n好了，还是准备开始我们的教程吧！\n俗话说：“授人以鱼不如授人以渔”，但是说这个“渔”比较难教，还是给条“鱼”你完事了。\n\n### 准备工作\n首先到我的 [Github](https://github.com/galnetwen/Live2D \"Github\") 去下载整理后的 Live2D 代码，毕竟整理后的话好下手 ~\n\n下载后解压代码到你的博客网站根目录去。（目录位置可以自定义）\n\n然后把解压出来的文件夹改名为：live2d 。\n\n### 正式开工\n在你博客程序头部文件（header）引入界面样式，在 head 标签内插入如下代码：\n```html\n\u003clink rel=\"stylesheet\" href=\"/live2d/css/live2d.css\" /\u003e\n```\n\n在 body 标签内合适的位置插入 Live2D 看板娘的元素，按照 Html 书写规范写 ~\n```html\n\u003cdiv id=\"landlord\"\u003e\n    \u003cdiv class=\"message\" style=\"opacity:0\"\u003e\u003c/div\u003e\n    \u003ccanvas id=\"live2d\" width=\"280\" height=\"250\" class=\"live2d\"\u003e\u003c/canvas\u003e\n    \u003cdiv class=\"hide-button\"\u003e隐藏\u003c/div\u003e\n\u003c/div\u003e\n```\n\n在你博客程序页脚文件（footer）引入脚本，在 body 标签结束前插入如下代码：\n```html\n\u003cscript type=\"text/javascript\"\u003e\n    var message_Path = '/live2d/'\n    var home_Path = 'https://haremu.com/'  //此处修改为你的域名，必须带斜杠\n\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"/live2d/js/live2d.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"/live2d/js/message.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    loadlive2d(\"live2d\", \"/live2d/model/tia/model.json\");\n\u003c/script\u003e\n```\n\n鼠标放在页面某个元素上时，需要 Live2D 看板娘提示的请修改 message.json 文件。\n\n**示例：**\n```json\n{\n    \"mouseover\": [\n        {\n            \"selector\": \".title a\",  //此处修改为你页面元素的标签名\n            \"text\": [\"要看看 {text} 么？\"]  //此处修改为你需要提示的文字\n        },\n        {\n            \"selector\": \"#searchbox\",\n            \"text\": [\"在找什么东西呢，需要帮忙吗？\"]\n        }\n    ],\n    \"click\": [  //此处是 Live2D 看板娘的触摸事件提示\n        {\n            \"selector\": \"#landlord #live2d\",\n            \"text\": [\"不要动手动脚的！快把手拿开~~\", \"真…真的是不知羞耻！\",\"Hentai！\", \"再摸的话我可要报警了！⌇●﹏●⌇\", \"110吗，这里有个变态一直在摸我(ó﹏ò｡)\"]\n        }\n    ]\n}\n```\n\n然后，刷新你的博客页面，看看效果吧！\n\n注意路径别弄错了噢 ~  \nPHP 程序推荐使用主题函数获取绝对路径。\n\n**问：“为什么这个 Live2D 没有换装功能哎？”**  \n**答：“自己研究去。”**\n  \n~~其实，就是动态改变 model.json 内的服装字段，达到随机服装的效果……~~\n\n### 模型欣赏\n![](https://haremu.com/wp-content/uploads/2017/12/QQ%E6%88%AA%E5%9B%BE20171202210923.png)  \n![](https://haremu.com/wp-content/uploads/2017/12/QQ%E6%88%AA%E5%9B%BE20171202210951.png)\n\n### 模型说明\n\u003e Live2D 并不是一种先进的技术，它产生的效果，都是用基本的平移、旋转、透明、曲面变形等操作实现的。\n最终的效果与贴图关系很大，而每一个动作，都需要制作师的精细调整。\n这是一个需要消耗大量时间精力的过程，因此质量好的模型并不多，质量好的也一般是在游戏中，版权受到保护，**不能随意使用**。\n\n本文章中所用模型解包自 [药水制作师](https://play.google.com/store/apps/details?id=com.sinsiroad.potionmaker\u0026hl=zh_CN \"药水制作师\") 手机游戏，版权归该官方所有。  \n（没错，我也安利下这款 ~~萝莉控~~ 游戏。啪！）  \n![](https://haremu.com/wp-content/uploads/2017/11/%E6%BB%91%E7%A8%BD%E6%89%93%E8%84%B8.png)\n\n### 更新日志\n**2017.12.30**\n- 主程序更新至原博主 v1.0.4 版本，添加了跨域画布支持；服装字段支持使用绝对地址，服装可以使用外部地址了，比如 CDN ，支持 SSL链接 。\n- 消息提示程序一些细节修改，一言 API 修改为 [http://hitokoto.cn](http://hitokoto.cn \"http://hitokoto.cn\") 官方。\n- 添加一个 Live2D 元素的隐藏按钮，隐藏后，需要刷新页面才能出现，因为按钮也被隐藏了 ~\n\n**2018.08.10**\n- 主程序更新至原博主 v1.0.5 版本。\n- 修正一言 API 的 URL 地址。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgalnetwen%2Flive2d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgalnetwen%2Flive2d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgalnetwen%2Flive2d/lists"}