live2d-widget.js 教程

live2d-widget.js 教程

live2d-widget.jsLive2D on webpages with out-of-the-box experience.项目地址:https://gitcode.com/gh_mirrors/li/live2d-widget.js

1. 项目目录结构及介绍

live2d-widget.js 的目录结构如下：

• dist: 包含编译后的库文件，如 live2d.min.js, autoload.js 等。
• src: 项目源代码，包含未压缩的 JS 和其他资源。
• models: 存放不同模型的数据包，每个模型通常有自己的子目录。
• docs: 文档相关资料。
• examples: 示例代码和演示。
• package.json: 项目依赖和配置信息。

这些文件和目录是项目的核心部分，开发者主要打交道的是 dist 目录中的库文件以及 models 中的模型资源。

2. 项目启动文件介绍

live2d-widget.js 并没有传统意义上的启动文件，因为这是一个 JavaScript 库。但你可以通过以下步骤引入项目：

1. 加载库文件：在 HTML 文件中添加对 autoload.js 的引用，它会自动处理 Live2D 初始化：

   <script src="path/to/live2d-widget/autoload.js"></script>
   

   其中 path/to/live2d-widget 是你的 live2d-widget.js 库文件所在的路径。

2. 配置模型：配置文件通常位于 dist 目录，但也可以自定义。例如，如果你使用预设的模型 model/haru/01，可以在 HTML 页面中这样设置：

   <script>
     var live2dSettings = {
       model: 'model/haru/01',
     };
   </script>
   

3. 插入 HTML 标签：在页面中放置一个元素来承载 Live2D 视图：

   <div id="live2d"></div>
   

3. 项目的配置文件介绍

项目并没有独立的配置文件，但你可以通过 JavaScript 设置来定制行为。通常，在页面中创建一个全局变量，比如 live2dSettings，然后将配置对象赋值给它。下面是一些常见的配置选项：

• model: 指定要使用的模型名称，对应 models 目录下的子目录。
• display: 控制 Live2D 是否显示，可接受 'show' 或 'hide'。
• mobile: 判断是否在移动设备上运行，如果为真，会应用移动端优化。
• clickEvent: 自定义点击事件的回调函数。

示例配置：

var live2dSettings = {
  model: 'model/haru/01',
  display: 'show', // 默认显示
  mobile: true,
  clickEvent: function() { console.log('Model clicked!'); },
};

完成以上步骤后，当页面加载完毕，Live2D 模型会在指定的 div 内部渲染出来，根据配置执行相应的动作。

记住，确保你的 HTML 文件能够正确访问到库文件和模型数据，否则会加载失败。如需自定义模型，需要下载对应的模型数据并将其放在正确的目录下。

live2d-widget.jsLive2D on webpages with out-of-the-box experience.项目地址:https://gitcode.com/gh_mirrors/li/live2d-widget.js