소개

React Native에서 ARKit을 사용하고 싶었던 것을 시도했습니다.
사용할 라이브러리는 react-native-arkit입니다.

완성형은 다음과 같습니다.



그럼, 구현해 갑니다.

설치

솔직히, 여기가 가장 귀찮았습니다.
공식이, React Native >= 60.0 로부터 추가된 Autolink 에 대응하고 있지 않다…!

아직 캡처되지 않은 수정 풀 요청이 있었기 때문에 그곳을 따랐습니다.

yarn add github:code-matt/react-native-arkit react-native-svg

Pod.file에 다음 두 줄을 추가합니다.

  pod 'RCTARKit', :path => "../node_modules/react-native-arkit/ios/RCTARKit.podspec"
  pod 'PocketSVG

이제 pod install가 움직일 것입니다.

아래 준비

ARKit이 병위를 인식할 수 있도록 이미지를 캡처합니다.
Asset Catalog Images.xcassets에 AR Resource Group를 만들어 사진을 설정합니다.



그런 다음 3D 객체를 준비합니다.
마지막으로 소개하는 참고 페이지에서 소개된 사이트 에서 청안의 백룡 개체를 다운로드하여 .scn 파일을 만듭니다.

XCode에서 SceneKit Catalog를 만들고 이름을 art.scnassets로 지정했습니다.
만든 .scn 파일을 그 안으로 옮깁니다.

내 환경에서는 이것만으로는 색이없는 새하얀 물체가되었습니다.
PNG 파일을 보고 색깔을 맞추고 있는 것 같았으므로, 함께 들어가 있던 PNG 파일도 격납했더니, 제대로 색깔로 표시되게 되었습니다.

구현

const ARKitContainer: React.FunctionComponent = () => {
  const [position, setPosition] = useState(null);
  return (
    <ARKit
      style={{ flex: 1 }}
      debug
      // enable plane detection (defaults to Horizontal)
      planeDetection={ARKit.ARPlaneDetection.Horizontal}
      // enable light estimation (defaults to true)
      lightEstimationEnabled
      onAnchorDetected={(anchor) => {
        setPosition(anchor?.position);
      }}
      onAnchorUpdated={(anchor) => {
        setPosition(anchor?.position);
      }}
      onAnchorRemoved={(anchor) => {
        setPosition(null);
      }}
      // you can detect images and will get an anchor for these images
      detectionImages={[{ resourceGroupName: 'AR Resources' }]}
    >
      {position && (
        <ARKit.Model
          position={{ ...position, z: position.z * 1.25, frame: 'local' }}
          scale={0.01}
          model={{
            scale: 1,
            file: 'art.scnassets/BlueEyes.scn',
          }}
        />
      )}
    </ARKit>
  );
};

AR Resources 의 자원 그룹을 검출했을 때, 그 좌표를 position 로 설정하고 있습니다.position 가 있는 경우, 그 위치에 art.scnassets/BlueEyes.scn 를 표시하고 있습니다.

ARKit의 검출 정밀도가 좋기 때문에, 특히 바뀐 일을 하지 않아도, 아무리 병위를 찾아내면 청안의 백룡을 소환할 수 있게 되었습니다.

결론

어땠습니까?
Swift x ARKit의 예는 많이 나왔지만 React Native에서 AR을 하고 있던 기사는 별로 발견되지 않았습니다.
라이브러리가 업데이트(Autolink 대응)되어 있지 않고, 인스톨로 집계한 것이 제일 난점이었습니다.

3D 모델조차 손에 넣으면 여러가지 가능성을 느꼈기 때문에 좀 더 ARKit에서 놀고 싶습니다.

참고

휴일 2일을 제물로 청안의 백룡을 소환!