javascript - 是否有可用于 Expo 和 React Native 的 AR 库？

Question

我和我的 friend 目前正在尝试制作 Pokemon Go 的克隆版。我们游戏的部分包括玩家和口袋妖怪生成的实时 map (使用 React Native map 和 Expo 完成)和口袋妖怪战斗组件。我们的问题在于后者——我们正在尝试将 3D Pokemon 模型渲染到玩家的相机(例如 AR)上。

但是，似乎 Expo 对 AR+3D 模型的原生支持在几个版本之前就已被弃用，我们研究的其他解决方案(例如 Viro)似乎与 Expo 不兼容(我们非常重视依赖于)。

有没有人最近尝试用 AR 加上 React Native/Expo 做一些事情，他们对我们可以研究的工具/技术有什么建议？

Answer 1

这可以通过将 Viro React 与您 expo eject 的项目一起使用来完成。您仍然可以使用所有现有的 expo 代码，但您将使用 Expo Bare Workflow，而不是 Managed Workflow。

以下是大致的步骤:

• 在您现有的项目上运行expo eject(您仍然可以使用 Expo Go 开发任何不使用 AR 的 View )
• 运行 npx pod-install。每当您添加具有 native 模块的库时，您都需要重新运行此命令。
• 通过 USB 插入您的 iOS 设备并使用 npx react-native run-ios --device 构建您的应用程序以安装您的应用程序(此过程与 Android 设备类似)。 iOS 和 Android 模拟器不支持 AR。
• 上述命令将自动启动 Metro(它捆绑并提供您的 JS Assets )，您应该会像使用 Expo Go 时一样进行热重载。如果您停止了 Metro，您可以随时使用 npx react-native start 重新启动它。

恭喜!您现在拥有一个 Expo Bare Workflow。您应该仍然能够运行 expo start 并在 Expo Go 中打开您的应用程序，并且您还应该在您的设备上安装应用程序的开发版本。

只有完成上述工作后，您才应尝试添加 Viro React:

• 运行 yarn add @viro-community/react-viro
• 运行 npx pod-install(并记住每次添加带有 native 模块的新库时执行此操作)
• 在您现有的应用中创建一个新的 AR View (以及一个导航到它的链接)

您的“hello, world” View 应该如下所示:

import React, { FC, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import {
  ViroARScene,
  ViroARSceneNavigator,
  ViroConstants,
  ViroFlexView,
  ViroImage,
} from '@viro-community/react-viro';

interface MyARViewProps {
  foo: string | undefined
}

const ARView: FC<MyARViewProps> = (
  props: MyARViewProps
) => {
  return (
      <View style={{flex: 1}}>
        <ViroARSceneNavigator
            autofocus={true}
            initialScene={{
              scene: HelloWorldSceneAR,
            }}
            style={styles.f1}
        />
        <View style={[styles.buttons]}>
          <View style={[styles.button]}>
            <Text style={[styles.buttonLabel]}>A button</Text>
          </View>
        </View>
      </View>
  );
};

export default ARView;

const HelloWorldSceneAR = () => {
  const [tracking, setTracking] = useState(false);

  function onInitialized(state, reason) {
    if (state === ViroConstants.TRACKING_NORMAL) {
      setTracking(true);
    } else if (state === ViroConstants.TRACKING_NONE) {
      setTracking(false)
    }
  }

  return (
    <ViroARScene onTrackingUpdated={onInitialized}>
      {tracking && (<ViroFlexView
          style={{flexDirection: 'row', padding: 0.1}}
          width={2.0}
          height={.4}
          position={[0, 0.25, -1]}
      >
        <ViroText text="hello, world" />
      </ViroFlexView>)}
    </ViroARScene>
  );
};

let styles = StyleSheet.create({
  container: {
    marginHorizontal: 10,
    alignItems: "center"
  },
  buttons: {
    height: 100,
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    position: 'absolute',
    bottom: 0,
    left: 0,
  },
  button: {
    height: 100,
    width: 100,
    borderRadius: 50,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#123456',
  },
  buttonLabel: {
    color: '#ffffff',
    fontSize: 16,
  },
  f1: {flex: 1},
  helloWorldTextStyle: {
    fontFamily: 'Arial',
    fontSize: 128,
    color: '#ffffff',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
});