Offline · 库与模型全部进仓库

全本地组件

方案一 · 库与模型都进仓库

库、模型、贴图全部进仓库，内网可跑。

l2d-widget 3.1.4 Shizuku 离线可用 Cubism 2.1

正在检测组件…

组件未能挂载，通常是 lib/ 或 models/shizuku 没有完整拷贝、或页面不是通过本地 HTTP 打开。
可查看本页下方的「实现要点」与「注意」。

模型可离线

实现要点

Implementation

双 chunk 结构：L2Dwidget.min.js 是 webpack 主入口，负责定义 webpackJsonpL2Dwidget；L2Dwidget.0.min.js 是 vendor chunk，必须后加载。
初始化位置：调用必须放在 body 末尾。放在 head 会因 document.body 尚不存在而报 appendChild of null。
模型显式化：不传 model.jsonPath 时组件会去远程 unpkg 取默认模型，本地化时必须写明本地路径。
资源完整性：模型目录需整套拷贝，moc、贴图、mtn、exp、physics、pose、sound 缺一不可。

运行条件

运行状态: 可离线　lib/ 与 models/shizuku 均在仓库内，断网也能运行。
依赖: l2d-widget 3.1.4（lib/）
资源: Shizuku Cubism 2.1（models/shizuku）
入口文件: 08-l2d-widget/index.html
初始化: 主入口在前、vendor chunk 在后，body 末尾调用 L2Dwidget.init({ model.jsonPath: 'models/shizuku/shizuku.model.json' })，路径按页面相对写法。

关键代码

Code

L2Dwidget.init({
  model: {
    jsonPath: 'models/shizuku/shizuku.model.json', scale: 1
  },
  display: {
    superSample: 2, width: 220, height: 400,
    position: 'right', hOffset: -10, vOffset: -20
  },
  mobile: { show: true, scale: 0.7, motion: true },
  react:  { opacityDefault: 1, opacityOnHover: 1 }
});

注意

Caveats

这是本仓库里唯一完全离线的 l2d-widget 示例，库与模型都放在 08-l2d-widget/ 目录内，整目录拷贝即可独立运行。
若换用其他模型，确认其格式为 Cubism 2.1，moc3 模型不能直接交给 l2d-widget。