THREE

一、前言 在过去的一段时间里，我花费了大量精力钻研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. 下载代码 通过执行以下命令克隆项目代码： 2. 安装SDK代码及live2D模型 从克隆的仓库中，选取live2d、asteroids、icons这三个目录，并上传至网站服务器。我的服务器目录结构如下： 3. 修改wordpress的theme 上传完SDK和模型后，需要对wordpress的主题进行修改，以启用live2d功能。进入wordpress的主题目录：wp-content/themes/{正在使用的主题名}，找到其中的header.php以及footer.php文件。 修改header.php 在header.php文件的标签区域添加以下代码： 修改footer.php 在footer.php文件的标签结束前的代码区域添加如下代码： 创建自定义的autoload.js autoload.js代码如下： 修改functions.php代码 wordpress支持自定义脚本功能，我们正是利用这一机制，通过创建load_live2d_script函数来实现Live2D的加载。load_live2d_script函数的参数说明如下： 五、测试并体验一下效果 完成上述操作后，随意打开网站的一个页面并刷新，就可以看到自己的Live2D看板娘效果了。 六、下一步 后续我计划将Live2D技术集成到小落同学项目中。回顾为three.js付出的诸多努力，虽然暂时搁置，但心中仍满是感慨。