2025-08-22 07:54:15 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2025-08-22 07:54:29 +08:00
|
|
|
<title>学伴切换示例</title>
|
2025-08-22 07:54:15 +08:00
|
|
|
<style>
|
|
|
|
|
.model-selector {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 20px;
|
|
|
|
|
left: 20px;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
select {
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="model-selector">
|
|
|
|
|
<label for="model-select">选择学伴:</label>
|
|
|
|
|
<select id="model-select">
|
|
|
|
|
<option value="shizuku">小智</option>
|
|
|
|
|
<option value="koharu">小荷</option>
|
|
|
|
|
<option value="wanko">汪喵</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2025-08-22 07:30:37 +08:00
|
|
|
|
2025-08-22 07:54:15 +08:00
|
|
|
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
// 模型配置
|
|
|
|
|
const models = {
|
|
|
|
|
shizuku: {
|
|
|
|
|
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
|
|
|
|
|
name: "志津子"
|
|
|
|
|
},
|
|
|
|
|
koharu: {
|
|
|
|
|
jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
|
|
|
|
|
name: "小春日和"
|
|
|
|
|
},
|
|
|
|
|
wanko: {
|
|
|
|
|
jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",
|
|
|
|
|
name: "汪喵"
|
2025-08-22 07:30:37 +08:00
|
|
|
}
|
2025-08-22 07:54:15 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 获取URL参数
|
|
|
|
|
function getUrlParam(name) {
|
|
|
|
|
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
|
|
|
|
|
const r = window.location.search.substr(1).match(reg);
|
|
|
|
|
if (r != null) return unescape(r[2]);
|
|
|
|
|
return null;
|
2025-08-22 07:30:37 +08:00
|
|
|
}
|
2025-08-22 07:54:15 +08:00
|
|
|
|
|
|
|
|
// 初始化看板娘
|
|
|
|
|
function initL2Dwidget() {
|
|
|
|
|
// 获取模型ID (从URL参数或默认)
|
|
|
|
|
const modelId = getUrlParam('id') || 'shizuku';
|
|
|
|
|
const model = models[modelId] || models.shizuku;
|
|
|
|
|
|
|
|
|
|
// 设置下拉框选中项
|
|
|
|
|
document.getElementById('model-select').value = modelId;
|
|
|
|
|
console.log('加载模型:', model.name, model.jsonPath);
|
|
|
|
|
|
|
|
|
|
// 初始化模型
|
|
|
|
|
L2Dwidget.init({
|
|
|
|
|
"model": {
|
|
|
|
|
"jsonPath": model.jsonPath,
|
|
|
|
|
"scale": 1
|
|
|
|
|
},
|
|
|
|
|
"display": {
|
|
|
|
|
"position": "right",
|
|
|
|
|
"width": 150,
|
|
|
|
|
"height": 300,
|
|
|
|
|
"hOffset": 0,
|
|
|
|
|
"vOffset": -20
|
|
|
|
|
},
|
|
|
|
|
"mobile": {
|
|
|
|
|
"show": true,
|
|
|
|
|
"scale": 0.5
|
|
|
|
|
},
|
|
|
|
|
"react": {
|
|
|
|
|
"opacityDefault": 0.8,
|
|
|
|
|
"opacityOnHover": 1
|
|
|
|
|
},
|
|
|
|
|
"dialog": {
|
|
|
|
|
"enable": true,
|
|
|
|
|
"script": {
|
|
|
|
|
'tap body': `你好啊，我是${model.name}。`,
|
|
|
|
|
'tap face': '有什么问题或者烦心事都可以和我聊聊~',
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 监听下拉框变化
|
|
|
|
|
document.getElementById('model-select').addEventListener('change', function() {
|
|
|
|
|
const modelId = this.value;
|
|
|
|
|
console.log('切换模型至:', modelId);
|
|
|
|
|
// 更新URL参数并刷新页面
|
|
|
|
|
window.location.search = '?id=' + modelId;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 页面加载完成后初始化
|
|
|
|
|
window.onload = initL2Dwidget;
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
