'commit'
This commit is contained in:
@@ -1,16 +1,86 @@
|
|||||||
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>看板娘切换示例</title>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
|
||||||
<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: "汪喵"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化看板娘
|
||||||
|
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({
|
L2Dwidget.init({
|
||||||
"model": {
|
"model": {
|
||||||
"jsonPath": "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
|
"jsonPath": model.jsonPath,
|
||||||
"scale": 1
|
"scale": 1
|
||||||
},
|
},
|
||||||
"display": {
|
"display": {
|
||||||
"position": "right",
|
"position": "right",
|
||||||
"width": 150,
|
"width": 150,
|
||||||
"height": 300,
|
"height": 300,
|
||||||
"hOffset": 0,
|
"hOffset": 0,
|
||||||
"vOffset": -20
|
"vOffset": -20
|
||||||
},
|
},
|
||||||
"mobile": {
|
"mobile": {
|
||||||
@@ -24,9 +94,23 @@
|
|||||||
"dialog": {
|
"dialog": {
|
||||||
"enable": true,
|
"enable": true,
|
||||||
"script": {
|
"script": {
|
||||||
'tap body': '你好啊,我是理想小智。',
|
'tap body': `你好啊,我是${model.name}。`,
|
||||||
'tap face': '有什么问题或者烦心事都可以和我聊聊~',
|
'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>
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
Reference in New Issue
Block a user