网页简单Live2D动画插入

17 篇文章 0 订阅
8 篇文章 0 订阅

《Live2D》是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用,缺点是Live 2D人物无法大幅度转身,开发商正设法让该技术可显示360度图像。

效果
在这里插入图片描述

代码

 <html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title> </title>

    <script type="text/javascript" src="http://blog.szwyll.com/wp-content/themes/JieStyle-Two/js/jquery.min.js"></script>
</head>

<body>
    <header id="header">
        <div class="waifu" style="transition: all 0.3s ease-in-out 0s;">
            <div class="waifu-tips" style="width: 150px; height: 272px; top: -10px; font-size: 14px; opacity: 0;">干嘛呢你,快把手拿开</div><canvas id="live2d" class="live2d" width="192" height="240"></canvas>
            <div class="waifu-tool" style="font-size: 14px;"><span class="fui-home" style="line-height: 16px; display: none;"></span> <span class="fui-chat" style="line-height: 16px;"></span> <span class="fui-eye" style="line-height: 16px;"></span> <span class="fui-user" style="line-height: 16px;"></span>                <span class="fui-photo" style="line-height: 16px;"></span> <span class="fui-info-circle" style="line-height: 16px;"></span> <span class="fui-cross" style="line-height: 16px; display: none;"></span></div>
        </div>

    </header>

    <link rel="stylesheet" type="text/css" href="https://live2d.szwyll.com/assets/waifu.min.css?v=1.4.2">
    <script type="text/javascript" src="https://live2d.szwyll.com/assets/waifu-tips.js?v=1.4.2"></script>
    <script type="text/javascript" src="https://live2d.szwyll.com/assets/live2d.min.js?v=1.0.5"></script>
    <script type="text/javascript">
        /* 内置 waifu-tips.json */
        initModel({
            "waifu": {
                "console_open_msg": ["哈哈,你打开了控制台,是想要看看我的秘密吗?"],
                "copy_message": ["你都复制了些什么呀,转载要记得加上出处哦"],
                "screenshot_message": ["照好了嘛,是不是很可爱呢?"],
                "hidden_message": ["我们还能再见面的吧…"],
                "load_rand_textures": ["我还没有其他衣服呢", "我的新衣服好看嘛"],
                "hour_tips": {
                    "t5-7": ["早上好!一日之计在于晨,美好的一天就要开始了"],
                    "t7-11": ["上午好!工作顺利嘛,不要久坐,多起来走动走动哦!"],
                    "t11-14": ["中午了,工作了一个上午,现在是午餐时间!"],
                    "t14-17": ["午后很容易犯困呢,今天的运动目标完成了吗?"],
                    "t17-19": ["傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~"],
                    "t19-21": ["晚上好,今天过得怎么样?"],
                    "t21-23": ["已经这么晚了呀,早点休息吧,晚安~"],
                    "t23-5": ["你是夜猫子呀?这么晚还不睡觉,明天起的来嘛"],
                    "default": ["嗨~ 快来逗我玩吧!"]
                },
                "referrer_message": {
                    "localhost": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
                    "baidu": ["Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗?"],
                    "so": ["Hello! 来自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗?"],
                    "google": ["Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
                    "default": ["Hello! 来自 <span style=\"color:#0099cc;\">", "</span> 的朋友"],
                    "none": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "]
                },
                "referrer_hostname": {        
                    "blog.szwyll.com": ["小强coding"]
                },
                "model_message": {
                    "1": ["来自 Potion Maker 的 Pio 酱 ~"],
                    "2": ["来自 Potion Maker 的 Tia 酱 ~"]
                },
                "hitokoto_api_message": {
                    "lwl12.com": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>", ",是 <span style=\"color:#0099cc;\">{creator}</span> 投稿的", "。"],
                    "fghrsh.net": ["这句一言出处是 <span style=\"color:#0099cc;\">『{source}』</span>,是 <span style=\"color:#0099cc;\">FGHRSH</span> 在 {date} 收藏的!"],
                    "jinrishici.com": ["这句诗词出自 <span style=\"color:#0099cc;\">《{title}》</span>,是 {dynasty}诗人 {author} 创作的!"],
                    "hitokoto.cn": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>,是 <span style=\"color:#0099cc;\">{creator}</span> 在 hitokoto.cn 投稿的。"]
                }
            },
            "mouseover": [{
                "selector": ".container a[href^='http']",
                "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么?"]
            }, {
                "selector": ".fui-home",
                "text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦"]
            }, {
                "selector": ".fui-chat",
                "text": ["一言一语,一颦一笑。一字一句,一颗赛艇。"]
            }, {
                "selector": ".fui-eye",
                "text": ["嗯··· 要切换 看板娘 吗?"]
            }, {
                "selector": ".fui-user",
                "text": ["喜欢换装 Play 吗?"]
            }, {
                "selector": ".fui-photo",
                "text": ["要拍张纪念照片吗?"]
            }, {
                "selector": ".fui-info-circle",
                "text": ["这里有关于我的信息呢"]
            }, {
                "selector": ".fui-cross",
                "text": ["你不喜欢我了吗..."]
            }, {
                "selector": "#tor_show",
                "text": ["翻页比较麻烦吗,点击可以显示这篇文章的目录呢"]
            }, {
                "selector": "#comment_go",
                "text": ["想要去评论些什么吗?"]
            }, {
                "selector": "#night_mode",
                "text": ["深夜时要爱护眼睛呀"]
            }, {
                "selector": "#qrcode",
                "text": ["手机扫一下就能继续看,很方便呢"]
            }, {
                "selector": ".comment_reply",
                "text": ["要吐槽些什么呢"]
            }, {
                "selector": "#back-to-top",
                "text": ["回到开始的地方吧"]
            }, {
                "selector": "#author",
                "text": ["该怎么称呼你呢"]
            }, {
                "selector": "#mail",
                "text": ["留下你的邮箱,不然就是无头像人士了"]
            }, {
                "selector": "#url",
                "text": ["你的家在哪里呢,好让我去参观参观"]
            }, {
                "selector": "#textarea",
                "text": ["认真填写哦,垃圾评论是禁止事项"]
            }, {
                "selector": ".OwO-logo",
                "text": ["要插入一个表情吗"]
            }, {
                "selector": "#csubmit",
                "text": ["要[提交]^(Commit)了吗,首次评论需要审核,请耐心等待~"]
            }, {
                "selector": ".ImageBox",
                "text": ["点击图片可以放大呢"]
            }, {
                "selector": "input[name=s]",
                "text": ["找不到想看的内容?搜索看看吧"]
            }, {
                "selector": ".previous",
                "text": ["去上一页看看吧"]
            }, {
                "selector": ".next",
                "text": ["去下一页看看吧"]
            }, {
                "selector": ".dropdown-toggle",
                "text": ["这里是菜单"]
            }, {
                "selector": "c-player a.play-icon",
                "text": ["想要听点音乐吗"]
            }, {
                "selector": "c-player div.time",
                "text": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"]
            }, {
                "selector": "c-player div.volume",
                "text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"]
            }, {
                "selector": "c-player div.list-button",
                "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"]
            }, {
                "selector": "c-player div.lyric-button",
                "text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"]
            }, {
                "selector": ".waifu #live2d",
                "text": ["干嘛呢你,快把手拿开", "鼠…鼠标放错地方了!"]
            }],
            "click": [{
                "selector": ".waifu",
                "text": [
                    "是…是不小心碰到了吧",
                    "萝莉控是什么呀",
                    "你看到我的小熊了吗",
                    "再摸的话我可要报警了!⌇●﹏●⌇",
                    "110吗,这里有个变态一直在摸我(ó﹏ò。)"
                ]
            }],
            "seasons": [{
                "date": "01/01",
                "text": ["<span style=\"color:#0099cc;\">元旦</span>了呢,新的一年又开始了,今年是{year}年~"]
            }, {
                "date": "02/14",
                "text": ["又是一年<span style=\"color:#0099cc;\">情人节</span>,{year}年找到对象了嘛~"]
            }, {
                "date": "03/08",
                "text": ["今天是<span style=\"color:#0099cc;\">妇女节</span>!"]
            }, {
                "date": "03/12",
                "text": ["今天是<span style=\"color:#0099cc;\">植树节</span>,要保护环境呀"]
            }, {
                "date": "04/01",
                "text": ["悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节,不要被骗了哦~</span>"]
            }, {
                "date": "05/01",
                "text": ["今天是<span style=\"color:#0099cc;\">五一劳动节</span>,计划好假期去哪里了吗~"]
            }, {
                "date": "06/01",
                "text": ["<span style=\"color:#0099cc;\">儿童节</span>了呢,快活的时光总是短暂,要是永远长不大该多好啊…"]
            }, {
                "date": "09/03",
                "text": ["<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>,铭记历史、缅怀先烈、珍爱和平、开创未来。"]
            }, {
                "date": "09/10",
                "text": ["<span style=\"color:#0099cc;\">教师节</span>,在学校要给老师问声好呀~"]
            }, {
                "date": "10/01",
                "text": ["<span style=\"color:#0099cc;\">国庆节</span>,新中国已经成立69年了呢"]
            }, {
                "date": "11/05-11/12",
                "text": ["今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"]
            }, {
                "date": "12/20-12/31",
                "text": ["这几天是<span style=\"color:#0099cc;\">圣诞节</span>,主人肯定又去剁手买买买了~"]
            }]
        });
    </script>

</body>

</html>


  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在网页上添加Live2D,需要先准备好以下文件: 1. Live2D Core SDK:下载地址为 https://live2d.github.io/#js-core。 2. Live2D 模型文件:可以在网络上搜索到各种免费和付费的Live2D模型,下载后需要将其解压缩到本地。 3. jQuery 库:如果网页中已经用到了jQuery,可以省略这一步。 接下来,按照以下步骤逐步操作: 1. 创建一个 HTML 文件,引入 jQuery 和 Live2D Core SDK: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@live2d/[email protected]/dist/Live2DCubismCore.min.js"></script> </head> <body> </body> </html> ``` 2. 在 `body` 中添加一个 `canvas` 元素: ``` <canvas id="live2d" width="300" height="400"></canvas> ``` 3. 在 JavaScript 中加载模型文件: ``` var model; function loadModel() { var modelJson = "模型文件的路径/model.json"; var modelDir = "模型文件的路径/"; Live2D.core.readModel(modelJson, function (buf) { model = Live2D.core.createModel(buf); model.loadTextures(modelDir, function () { draw(); }); }); } ``` 4. 在 `draw` 函数中绘制模型: ``` function draw() { var canvas = document.getElementById("live2d"); if (canvas.getContext) { var gl = canvas.getContext("webgl"); model.setGL(gl); gl.clearColor(0.0, 0.0, 0.0, 0.0); gl.clear(gl.COLOR_BUFFER_BIT); model.draw(); } } ``` 5. 最后调用 `loadModel` 函数即可加载模型并在网页中显示Live2D。 ``` $(document).ready(function () { loadModel(); }); ``` 以上就是给网页添加Live2D的基本步骤,具体实现还需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值