L2Dwidget 设置对话，改变动画

最新推荐文章于 2025-11-12 15:06:02 发布

原创最新推荐文章于 2025-11-12 15:06:02 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #servlet #前端

该博客介绍了如何在网页中集成Live2D模型，以增加用户的互动体验。通过引用不同的人物模型，如Shizuku，实现了人物的动态展示。同时，结合一言API，每隔20秒会显示一句随机的句子，增强了网页的趣味性和互动性。此外，还设置了针对不同触摸区域的响应对话，如触摸头部和身体时的反馈。此技术适用于前端开发，特别是希望提升用户体验的网站设计。

HTML展现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
        // 其他可选的模型： 
        // 	小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
        // 	萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json 
        // 	小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json 
        // 	小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
        // 	初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json 
    L2Dwidget.init({
		"model":{jsonPath:"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json","scale": 1,"hHeadPos": 0.5, "vHeadPos": 0.618 },
		"dialog":{
          enable: true,
          script: {
			//每20s，显示一言（调用一言Api返回的句子）
			'every idle 20s': '$hitokoto$',
			//触摸到class='star'对象
			'hover .star': '星星在天上而你在我心里 (*/ω＼*)',
			//触摸到身体
			'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',
			//触摸到头部
			'tap face': '~~'
          }
        },
		"mobile": { "show": true, scale: 0.5 },
		"display": {
        "superSample": 2,
        "width": 200,
        "height": 400,
        "position": "right",
         "hOffset": 0,
        "vOffset": 0
        }
     });
</script>