虚拟主播皮套解析 | 如何在 React 中使用 Live2D | 如何在 React 项目中集成 Cubism Web SDK

码农世界 2024-05-22 前端 58 次浏览 0个评论

文章目录

前言
一、创建项目
- 1. 安装create-react-app
- 2. 使用create-react-app创建react项目
- 二、配置项目
- - 1. 配置Live2D framework
  - 2. 配置 Live2D Core
  - 3. 将Live2D模型资源文件添加到public文件夹中
  - 4. 将Render库作为子模块加入src文件夹
  - 5. 创建自定义hook
  - 6. 修改src/App.tsx为App.js
  - 7.配置package.json和tsconfig.json
  - 三、运行项目
  - 总结
    
    前言
    
    在当今数字世界中，动画和虚拟角色已经成为了互联网文化的重要组成部分。从游戏到虚拟主播，我们越来越多地看到人们使用动画角色来表达自己，创造令人惊叹的数字体验。而其中一个让人印象深刻的技术就是 Live2D Cubism，它为我们提供了创建逼真、生动角色的工具和平台。
    
    在本文中，我们将探讨如何在 React 项目中集成 Cubism Web SDK，这是一项强大的技术，可以让我们将 Live2D 模型无缝嵌入到我们的应用程序中。无论您是为您的网站添加一些趣味性，还是为您的应用程序带来一些独特的风格，Cubism Web SDK 都将是您的绝佳选择。
    
    CubismWeb 是什么？
    
    Cubism Web是一个基于Web技术的软件开发工具包，用于创建实时的2D人物模型（也称为Live2D模型）。Live2D是一种基于2D图形的技术，允许将静态的2D图像转换为具有动态效果的模型，这些模型可以根据用户的输入实时进行动画和变形。
    
    Cubism Web提供了一组工具和库，使开发人员可以轻松地将Live2D模型集成到Web应用程序中。它支持多种平台和框架，包括HTML5、JavaScript和CSS，因此可以在各种设备和浏览器上运行。
    
    使用Cubism Web，开发人员可以创建各种各样的交互式2D人物模型，例如虚拟主播、聊天机器人和游戏角色。这些模型可以通过用户的鼠标、触摸或声音输入进行操控，为用户带来更加生动和有趣的体验。
    
    一、创建项目
    
    1. 安装create-react-app
```
npm install -g create-react-app
```
    2. 使用create-react-app创建react项目
```
npx create-react-app simple-cubismweb-app --template typescript
```
    二、配置项目
    
    1. 配置Live2D framework
    
    在src/路径下面创建Live2D文件夹
    
    将cubismweb framework作为子模块添加到项目中
```
git submodule add https://github.com/Live2D/CubismWebFramework.git src/Live2D/Live2DFramework
```
    也可以在下面网站下载SDK将Framework手动添加到项目中
    
    https://www.live2d.com/zh-CHS/sdk/download/web/
    
    注意事项：将src/Live2D/Live2DFramework文件夹下面的.eslintrc.yml删除
    
    2. 配置 Live2D Core
    
    在下面网站现在Live2D Core 复制到 public 文件夹下
    
    https://www.live2d.com/zh-CHS/sdk/download/web/
    
    修改index.html 增加对Live2D Core的引用，index.js内容如下
```
  
    
    
    
    
    
    
    
    
    
    React App
    
  
  
    
    
    
  
```
    3. 将Live2D模型资源文件添加到public文件夹中
    
    也可以在下面网站下载SDK
    
    https://www.live2d.com/zh-CHS/sdk/download/web/
    
    将SDK中的官方资源文件夹复制到public文件夹中
    
    4. 将Render库作为子模块加入src文件夹
    
    该Render项目作为子项目，加入到项目中（该项目为从cubismweb的示例项目提取修改而来，使用请遵守cubismweb官方的协议）
```
git submodule add https://github.com/couchette/cumbismweb-render.git src/Live2D/Render
```
    5. 创建自定义hook
    
    在src文件夹下面创建hook文件夹，创建useLive2D.ts文件，内容如下
```
import { useEffect } from "react";
import * as Define from "../Live2D/Render/Define";
import { Delegate } from "../Live2D/Render/Delegate";
export default function useLive2D() {
  return useEffect(() => {
    Delegate.releaseInstance();
    if (Delegate.getInstance().initialize() === false) {
      return;
    }
    Delegate.getInstance().run();
    if (Define.CanvasSize === "auto") {
      Delegate.getInstance().onResize();
    }
    window.addEventListener("resize", () => {
      Delegate.getInstance().onResize();
    });
  }, []);
}
```
    项目结构如下
    
    6. 修改src/App.tsx为App.js
    
    修改内容如下
```
import "./App.css";
import useLive2D from "./hooks/useLive2D";
function App() {
  useLive2D();
  return (
    
      {
          display: "flex",
          flexDirection: "row",
          height: "100vh",
          width: "100vw",
        }}
      >
        
      
    
  );
}
export default App;
```
    7.配置package.json和tsconfig.json
    
    package.json文件内容如下
```
{
  "name": "simple-cubismweb-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.91",
    "@types/react": "^18.2.73",
    "@types/react-dom": "^18.2.22",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "dev": "craco start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "ignorePatterns": [
      "src/Live2D/Live2DFramework/src/*.*",
      "src/Live2D/Live2DFramework/src/**/*.*",
      "src/Live2D/Render/*.*"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}
```
    tsconfig.json内容如下
```
{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
  },
  "includes": ["**/*.ts", "**/*.tsx", "src"],
  "exclude": ["node_modules", "node_modules/", "**/node_modules"],
  "extends": "./tsconfig.paths.json"
}
```
    三、运行项目
    
    npm i安装依赖， npm start运行项目
    
    运行结果如下
    
    总结
    
    感谢您看到这里，本文介绍了如何在React中使用CubismWebSDK，希望对您有所帮助，如果文章中存在任何问题、疏漏，或者您对文章有任何建议，请在评论区提出。