在react项目添加看板娘(react-live2d)

  有留意到看板娘这么个东西,简直就是我们程序员+动漫迷的挚爱。但是回观网上,大多只是在老旧的html的静态引入、vue甚至也有几个不怎么维护的,还是老旧的不行的SDK2.X的版本。这这这这!我们的react开发者怎么能忍!!所以,我基于SDK4.X(没错,就是live2d官网最新的那个)封装了一个咱们react开发者的看板娘·~~接下来这篇文章就是我们react开发者引入看板娘的过程啦~

  首先上示例图

 

熟悉的logo加上看板娘的同时存在~,还用我说什么吗~ 这就是咱们react的看板娘啦!!

引入的过程很简单,我们熟悉的模块安装:

npm install react-live2d

然后在你个人的react项目的->public->index.html里插入SDK的js,比如我的(这js建议还是放置到你自己的服务器噢):

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

接着就是在你希望引入看板娘的页面里引入这模块了:

import ReactLive2d from 'react-live2d';

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

看板娘的引入和模块都已经完毕啦,接下来就是引入你自己的看板娘模型。

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

·
└─ public                     

   └─ Resources

         └─ Hiyori

这样子就大功告成啦~~~

当然这只是基础的引入,更多的api文档请移步到https://github.com/chendishen/react-live2d

喜欢的朋友麻烦点个star噢~

posted @ 2020-09-08 10:52  chendishen  阅读(982)  评论(0编辑  收藏  举报