新开网站seo,怎么登录企业邮箱,网站开发员岗位职责,合肥全员核酸检测VUE集成Live2d 目前基于大模型#xff0c;可以实现一个桌面的3D动画小人#xff0c;个人猜测可以简介这个项目进行实现 1-参考网址 试了很多项目#xff0c;只有这个项目直观的把问题说清楚了 Live2D Vue3技术应用:https://blog.csdn.net/hh1233321/article/details/1406947…VUE集成Live2d 目前基于大模型可以实现一个桌面的3D动画小人个人猜测可以简介这个项目进行实现 1-参考网址 试了很多项目只有这个项目直观的把问题说清楚了 Live2D Vue3技术应用:https://blog.csdn.net/hh1233321/article/details/140694778个人编写代码仓库https://gitee.com/enzoism/live2d-manual 2-核心逻辑
1下载Live2d官方文件2创建VUE项目3VUE项目添加Live2d的【模型文件】【js】文件4然后修改App.vue文件 3-上手实践
1-创建VUE项目
# 1-创建VUE项目
vue create live2d-render# 2-Vue3项目创建/安装软件包/并运行
- cd live2d-render
- npm run serve2-安装live2d对应的依赖
npm install pixi-live2d-display pixi.js6.x3-拷贝2D的模型到项目中
1. 下载 Live2D Cubism SDK
前往 Live2D Cubism SDK 下载页面。选择 Web 版本下载后解压文件。找到 live2dcubismcore.js 文件通常位于解压后的 Core 文件夹中。
2. 将 live2dcubismcore.js 文件放置到项目中
将 live2dcubismcore.js 文件复制到 Vue 项目的 public 目录下例如 public/live2dcubismcore.js。
3. 在 index.html 中引入 live2dcubismcore.js
打开 public/index.html 文件在 body 标签中添加以下代码script srclive2dcubismcore.js/script4. 确保正确加载模型文件 可以从下载的Live2D Cubism SDK 下载页面中【CubismSdkForWeb-5-r.3/Samples/Resources】下找一个样例 确保 Live2D 模型文件如 .model3.json已放置在 public 目录下并在代码中正确引用路径。例如const model await Live2DModel.from(models/your-model-name.model3.json);5-编辑显示页面
template
canvas refliveCanvas/canvas/templatescript setup
import {ref,onMounted,onBeforeUnmount} from vue;
import * as PIXI from pixi.js
import { Live2DModel } from pixi-live2d-display/cubism4;
console.log(Live2DModel,Live2DModel)window.PIXI PIXI
let app;
let model;
const liveCanvasref(null);
onMounted(async (){console.log(liveCanvas,1111);appnew PIXI.Application({view:liveCanvas.value || undefined,autoStart:true,resizeTo:window,backgroundAlpha:0})// model await Live2DModel.from(https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json)model await Live2DModel.from(./kebai_model/kei_basic_free.model3.json)app.stage.addChild(model);model.scale.set(0.1)
});
onBeforeUnmount((){model?.destroy();app?.destroy()
})/scriptstyle scoped/style6-运行项目
npm run serve
