作者:微信小助手
发布时间:2025-04-23T17:05:55
.model3.json
文件,描述了 3D 模型的参数、纹理、骨骼绑定等信息。
{
"Version": 3,
"FileReferences": {
"Moc": "haru_greeter_t03.moc3",
"Textures": [
"haru_greeter_t03.2048/texture_00.png",
"haru_greeter_t03.2048/texture_01.png"
],
"Physics": "haru_greeter_t03.physics3.json",
"Pose": "haru_greeter_t03.pose3.json",
"DisplayInfo": "haru_greeter_t03.cdi3.json",
"Expressions": [
{
"Name": "f00",
"File": "expressions/F01.exp3.json"
},
{
"Name": "f01",
"File": "expressions/F02.exp3.json"
},
{
"Name": "f02",
"File": "expressions/F03.exp3.json"
},
{
"Name": "f03",
"File": "expressions/F04.exp3.json"
},
{
"Name": "f04",
"File": "expressions/F05.exp3.json"
},
{
"Name": "f05",
"File": "expressions/F06.exp3.json"
},
{
"Name": "f06",
"File": "expressions/F07.exp3.json"
},
{
"Name": "f07",
"File": "expressions/F08.exp3.json"
}
],
"Motions": {
"Idle": [
{
"File": "motion/haru_g_idle.motion3.json"
},
{
"File": "motion/haru_g_m07.motion3.json"
},
{
"File": "motion/haru_g_m15.motion3.json"
}
],
"Tap": [
{
"File": "motion/haru_g_m14.motion3.json",
"Sound": "../shizuku/sounds/flickHead_00.mp3"
},
{
"File": "motion/haru_g_m05.motion3.json",
"Sound": "../shizuku/sounds/flickHead_01.mp3"
}
]
}
},
"Groups": [
{
"Target": "Parameter",
"Name": "EyeBlink",
"Ids": [
"ParamEyeLOpen",
"ParamEyeROpen"
]
},
{
"Target": "Parameter",
"Name": "LipSync",
"Ids": [
"ParamMouthOpenY"
]
}
],
"HitAreas": [
{
"Id": "HitArea",
"Name": "Head"
},
{
"Id": "HitArea2",
"Name": "Body"
}
]
}
.model3.json
文件通常包含以下关键部分:
"Version":3
"FileReferences": {
"Moc": "haru_**.moc3",
"Textures": ["haru_**.1024/texture_00.png"]
}
"Parameters": { ... },
"Parts": { ... }
"Physics": { ... }
import { Live2DModel } from 'pixi-live2d-display';
// 如果只需要 Cubism 2.1
import { Live2DModel } from 'pixi-live2d-display/cubism2';
// 如果只需要 Cubism 4
import { Live2DModel } from 'pixi-live2d-display/cubism4';
</ul>
<pre class="code-snippet__js" data-lang="javascript"><code><span leaf=""><span class="code-snippet__keyword">import</span> { </span></code><code><span leaf=""> <span class="code-snippet__title">Live2DModel</span></span></code><code><span leaf="">} <span class="code-snippet__keyword">from</span><span class="code-snippet__string">'pixi-live2d-display'</span>;</span></code><code><span leaf=""><br></span></code><code><span leaf=""><span class="code-snippet__keyword">const</span> model = <span class="code-snippet__keyword">await</span> <span class="code-snippet__title">Live2DModel</span>.<span class="code-snippet__title">from</span>(<span class="code-snippet__string">'**.model.json'</span>);</span></code></pre>
Live2DModel.from()
方法加载模型文件。
import * as PIXI from 'pixi.js';
const app = new PIXI.Application({
view: document.getElementById('canvas'),
});
app.stage.addChild(model);