• 在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噢~

  • 相关阅读:
    instance of type of object.prototype.tostring 区别
    字符串属性及方法大总结
    数组属性及方法大总结
    在Vue中遇到的各种坑 及性能提升
    find、filter、map的区别
    react 的CDN 连接
    react开启一个项目 webpack版本出错
    react中的jsx详细理解
    Vue 在beaforeCreate时获取data中的数据
    vue点击时动态改变样式 ------- 最简单的方法
  • 原文地址:https://www.cnblogs.com/cds94/p/13631215.html
Copyright © 2020-2023  润新知