JavaWeb项目中添加live2d模型

最新推荐文章于 2024-05-19 09:43:50 发布

小关同学喜欢吃汉堡

最新推荐文章于 2024-05-19 09:43:50 发布

阅读量1.7k

点赞数 1

分类专栏：个人项目 live2d 文章标签：服务器前端运维

本文链接：https://blog.csdn.net/weixin_45784666/article/details/128756596

版权

个人项目同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

live2d

1 篇文章 0 订阅

订阅专栏

前言：之前个人博客中配置的live2d模型的API失效了，所以重新折腾了一下，在自己服务器配置了 live2d 的 API，在此记录一下

JavaWeb项目中添加live2d模型

之前在个人博客中使用的 live2d 模型一直用的是网上一个大佬免费提供的 API ，这段时间发现这个 API 失效了，模型显示不出来，所以想着在自己的服务器上配置好 live2d 看板娘需要的所有文件，实现在项目中只需要引用一个 js 文件就可以在网页上显示看板娘。

前置条件

有云服务器一台，安装了宝塔面板
最好有一个域名，用来创建站点

后端API搭建

首先，下载好 Live2D API 的源代码，然后在宝塔面板上创建一个新的站点，并把下载好的源代码放到网站相应目录下，如下图：

在这里插入图片描述

在网站根目录下创建一个文件夹 live2d ，里面存放相应文件

在这里插入图片描述

最后，在网站的 Nginx 配置文件中允许跨域访问：

server
{
	...
    
    # 允许 所有头部 所有域 所有方法
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Access-Control-Allow-Methods' '*';
    # OPTIONS 直接返回204
    if ($request_method = 'OPTIONS') {
      return 204;
    }
    
    ...
}

如下图：

在这里插入图片描述

看板娘前端基本配置

首先，下载前端相应的文件把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | ，然后将文件放在前面创建的 live2d 文件夹中，如下图：

在这里插入图片描述

然后，在下载下来的前端文件夹中找到autoload.js这个文件，修改里面的两处地方
1、将 live2d_path 的值修改成我们前面创建的网站的网址 + autoload.js 在网站根目录下的位置，如下：

const live2d_path = "http://test.xiaoguantongxue.com/live2d/live2d-widget/";

2、注释掉 cdnPath 这行内容并将 apiPath 修改成前面配置好的 API 的路径，如下：

apiPath: "http://test.xiaoguantongxue.com/live2d/live2d_api/"

看板娘的前端基本配置就设置好了，看板娘前端的更多设置可以参考把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | 里面的介绍。

测试

我们随便创建一个网页，如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Hello World!!!</title>
</head>
<body>
	Live2D 看板娘 / Demo
</body>
	<!--引入看板娘-->
	<script src="http://test.xiaoguantongxue.com/live2d/live2d-widget/autoload.js"></script>
</html>

打开网页，效果如下：

在这里插入图片描述

至此，看板娘成功引入前端页面，我们可以将它内置于我们的项目中了，只需要在前端引入autoload.js文件即可。

PS：这个方法缺点也是有的，就是第一次打开网页，模型的加载速度估计会比较慢，有条件的其实可以换 cdn 进行加速。。。

参考文章：
1、服务器部署静态博客和看板娘 Live2D API
2、给你的博客加个萌萌的Live2d吧～
3、Nginx跨域配置
4、在网页中添加 Live2D 看板娘

最后

为解答疑难杂问，本人联合朋友创建了一个群聊，有什么问题可以加群提问，群聊二维码在我个人博客中查看

个人博客地址：小关同学的博客

小关同学喜欢吃汉堡

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb项目中添加live2d模型

之前在个人博客中使用的 live2d 模型一直用的是网上一个大佬免费提供的 API ，这段时间发现这个 API 失效了，模型显示不出来，所以想着在自己的服务器上配置好 live2d 看板娘需要的所有文件，实现在项目中只需要引用一个 js 文件就可以在网页上显示看板娘。
复制链接

扫一扫

专栏目录