fghrsh/live2d_demo

Live2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 的前端 HTML 源码

live2d_demo's Issues

呜呜呜，主页用得了，博客页没有了

作为一个小白，没有什么插件/教程比这个更有好了，我非常喜欢！ 但是我在使用自己的模型是，只能在首页成功显示，在其他页面插件应该是加载了，点击区域也有点击效果，但是模型没加载，所以看不见人。用默认的模型就正常，为什么自己的模型就不行了呢？ 报错：likeumr.com/:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at live2d.js?ver=5.8:formatted:14670 at live2d.js?ver=5.8:formatted:9536 at XMLHttpRequest.i.onload (live2d.js?ver=5.8:formatted:9522) 我真的好像用小此的看板娘啊，希望大佬能指点一下，是模型自己的问题吗？可是首页成功加载了啊，我晕。

主页log

JQMIGRATE: Migrate is installed, version 3.3.2
live2d.js?ver=5.8:1 Live2D 2.1.00_1
live2d.js?ver=5.8:1 profile : Desktop
live2d.js?ver=5.8:1 [PROFILE_NAME] = Desktop
live2d.js?ver=5.8:1 [USE_ADJUST_TRANSLATION] = false
live2d.js?ver=5.8:1 [USE_CACHED_POLYGON_IMAGE] = false
live2d.js?ver=5.8:1 [EXPAND_W] = 2
waifu-tips.js?ver=5.8:5 /x/WP-Live2D 1.7.7
likeumr.com/:93 [Intervention]Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113
live2d.js?ver=5.8:1 [CSM][I]Live2D Cubism Core version: 04.01.0000 (67174400)

live2d.js?ver=5.8:1 [CSM][I]CubismFramework.startUp() is complete.

live2d.js?ver=5.8:1 [CSM][I]CubismFramework.initialize() is complete.

live2dcubismcore.min.js:9 Live2D Cubism SDK Core Version 4.1.0

其他页面（加载失败）log

JQMIGRATE: Migrate is installed, version 3.3.2
live2d.js?ver=5.8:1 Live2D 2.1.00_1
live2d.js?ver=5.8:1 profile : Desktop
live2d.js?ver=5.8:1 [PROFILE_NAME] = Desktop
live2d.js?ver=5.8:1 [USE_ADJUST_TRANSLATION] = false
live2d.js?ver=5.8:1 [USE_CACHED_POLYGON_IMAGE] = false
live2d.js?ver=5.8:1 [EXPAND_W] = 2
waifu-tips.js?ver=5.8:5 /x/WP-Live2D 1.7.7
likeumr.com/:89 [Intervention]Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113
VM930:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse ()
at live2d.js?ver=5.8:1
at live2d.js?ver=5.8:1
at XMLHttpRequest.i.onload (live2d.js?ver=5.8:1)
(匿名) @ live2d.js?ver=5.8:1
(匿名) @ live2d.js?ver=5.8:1
i.onload @ live2d.js?ver=5.8:1
load(异步)
loadBytes @ live2d.js?ver=5.8:1
loadString @ live2d.js?ver=5.8:1
window.loadlive2d @ live2d.js?ver=5.8:1
loadModel @ waifu-tips.js?ver=5.8:170
initModel @ waifu-tips.js?ver=5.8:144
(匿名) @ (索引):736
e @ jquery.min.js?ver=3.6.0:2
t @ jquery.min.js?ver=3.6.0:2
setTimeout(异步)
(匿名) @ jquery.min.js?ver=3.6.0:2
c @ jquery.min.js?ver=3.6.0:2
fireWith @ jquery.min.js?ver=3.6.0:2
fire @ jquery.min.js?ver=3.6.0:2
c @ jquery.min.js?ver=3.6.0:2
fireWith @ jquery.min.js?ver=3.6.0:2
ready @ jquery.min.js?ver=3.6.0:2
B @ jquery.min.js?ver=3.6.0:2

使用wordpress插件 live2d

使用live2d模型：https://www.bilibili.com/video/BV1Nh411r7XD/?spm_id_from=333.788.recommend_more_video.4

文本不显示,而且点击工具栏中选项没有效果

文本不显示,而且点击工具栏中选项没有效果,求救c⌒っﾟДﾟ)っ

优秀

老哥，优秀啊，找了好久live2d了,感谢分享

还有一个小问题

还有一个小问题，就是result.waifu.hour_tips.t23-5这些命名好像没有被正确识别成变量，我觉得是不是改成result.waifu.hour_tips.t23_5之类的才可以。

live2d_demo/assets/waifu-tips.js

Lines 263 to 272 in 2ba297a

	var now = (new Date()).getHours();
	if (now > 23 || now <= 5) text = getRandText(result.waifu.hour_tips.t23-5);
	else if (now > 5 && now <= 7) text = getRandText(result.waifu.hour_tips.t5-7);
	else if (now > 7 && now <= 11) text = getRandText(result.waifu.hour_tips.t7-11);
	else if (now > 11 && now <= 14) text = getRandText(result.waifu.hour_tips.t11-14);
	else if (now > 14 && now <= 17) text = getRandText(result.waifu.hour_tips.t14-17);
	else if (now > 17 && now <= 19) text = getRandText(result.waifu.hour_tips.t17-19);
	else if (now > 19 && now <= 21) text = getRandText(result.waifu.hour_tips.t19-21);
	else if (now > 21 && now <= 23) text = getRandText(result.waifu.hour_tips.t21-23);
	else text = getRandText(result.waifu.hour_tips.default);

live2d_demo/assets/waifu-tips.json

Lines 8 to 18 in 2ba297a

	"hour_tips": {
	"t5-7": ["早上好！一日之计在于晨，美好的一天就要开始了"],
	"t7-11": ["上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"],
	"t11-14": ["中午了，工作了一个上午，现在是午餐时间！"],
	"t14-17": ["午后很容易犯困呢，今天的运动目标完成了吗？"],
	"t17-19": ["傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~"],
	"t19-21": ["晚上好，今天过得怎么样？"],
	"t21-23": ["已经这么晚了呀，早点休息吧，晚安~"],
	"t23-5": ["你是夜猫子呀？这么晚还不睡觉，明天起的来嘛"],
	"default": ["嗨~ 快来逗我玩吧！"]
	},

一个小问题

你好，我想问下这里是不是当live2d_settings.homePageUrl == 'auto'时并没有进行赋值操作，只是做了判断？我觉得应该是live2d_settings.homePageUrl = live2d_settings.homePageUrl == 'auto' ? window.location.protocol+'//'+window.location.hostname+'/' : live2d_settings.homePageUrl;

live2d_demo/assets/waifu-tips.js

Line 154 in cbd64c3

live2d_settings.homePageUrl == 'auto' ? window.location.protocol+'//'+window.location.hostname+'/' : live2d_settings.homePageUrl;

waifu-tips.js配置无效

重现步骤：
修改waifu-tips.js
live2d_settings['modelAPI'] == '//XXX:8083/'; //这个接口用postman测试get /add返回和原接口一样，接口没问题
live2d_settings['canTurnToHomePage'] = false;
实际结果：
chrome network 请求（Request URL: ）仍是从http://live2d.fghrsh.net/api请求资源
页面工具栏仍有主页按钮，要hack autoload.js才能去掉

问一下关于后端的问题

对于后端的依赖只有加载模型吗，使用其他的功能不用依靠后端？

在 Network 中看到很多重复API请求

Issue

在页面空闲时，会连续不断地请求 https://live2d.fghrsh.net/api/model/....mtn，导致自己博客的进度条异常闪动，也可能会增加 @fghrsh 的服务器的压力。

Workaround

我目前的解决方法是修改 live2d.js 里的 loadBytes 方法，记录相同请求的返回数据，在重复调用时直接返回之前记录的数据，测试有效。

index b69e93e..ed1aaa4 100644
@@ -3981,11 +3981,18 @@ default = o;
 	}), i.
 default = r;
 	var o = e(2);
+	var requestCache = {};
 	r.prototype.loadBytes = function(t, i) {
+		// Cache 相同的请求，减少请求数量
+		if (requestCache[t] !== undefined) {
+			i(requestCache[t]);
+			return;
+		}
 		var e = new XMLHttpRequest;
 		e.open("GET", t, !0), e.responseType = "arraybuffer", e.onload = function() {
 			switch (e.status) {
 			case 200:
+				requestCache[t] = e.response;
 				i(e.response);
 				break;
 			default: