Live2D 模型加载优化：使用 settings 配置文件

Live2D 模型加载优化：使用 settings 配置文件

本文将介绍如何使用 Live2D settings 配置文件优化模型加载，并提供代码示例。通过 settings 配置，可以轻松更改模型路径、位置和缩放比例，提高开发效率。

1. 设置 Live2D settings 配置文件

首先，创建一个名为 live2d_settings 的 JavaScript 对象，用于存储模型相关配置信息。

var live2d_settings = {
  userInfo: {
    sign: 'eyJhbGciOiJSUzI1NiIsImtDZp-o69PA8y5WNRXoNt5bxuH1LFcyBWpofSo-_5LZhxKmrV_1sKmRBPZOHidNSAbo9FFllDCFDP0vaOI5GjKPXZHl-YFcLTBitVGUBErWKow'
  },
  modelAPI: 'https://girl.model3.json',
  modelPoint: {
    x: 0,
    y: 0,
    zoom: 1
  }
};

解释：

• userInfo：用于存储用户相关信息，本例中包含一个 sign 属性。
• modelAPI：存储模型的 API 地址，例如 https://girl.model3.json。
• modelPoint：存储模型的位置和缩放比例，包含 x、y 和 zoom 属性。

2. 修改 loadModel 函数

接下来，修改 loadModel 函数，使用 live2d_settings.modelAPI 作为模型加载地址。

function loadModel(modelId, modelTexturesId) {
  localStorage.setItem('modelId', modelId);
  if (modelTexturesId === undefined) modelTexturesId = 0;
  localStorage.setItem('modelTexturesId', modelTexturesId);
  loadlive2d('live2d', live2d_settings.modelAPI, console.log('live2d', '模型 ' + modelId + '-' + modelTexturesId + ' 加载完成'));
}

3. 修改 loadv2 函数调用

最后，修改 loadv2 函数的调用，使用 live2d_settings.modelPoint 作为参数。

loadv2('index_canvas', live2d_settings) -> loadv2(live2d_settings.modelPoint, live2d_settings)

4. 代码示例

// ... (其他代码)

function showMessage(text, timeout, flag) {
  // ... (其他代码)
}

function hideMessage(timeout) {
  // ... (其他代码)
}

function initModel(waifuPath) {
  // ... (其他代码)
}

function loadModel(modelId, modelTexturesId) {
  localStorage.setItem('modelId', modelId);
  if (modelTexturesId === undefined) modelTexturesId = 0;
  localStorage.setItem('modelTexturesId', modelTexturesId);
  loadlive2d('live2d', live2d_settings.modelAPI, console.log('live2d', '模型 ' + modelId + '-' + modelTexturesId + ' 加载完成'));
}

function loadRandModel() {
  // ... (其他代码)
}

function loadOtherModel() {
  // ... (其他代码)
}

// ... (HTML 代码)

<script src="./wp-content/themes/onenav/assets/waifu-tips.js"></script>
<script src="./wp-content/themes/onenav/assets/live2dv2.min.js"></script>
<script type="text/javascript">
  // 初始化 Live2D settings
  var live2d_settings = {
    userInfo: {
      sign: 'eyJhbGciOiJSUzI1NiIsImtDZp-o69PA8y5WNRXoNt5bxuH1LFcyBWpofSo-_5LZhxKmrV_1sKmRBPZOHidNSAbo9FFllDCFDP0vaOI5GjKPXZHl-YFcLTBitVGUBErWKow'
    },
    modelAPI: 'https://girl.model3.json',
    modelPoint: {
      x: 0,
      y: 0,
      zoom: 1
    }
  };

  // 初始化模型
  initModel("./wp-content/themes/onenav/assets/");

  // 使用 settings 配置加载模型
  loadv2(live2d_settings.modelPoint, live2d_settings);
</script>

总结

通过使用 settings 配置文件，我们可以更方便地管理 Live2D 模型加载过程，提高开发效率。同时，settings 配置文件也方便我们进行模型的配置和切换，例如在不同页面使用不同的模型或配置。