在 React Native 中实现 3D 动画

本文的范围将涵盖对 Three.js 库和 Animated API 的探索。 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习； 要了解更多关于可以在 React Native 中完成的所有美妙事情， 的React Native 档案是一个很好的学习场所。 LogRocket 博客上

我们将这篇文章一分为二。 在第一部分，我们探索在 React Native 中创建高级 3D 动画。 我们将依赖 Three.js 库，它是一个跨平台 JavaScript 3D 库，用于在 Web 环境中创建 3D 内容，例如图形和动画。 Three.js 结合了 WebGL 增强行为以在 Web 上渲染 3D 模型和 TweenMax 以增强动画质量。

本文的第二部分将探索 Animated API ，它使我们的动画变得流畅。

跳跃前进：

• 安装和先决条件

• 如何使用 Three.js 渲染 3D 模型

• 使用 3D 立方体创建场景

• 探索动画 API

• 使用 Animated API 创建 3D 效果

  • 添加背景

安装和先决条件

首先，我们需要创建我们的 React Native 应用程序。 安装 Expo CLI 为我们的项目服务； 它与 Expo GO 库协同工作，这是一个移动客户端应用程序，我们将使用它在 iOS 或 Android 平台上打开我们的项目。

安装 Expo CLI 后，继续在终端中运行以下命令。 此应用程序将使用 TypeScript 模板。

expo init reactNative3D
cd reactNative3D
yarn start

在继续之前，我们需要安装一些核心依赖项。 打开终端窗口，运行以下命令。

yarn add three expo-three expo-gl
yarn add --dev @types/three

让我们回顾一下这些依赖项：

• expo-gl ：这提供了一个 View充当 OpenGL ES 渲染目标，这对于渲染 2D 和 3D 图形非常有用。 挂载后，会创建一个 OpenGL 上下文，该上下文接受 onContextCreate prop，它有一个 WebGL RenderingContext 接口

• expo-three : 作为 Three.js 和 ExpoGL 之间的桥梁； 它还为 React Native 中的原生 OpenGL-ES 提供了一个 WebGL 接口，这有助于将 DOM 从 Three.js 中抽象出来

• 三 ：用于在网页上创建 3D 内容的 3D 库

如何使用 Three.js 渲染 3D 模型

当使用 Three.js 渲染 3D 模型时，我们首先创建一个场景作为模型渲染的集合。下图说明了 Three.js 应用程序的基本结构，其中需要创建对象并将它们连接起来一起。

来源： Three.js

让我们探索一下上面的图表。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

• 关键部分是 renderer, Three.js 的主要对象。 我们创建的 scene和 camera被传递给渲染器，渲染器渲染（绘制）3D场景的一部分

• 这 scene是一个定义根的对象 scenegraph并包含一些属性，例如背景颜色

• Mesh是表示特定绘图的对象 Geometry具有特定的 Material班级

• 一块的顶点数据 Geometry（球体，立方体）由 Geometry目的。 Three.js 提供了内置的几何原语

• 用于绘制几何图形的表面属性由 Material目的。 它接受诸如 color和 texture

• Texture对象表示从图像文件加载的图像

在以下部分中，我们将使用这些结构中的每一个来创建 3D 动画。

使用 3D 立方体创建场景

在里面 App.tsx在我们项目目录的根目录下，我们将创建一个基本的 React Native 组件。 将需要的包导入到 App.tsx零件。

code App.tsx
import React from 'react';
import { View } from 'react-native';
import Expo from 'expo';
import {Scene, Mesh, MeshBasicMaterial, PerspectiveCamera} from 'three';
import ExpoTHREE, {Renderer} from 'expo-three';
import { ExpoWebGLRenderingContext, GLView } from 'expo-gl';

继续创建场景， GLView exported from expo-gl provides a view that acts as an OpenGL ES render target. This is very useful for rendering the 3D objects we’re creating.

在里面 App.tsx组件，创建一个功能组件。

const App = () => {
  const onContextCreate = async (gl: Object) => {}
  return (
    <View>
      <GLView
      onContextCreate={onContextCreate}
      />
    </View>
  )
}
​
export default App;

我们的应用程序的基本骨架已经完成。 这 onContextCreate道具被传递到 GLView用一个论点， gl，它有一个 WebGL RenderingContext 接口。

转移我们的注意力，让我们创造 onContextCreate功能。

  const onContextCreate = async (gl: any) => {
    // three.js implementation.
    const scene = new Scene();
    const camera = new PerspectiveCamera(
      75,
      gl.drawingBufferWidth / gl.drawingBufferHeight,
      0.1,
      1000
    );
    gl.canvas