react-live2d/README.md
2020-08-23 20:54:31 +08:00

2.2 KiB
Raw Blame History

react-live2d

npm NPM npm

服务器配置较差,网站首次打开,看板娘需要加载大量模型和动作,请耐心等候 示例地址

目录说明

├─ Core                  # Cubism Core 核心库

└─ Samples              # 示例项目

   └─ TypeScript

      └─ Demo            # 直接在此处npm install后 npm run build:prod得到打包的bundle.js按照index.html的引入方式引入到项目即可

    └─ Resources # 这里面放的是live2D的模型及动作导出的文件需要添加自定义模型请在此处添加注意文件夹名字即为模型名字

    └─ Framework # 包含渲染和动画功能等的源代码的目录

         └─ src          # 核心代码

📦 Install

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

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

api 文档 (待完善,如有需要功能欢迎提issue

成员 说明 类型 默认值
width 盒子宽度 Number 300
height 盒子高度 Number 400
top positionrelative的top值 String ''
right positionrelative的right值 String '0'
bottom positionrelative的bottom值 String '0'
left positionrelative的left值 String ''
ModelList 模型列表,暂时只展示数组的第一个模型 Array ['Hiyori']