网页/博客Hexo添加live2d游戏角色看板娘,简易添加，碧蓝航线等live2d新型游戏角色模型（moc3）

最新推荐文章于 2025-04-23 07:11:12 发布
原创 最新推荐文章于 2025-04-23 07:11:12 发布
· 3.9k 阅读 · 14 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在网页或博客上使用Hexo添加支持moc3文件的新版live2d模型，如碧蓝航线的角色。通过示例网站和代码展示，演示了添加过程以及角色与用户的互动效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目前博客上常见live2d看板娘很多都已经是比较老的了（旧版的是moc文件的）并且相应的插件不支持新版模型（moc3文件），如碧蓝航线的live2d模型。本篇介绍在网页里引入moc3文件的方法

示例网站1
示例网站2
示例网站3

把游戏角色添加到自己的博客/网站作为看板，附带鼠标点击/触碰效果，效果截图如下

  • demo1
    在这里插入图片描述

  • demo2在这里插入图片描述

  • demo3
    在这里插入图片描述
    demo4
    在这里插入图片描述

  • demo5
    在这里插入图片描述

引入方法、更多角色模型请参考原项目文档

代码示例

复制这段代码保存到空的html文件中，在浏览器打开即可看到效果

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title></
最低0.47元/天 解锁文章
Hexo+live2d | 如何把live2d老婆放进自己的博客
m0_62976227的博客
03-06 1345
注意，由于hexo-g会覆盖原来的index.html，故而第6步操作需要在每次generate对index.html进行重新生成后都做一遍，比较麻烦，但我暂时没找到什么好方法。你的github名字/AzurLaneL2DViewer@你在5中的release版本命名/assets/`，role修改为3里面建立的文件夹名【同模型名】clone你fork的仓库到本地，然后在asset文件夹中建立一个文件夹，将你的模型文件拖进去，并组织成如下目录结构。在你的博客根目录下的public中，将。
live2d-moc3:live2d, 适用于加载新版moc3游戏角色模型(碧蓝航线)。附带使用例子
05-23
live2d-moc3 项目基于修改 更新日志： 8.20 已经能用了 8.22 添加移动端(手机)是否显示的选项 Demo 网页全屏示例： 博客看板示例： 可选参数 参数 Type Default Description width 可选[Number] 800 宽度，单位为px height 可选[Number] 600 长度，单位为px top,right,bottom,left 可选[String] "" 模型到浏览器各边框的距离。选择两个即可定位，如定位在左下角：left: &#39;0px&#39; , bottom: &#39;0px&#39; basePath 必须[String] "" live2d模型资源库的路径 role 必须[String] "" 角色模型对应的文件夹（即basePath下的文件夹 background 可选[String] "" 背景图片，可填入图片外链 opacity 可选[N
Hexo助手：轻松集成Live2D看板娘插件安装与配置指南
gitblog_09523的博客
09-13 635
Hexo助手：轻松集成Live2D看板娘插件安装与配置指南 hexo-helper-live2d Add the Sseexxyyy live2d to your hexo! 项目地址: https://gitcode.com/g...
开源项目 AzurLaneLive2DExtract 亮点详解
最新发布
gitblog_01154的博客
04-23 382
开源项目 AzurLaneLive2DExtract 亮点详解 AzurLaneLive2DExtract OBSOLETE - see readme / 碧蓝航线Live2D提取 项目地址: https://gitcode.co...
web中引入live2d的moc3模型
qq_39123467的博客
07-15 2343
先跟着官方sdk调试一遍，明白哪些是必改项，哪些是可操作参数，放入自己的模型，看看能否成功加载这里先让大家看个最终效果，以明白本次操作的目的性项目根目录。
在Hexo博客上添加可爱的Live 2D模型(.moc/.moc3)
Empty_CityJK的博客
10-03 1484
本文介绍了两种可在Hexo博客上添加Live2d的插件。目前大多数教程只教了如何添加较老版本的模型，但这远远无法满足拥有更新模型的朋友。如果你还在为自己的Live 2d模型无法成功添加进自己的博客小窝的话 不妨来看看本篇博客吧！
网站上部署Live2D模型（moc3格式）
Aruko的博客
11-22 7424
文章目录前言一、准备工作二、具体步骤1.将lappdelegate.ts文件里的initialize函数修改成如下所示:2.在lappmodel.ts里改文件夹路径、model3.json文件名、.moc3文件名、texture路径总结 前言 这里只讲已经有了Live2D模型之后如何部署到网站上 完全的自己动手制作并部署一个Live2D项目实在是太麻烦了，想要零基础一小时，两小时搞定是非常困难的，因为涉及的东西太多了，完全自己做要学相当多的东西：学PS切图、学Live2DCubsim做模型、学html.
live2d内嵌html,live2d web端加载moc3模型
weixin_33572836的博客
06-07 1175
将模型文件放在github上面用jsdelivr会出现WebGL加载跨域纹理出错的问题查看详细错误后会发现问题出在这里，接着打开lapptexturemanager.ts文件，在这里加上img.crossOrigin = '';人物没有布满整个canvas导致人物相对较小的问题修改Framework\src\math\cubismmodelmatrix.ts里面的this.setHeight，原来...
live2d（Web SDK 4.x）Web看板娘进阶
qq_37735413的博客
08-05 4784
接上篇文章 Live2D(WebSDK 4.X)网页看板娘设置（一） 欢迎大家阅读本篇教程 该篇教程为进阶版的看板娘设置教程，阅读完后可以极大程度的自定义你的看板娘项目。 教程内容： 去掉canvas中的背景图案和切换模型按钮，并将背景设置为透明 新增配置类，对需要自定义的属性进行修改，同时在模型中新建mapper 设置模型放大倍率 修改鼠标交互方式 适配模型的控制属性，自定义模型加载的位置 模块化该项目 1.修改canvas绘制的内容 打开【Sample\TypeScript\Demo\src\lap
web中引入live2d的moc3模型-（调整样式）
qq_39123467的博客
07-18 1044
基本所有的样式都在src文件夹下的ts文件中，而我们每次修改样式时，记得重新build，已让页面重新加载修改打包后的js文件。默认是黑色，这里我改成了透明。
Hexo 博客添加各种有趣又有用的小功能
小红妹
07-18 7665
评论功能 Gitment 来必力 Gitment ​ Gitment 是作者实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。 中文官方文档|项目地...
在线live2d使用
chen_227的博客
11-18 608
为网站增加live2d看板娘moc3类型是cubism新版模型的类型，而旧版模型的类型是moc模型。
Hexo（sakura）添加live2d看板动画（可对话，换装互动）
cungudafa的博客
02-12 7959
一、live2d简介 Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。 示例：原博大大官网 根据鼠标热键进行互动 二、使用教程 hexo-helper-live2d中...
moc 配置文件
看写写
08-10 2507
FATAL_ERROR: Configuration file is not secure: /home/joe/.moc/config 原文问题原因； 安全问题，config 文件能写的只能是所有者，而我们 一般创建的config 则组也能写所以把组的写的权限去掉就行了 chmod g-w ./moc/config
OML2D新手教程(CDN引入JS）&Moc3 model3.json文件配置
ZENGYIS的博客
12-14 832
接口部分//其他公共选项配置});dockedPosition: "left", //停靠位置左边/右边1,sayHello:!0,},stageStyle: D2, //预制css，参考文末models: [], //模型配置，主要更改这个statusBar: { //右边那个状态条disable:!1,switchingMessage: "正在切换",loadingMessage: "加载中",loadSuccessMessage: "加载成功",
moc文件 如何生成的
证券指标的专栏
01-07 2059
合并代码，解决冲突后， 如果发现某个类的moc文件没有生成，或者 发现某个类的moc文件，没有出现在GenerateFiles文件夹下面，而是出现在了SourceFiles文件下面。 那么，出现两种问题的原因就是：解决冲突的时候，*.vcproj文件出错了。 *.vcproj文件中，关于moc文件的配置，有两种，一种是debug，一种是release。 只有cpp文件，才会
为hexo添加live2d看板娘
qq_43553185的博客
10-26 434
title: 为hexo添加看板娘 declare: true cover: img/top_img.jpg 为hexo添加看板娘 1.准备工作 //检查博客主目录下的package.json下是否有"hexo-helper-live2d": "^3.0.3"依赖 //有的话可以先卸载 npm uninstall hexo-helper-live2d 2.安装依赖 //在hexo根目录下用Git执行命令 npm inatall --save hexo-helper-live2d //安装过程中可能会遇到.
Hexo添加Live2D看板娘最新教程
ZJC'博客
05-26 3530
文章目录前言介绍Live2D看板娘添加Live2D看板娘准备工作安装依赖下载model文件添加live2d看板娘到hexo查看效果发布 前言 上次我们搭建了hexo博客，今天来添加一个Live2D看板娘。在网上看了一些教程，不过hexo更新之后更简单，以前的一些教程有些过时了，所以想写一篇更新的教程。 介绍 Live2D Live2D是一种应用于电子游戏的绘图渲染技术，由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似二维图像的三维模型，换句话说就是2D的素材实现一定程度的3D
Hexo-Next主题搭建个人博客最新配置教程！
Bennnnnnn的博客
11-23 5955
最新Hexo-Next主题博客搭建教程，涵盖个人博客搭建的所需大部分功能，如果你也想要基于Hexo搭建个人博客，绝对不能错过这篇教程！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值