可供react引入的live2d看板娘

最新推荐文章于 2025-03-03 19:55:31 发布

置顶 qq_32604721

最新推荐文章于 2025-03-03 19:55:31 发布

阅读量641

点赞数

分类专栏：前端文章标签： react javascript github

本文链接：https://blog.csdn.net/qq_32604721/article/details/108213939

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在React项目中集成Live2D看板娘，通过使用react-live2d模块，使得个人博客增添生动元素。文章提供具体安装步骤及使用方法，并附上模型资源获取途径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来就是个动漫控，之前vue开发的个人博客被黑客攻陷洗库洗源码后，顺便就用react重新开发了个人博客。但是问题来了，之前vue的博客布局到处充满了动漫背景就有没看板娘没关系。现在所做的个人博客稍显空洞（空虚寂寞）。

网上找到的看板娘，大多数是静态引入script，vue也有引入，就react彻底找不到。。而且看了看大多都是以前某大牛吃的鸡，后边都是无限复用的SDK2的源码，我看了看官网的结构，已经达到了4.x了。。本着用新不用旧的观念就对官方的demo魔改成react引用的live2d看板娘模块了。下边是使用方式~~

📦 Install

为了不增加npm包的负担，基础包还是直接使用script引入，在你个人的react项目的->public->index.html先插入，Core里可获得该min.js

<script src = "http://publicjs.supmiao.com/live2dcubismcore.min.js"></script>

npm install react-live2d

🔨 Usage

import ReactLive2d from 'react-live2d';

const App = () => (
  <>
    <ReactLive2d
        width={300}
        height={500}
    />
  </>
);

比如你想要给页面加入模型Hiyori，那就在你的react项目中的public目录下，将Hiyori放入Resources资源文件夹,如

·
└─ public                     

   └─ Resources

       └─ Hiyori

更多模型，请动手在github搜索’live2d 模型’即可，模型大多有版权，请慎勿用于商业~

详细API文档在[github]https://github.com/chendishen/react-live2d

喜欢的react个人开发者请顺手给个star噢，感谢~