react-ogl安装与配置指南-优快云博客

react-ogl安装与配置指南

react-ogl 🦴 A barebones react renderer for ogl. 项目地址: https://gitcode.com/gh_mirrors/re/react-ogl

1. 项目基础介绍

react-ogl 是一个基于 React 的库，用于在 Web 和原生应用中渲染 OpenGL 场景。它提供了一个跨平台的 <Canvas /> 组件，可以作为 OGL 场景的入口点。该项目主要使用 JavaScript 编程语言，并且与 React 框架紧密结合。

2. 关键技术和框架

该项目使用以下技术和框架：

React: 用于构建用户界面的 JavaScript 库。
OGL: 一个用于在 Web 和原生应用中渲染 OpenGL 的库。
@react-three/fiber: 一个用于在 React 中渲染 three.js 场景的库，虽然 react-ogl 本身不依赖于它，但可以与它配合使用。
Expo CLI / React Native CLI: 用于创建和构建原生应用的工具。

3. 安装和配置

准备工作

在开始安装 react-ogl 之前，请确保您的开发环境中已经安装了以下工具：

Node.js：JavaScript 的运行时环境。
npm 或 yarn：用于管理项目依赖的包管理工具。
Create React App：用于快速搭建 React 项目的脚手架。

安装步骤

使用 Create React App

创建一个新的 React 应用：
```
npx create-react-app my-app
```
切换到项目目录：
```
cd my-app
```
安装 ogl 和 react-ogl：
```
npm install ogl react-ogl
```
或者如果你使用 yarn：
```
yarn add ogl react-ogl
```
启动项目：
```
npm run start
```
或者使用 yarn：
```
yarn start
```

使用 React Native

创建一个新的 React Native 应用：
```
npx expo init my-app
```
或者使用 React Native CLI：
```
npx react-native init my-app
```
切换到项目目录：
```
cd my-app
```

安装 ogl、react-ogl 和 Expo GL 模块：

npm install ogl react-ogl
npx install-expo-modules@latest
expo install expo-gl

或者如果你使用 yarn：

yarn add ogl react-ogl
yarn add-expo-modules@latest
expo install expo-gl

配置 metro.config.js 以支持 mjs 文件扩展：

{
  "resolver": {
    "resolverMainFields": ["browser", "exports", "main"],
    "sourceExts": ["json", "js", "jsx", "ts", "tsx", "cjs", "mjs"],
    "assetExts": ["glb", "gltf", "png", "jpg"]
  }
}