← 作品展
CASE 03 / 05
Pixi 6 · Cubism 4
Pixi Stage · 渲染循环接管
Pixi 舞台
Pixi 6 + pixi-live2d-display · Cubism 4
Pixi 管渲染循环，插件把 moc3 挂进场景图。
模型与库都在仓库内，画面为空通常是因为直接以 file:// 打开，或浏览器未启用 WebGL。
请通过本地 HTTP 服务访问本页；也可以对照
04 · easy-live2d。
LIVE DEMO · 03
移动鼠标看她转头 · 点击角色切换表情
操作：鼠标移动 / 点击模型：Haru · 本地资源
01
实现要点
Implementation- 复用画布：
PIXI.Application直接接管既有 canvas，resizeTo: stage跟随舞台尺寸。 - 一行加载：
Live2DModel.from(...)内部会解析 moc3、贴图、动作与物理。 - 自适应布局：各模型画布留白不同，先整块渲染一帧、读回像素量出人物可见范围，再按可见范围等比缩放并贴底居中。
- 交互：锚点设在底部中心；
pointertap轮换表情；视线跟随由插件的 autoInteract 处理。
02
关键代码
Code
JS
const app = new PIXI.Application({
view: document.getElementById('canvas'),
resizeTo: stage, backgroundAlpha: 0
});
const model = await PIXI.live2d.Live2DModel.from(
'../models/Haru/Haru.model3.json'
);
app.stage.addChild(model);
model.anchor.set(0.5, 1);
model.on('pointertap', () => model.expression(index++ % 8));
03
注意
Caveats- 必须通过 HTTP 服务打开，
file://下模型请求会被拦截。 - 本案例使用旧版 Core，案例 04 使用 R5 Core，两个 Core 文件分开存放，不可混用。
04