Web live2d 看板娘(更新中...)

生成所需库

下载 live2d-widget.js
解压缩，执行npm install, 再执行npm run build:dev
上述操作执行完成后,会在根目录生成一个lib， lib下就是后续所需要的库

基本示例

创建一个项目, 放入生成的lib
编写html文件,并引入lib目录下的 L2Dwidget.min.js, 然后执行 L2Dwidget.init() 即可

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Live2D test</title>
    <!-- 导入L2Dwidget.min.js -->
    <script src="./lib/L2Dwidget.min.js" ></script>
</head>
<body>
    <script >
    	// 初始化
        L2Dwidget.init();
    </script>
</body>
</html>

打开浏览器，稍作等待，即可看到效果（）

最终项目结构 在这里插入图片描述

进阶示例

引入自定义模型

关于bilibili的其他模型下载, /assets/haruna/ 下，直接引入即可

一个模型应该是一个 {xxx}.model.json, 也可能是其他名字，后续需要这个文件
官方文档说模型必须放在live2d_models目录下，我试了下放其他目录也行

项目加入22模型 (该模型下的json都是(服装不同)，这里以model.default.json举例)
初始配置，设置新模型

L2Dwidget.init({
    
     
	model: {
    
    
		// 导入模型model.default.json
		jsonPath: './live2d_model/bilibili/22/model.default.json'
	}
});

最终效果

详细配置(待补充…)

L2Dwidget.init(Object userConfig)
某些属性需要模型支持，比如对话框

/**
 * userConfig
 * @param {Object}   [userConfig] User's custom config 用户自定义设置
 * @param {String}   [userConfig.model.jsonPath = ''] Path to Live2D model's main json eg. `https://test.com/miku.model.json` model主文件路径
 * @param {Number}   [userConfig.model.scale = 1] Scale between the model and the canvas 模型与canvas的缩放
 * @param {Number}   [userConfig.display.superSample = 2] rate for super sampling rate 超采样等级
 * @param {Number}   [userConfig.display.width = 150] Width to the canvas which shows the model canvas的长度
 * @param {Number}   [userConfig.display.height = 300] Height to the canvas which shows the model canvas的高度
 * @param {String}   [userConfig.display.position = 'right'] Left of right side to show 显示位置：左或右
 * @param {Number}   [userConfig.display.hOffset = 0] Horizontal offset of the canvas canvas水平偏移
 * @param {Number}   [userConfig.display.vOffset = -20] Vertical offset of the canvas canvas垂直偏移
 * @param {Boolean}  [userConfig.mobile.show = true] Whether to show on mobile device 是否在移动设备上显示
 * @param {Number}   [userConfig.mobile.scale = 0.5] Scale on mobile device 移动设备上的缩放
 * @param {String}   [userConfig.name.canvas = 'live2dcanvas'] ID name of the canvas canvas元素的ID
 * @param {String}   [userConfig.name.div = 'live2d-widget'] ID name of the div div元素的ID
 * @param {Number}   [userConfig.react.opacity = 0.7] opacity 透明度
 * @param {Boolean}  [userConfig.dev.border = false] Whether to show border around the canvas 在canvas周围显示边界
 * @param {Boolean}  [userConfig.dialog.enable = false] Display dialog 显示人物对话框
 * @param {Boolean}  [userConfig.dialog.hitokoto = false] Enable hitokoto 使用一言API
 * @return {null}
 */

例子:

{
    
    
	// 模型相关配置
	model: {
    
    
		// 模型json路径
		jsonPath: ''
	},
	// 对话框
	dialog: {
    
    
		// 是否启用对话框
		enable: true,
		// 触发事件及其显示内容
		script: {
    
    
			'tap face': '点击脸部..',
		}
	}
}

Web live2d 看板娘(更新中...)

生成所需库

基本示例

进阶示例

引入自定义模型

详细配置(待补充…)

猜你喜欢