zoukankan      html  css  js  c++  java
  • 在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噢~

  • 相关阅读:
    Java中容器的两种初始化方式比较
    java8之stream
    java8之lambda表达式入门
    java8之lambda表达式(1)-基本语法
    java中Comparable和Comparator两种比较器的区别
    将博客搬至CSDN
    vsphere6.5 创建数据中心、集群和添加主机
    VMware-VCSA-6.5安装过程
    docker--数据卷与数据卷容器
    docker私有库搭建过程(Registry)
  • 原文地址:https://www.cnblogs.com/cds94/p/13631215.html
Copyright © 2011-2022 走看看