live2d 在线切换卡通形象

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>live2d</title>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script></head>

<script type="text/javascript" src="live2dw/lib/L2Dwidget.min.js"></script> 
<!-- <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> -->
<div style="font-size: 24px">
    <span>在线选择：</span>
    <a href="javascript:show('shizuku')">shizuku</a>
    <a href="javascript:show('hibiki')">hibiki</a>
    <a href="javascript:show('z16')">z16</a>
    <a href="javascript:show('haruto')">haruto</a>
    <a href="javascript:show('koharu')">koharu</a>
    <a href="javascript:show('izumi')">izumi</a>
    <a href="javascript:show('tsumiki')">tsumiki</a>
    <a href="javascript:show('miku')">miku</a>
     <a href="javascript:show('wanko')">wanko</a>
     <a href="javascript:show('unitychan')">unitychan</a>
     <a href="javascript:show('tororo')">白猫</a>
    <a href="javascript:show('hijiki')">黑猫</a>
</div>
<script language="javascript" type="text/javascript">
 	
    var hibiki = 'https://unpkg.com/[email protected]/assets/hibiki.model.json';
    /* var shizuku = 'https://unpkg.com/[email protected]/assets/shizuku.model.json';
    var z16 = 'https://unpkg.com/[email protected]/assets/z16.model.json';
    var haruto = "https://unpkg.com/[email protected]/assets/haruto.model.json";
    var izumi = "https://unpkg.com/[email protected]/assets/izumi.model.json";
	var tsumiki = "https://unpkg.com/[email protected]/assets/tsumiki.model.json"; */
    function show(obj) {
        config.model.jsonPath = "https://unpkg.com/live2d-widget-model-"+obj+"@1.0.5/assets/"+obj+".model.json";
        L2Dwidget.init(config);
    }
    
    
    // 配置文件官方API: https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
    var config = {
        model: {
            jsonPath: '', // xxx.model.json 的路径
        },
        display: {
            "position": "right", //看板娘的表现位置left
            "width": 200,  //小萝莉的宽度
            "height": 450, //小萝莉的高度
            "hOffset": 0,
            "vOffset": -20
        },
        mobile: {
            show: true, // 是否在移动设备上显示
            scale: 1, // 移动设备上的缩放
            motion: true, // 移动设备是否开启重力感应
        },
        react: {
            opacityDefault: 1, // 默认透明度
            opacityOnHover: 1, // 鼠标移上透明度
        },
    }
    window.onload = function () {
        show("hibiki");
    }
    
    
    
    
    
    
    
    
    
    
//https://www.cnblogs.com/ButterflyEffect/p/10839613.html  查看信息的一个地址
 /* L2Dwidget.init({
        "model": {
            //jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
            //jsonPath: "https://unpkg.com/[email protected]/assets/shizuku.model.json",
            jsonPath: "https://unpkg.com/[email protected]/assets/hibiki.model.json",
            //jsonPath: "https://unpkg.com/[email protected]/assets/z16.model.json",
            "scale": 1
        },
        "display": {
            "position": "left", //看板娘的表现位置
            "width": 150,  //小萝莉的宽度
            "height": 350, //小萝莉的高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    }); */


</script>
</head>
<body>

</body>
</html>
码奴生来只知道前进~
发布了72 篇原创文章 · 获赞 3 · 访问量 2万+
私信关注
live2d 在线切换卡通形象

猜你喜欢
