一、前言
在过去的一段时间里，我花费了大量精力钻研three.js技术，期望能将小落同学的形象塑造为3D虚拟人，实现与用户的交互功能。为此，我对vrm/obj/fbx模型进行了反复调整，还结合mixamo的动作资源进行适配。然而，无论我如何努力，始终无法达到理想的效果。在实际展示中，模型与动作之间总是存在各种问题，比如部分动作出现模型撕裂现象，或是动作呈现出不自然的颤抖，这让我十分苦恼。经过五一假期的深思熟虑，我决定暂时搁置3D方案，转向2D领域寻求解决办法。这意味着之前为three.js所做的模型构建、动作设计、表情制作等工作可能要暂时搁置，虽然心中满是遗憾，但也只能期待未来有机会能让它们重新发挥作用。
二、选定2D解决方案
对于2D虚拟人的实现，其实有多种方案可供选择。在大型商业化直播场景中，许多虚拟人采用VTuber的解决方案。不过，该方案对硬件配置要求较高，以我目前使用的每年仅需99元的阿里云ECS服务器而言，难以满足其运行需求。综合各方面因素考虑，我最终选定了Live2D技术。它不仅技术成熟度高，而且非常适合用于基于Web的虚拟人项目开发，能够很好地满足我的需求。
三、Live2D练手
在Github平台上，有众多关于Live2D的开源项目。其中，目前仍保持活跃状态的项目之一是https://github.com/stevenjoezhang/live2d-widget。我按照该项目提供的步骤进行安装实践，发现当使用远程CDN上的配置时，系统能够正常运行。但当我尝试配置本地的autoload.js时，却始终遭遇“initWidget is not defined”的报错。尽管多次排查尝试，依然未能找到问题的根源，无奈之下只能放弃该项目。
最终，我成功运行了https://github.com/JokerPan12/live2d项目。接下来，我计划先将这个Live2D看板安装到网站上，积累经验后再应用到小落同学的项目中。
四、将Live2D看板安装到wordpress网站上
以下是详细的操作步骤：
1. 下载代码
通过执行以下命令克隆项目代码：
git clone https://gh-proxy.com/https://github.com/JokerPan12/live2d2. 安装SDK代码及live2D模型
从克隆的仓库中，选取live2d、asteroids、icons这三个目录，并上传至网站服务器。我的服务器目录结构如下：
3. 修改wordpress的theme
上传完SDK和模型后，需要对wordpress的主题进行修改，以启用live2d功能。
进入wordpress的主题目录：wp-content/themes/{正在使用的主题名}，找到其中的header.php以及footer.php文件。
修改header.php
在header.php文件的标签区域添加以下代码：
<link rel="stylesheet" href="/live2d/css/live2d.css" />
<link rel="stylesheet" href="/live2d/css/waifu.css" />修改footer.php
在footer.php文件的标签结束前的代码区域添加如下代码：
<script type="text/javascript" src="/l2d/live2d/js/jquery.min.js"></script>
<script type="text/javascript" src="/l2d/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/l2d/live2d/js/waifu-tips.js"></script>
<script type="text/javascript">
initWidget({
waifuPath: "/l2d/live2d/waifu.json",
cdnPath: "/l2d/live2d/"
});
</script>创建自定义的autoload.js
- 在主题的根目录下创建一个名为js的文件夹。
- 在js文件夹内创建autoload.js文件，文件相关信息如下：
autoload.js代码如下：
// 注意：live2d_path 参数应使用绝对路径
const live2d_path = "https://www.oddmeta.net/l2d/live2d/";
// 封装异步加载资源的方法
function loadExternalResource(url, type) {
return new Promise((resolve, reject) => {
let tag;
if (type === "css") {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
} else if (type === "js") {
tag = document.createElement("script");
tag.src = url;
}
if (tag) {
tag.onload = () => resolve(url);
tag.onerror = () => reject(url);
document.head.appendChild(tag);
}
});
}
// 加载 waifu.css live2d.js waifu-tips.js
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "css/waifu.css", "css"),
loadExternalResource(live2d_path + "css/live2d.css", "css"),
loadExternalResource(live2d_path + "js/live2d.js", "js"),
loadExternalResource(live2d_path + "js/waifu-tips.js", "js")
]).then(() => {
initWidget({
waifuPath: live2d_path + "waifu.json",
cdnPath: live2d_path
});
});
}修改functions.php代码
function load_live2d_script() {
wp_enqueue_script(
'autoloadLive2d',
get_template_directory_uri(). '/js/autoload.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'load_live2d_script');wordpress支持自定义脚本功能，我们正是利用这一机制，通过创建load_live2d_script函数来实现Live2D的加载。load_live2d_script函数的参数说明如下：
- 第一个参数是注册的脚本名称，可根据需求自行设定；
- 第二个参数是公共JS文件的路径，借助get_template_directory_uri()函数获取主题根目录路径，再拼接上js/autoload.js来指定具体文件路径；
- 第三个参数是依赖项数组，此处设置为空数组；
- 第四个参数是版本号，可随意指定；
- 第五个参数用于确定是否在页面底部加载JS文件，这里设置为true，表示在页面底部加载。
五、测试并体验一下效果
完成上述操作后，随意打开网站的一个页面并刷新，就可以看到自己的Live2D看板娘效果了。
六、下一步
后续我计划将Live2D技术集成到小落同学项目中。回顾为three.js付出的诸多努力，虽然暂时搁置，但心中仍满是感慨。
