@react-three/xr で VR を試してみる

薄田達哉 / tatsuyasusukida 2023/07/19

このスクラップについて

https://github.com/pmndrs/react-xr

@react-three/xr は React Three Fiber の VR / AR ライブラリ。

3D シーンに VR / AR 機能を簡単に追加できるらしい。

このスクラップでは React Three Fiber と @react-three/xr を使って VR 対応の 3D シーンを構築し、Meta Quest 2 で立体視できるかどうかを試してみる。

薄田達哉 / tatsuyasusukida 2023/07/19に更新

プロジェクトの作成

コマンド

npx create-next-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*" \
  --use-npm \
  react-three-xr

薄田達哉 / tatsuyasusukida 2023/07/19に更新

npm パッケージのインストール

コマンド

cd react-three-xr
npm install @react-three/fiber @react-three/xr @react-three/drei

薄田達哉 / tatsuyasusukida 2023/07/19に更新

3D シーンの作成

src/app/page.tsx

"use client";

import { Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";

export default function Home() {
  return (
    <main className="container mx-auto">
      <h1 className="mt-4 mb-4 text-4xl">React Three XR</h1>
      <Canvas className="aspect-video border border-gray-300">
        <Sphere>
          <ambientLight intensity={0.1}></ambientLight>
          <pointLight intensity={0.8} position={[10, 10, 10]}></pointLight>
          <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
        </Sphere>
      </Canvas>
    </main>
  );
}

src/app/layout.tsx

import "./globals.css";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

球を表示した

薄田達哉 / tatsuyasusukida 2023/07/19

VRButton 追加

src/app/page.tsx

"use client";

import { Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { VRButton, XR } from "@react-three/xr";

export default function Home() {
  return (
    <main className="container mx-auto">
      <h1 className="mt-4 mb-4 text-4xl">React Three XR</h1>
      <div className="mb-4">
        <VRButton></VRButton>
      </div>
      <Canvas className="aspect-video border border-gray-300">
        <XR>
          <Sphere>
            <ambientLight intensity={0.1}></ambientLight>
            <pointLight intensity={0.8} position={[10, 10, 10]}></pointLight>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Sphere>
        </XR>
      </Canvas>
    </main>
  );
}

VRButton は下の方に固定で表示されるようだ

薄田達哉 / tatsuyasusukida 2023/07/19

GitHub リポジトリ作成

コマンド

gh repo create --public hello-react-xr
git remote add origin git@github.com:tatsuyasusukida/hello-react-xr
git push --set-upstream origin main

薄田達哉 / tatsuyasusukida 2023/07/19

Vercel デプロイ

GitHub リポジトリを選択して「Deploy」ボタンを押す

薄田達哉 / tatsuyasusukida 2023/07/19

デプロイ成功

「Continue to Dashboard」ボタンを押す

デプロイが成功すると URL が発行される。

https://hello-react-xr.vercel.app/

薄田達哉 / tatsuyasusukida 2023/07/19

VR ボタンが押せない

PC でアクセスすると VR ボタンのテキストが「VR unsupported」となる。

ヘッドマウントディスプレイを接続していないのでこれは期待通りの結果。

Meta Quest 2 で見たらどうなるか楽しみ

薄田達哉 / tatsuyasusukida 2023/07/19

Meta Quest 2 からアクセス

VR ボタンのテキストが「Enter VR」となる。

VR ボタンを押すと没入型コンテンツが開始される。

どうやら初期座標が (0, 0, 0) のようで体感としては球に埋まっている感じになる。

球の Z 座標を調整してみよう。

スクリーンショットが貼れなくて残念だ。

薄田達哉 / tatsuyasusukida 2023/07/19

球 Z 座標の調整

z = -5 にする。

src/app/page.tsx

"use client";

import { Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { VRButton, XR } from "@react-three/xr";

export default function Home() {
  return (
    <main className="container mx-auto">
      <h1 className="mt-4 mb-4 text-4xl">React Three XR</h1>
      <Canvas className="aspect-video border border-gray-300">
        <XR>
          <Sphere position={[0, 0, -5]}>
            <ambientLight intensity={0.1}></ambientLight>
            <pointLight intensity={0.8} position={[10, 10, 10]}></pointLight>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Sphere>
        </XR>
      </Canvas>
      <VRButton></VRButton>
    </main>
  );
}

球が小さくなった

薄田達哉 / tatsuyasusukida 2023/07/19

没入型コンテンツの終了方法

左側のコントローラーにあるメニューボタンを押すと終了できるようだ。

初めは分からなくてどうやって終了していいのか戸惑った。

薄田達哉 / tatsuyasusukida 2023/07/19

今度は良い感じになった

ただ球だとどこから見ても同じに見えるので立方体や円柱もあった方がわかりやすいかもしれない。

薄田達哉 / tatsuyasusukida 2023/07/19

立方体と円柱を追加する

ライトがなぜか Sphere 内に書いてあったのでこちらも修正した。

src/app/page.tsx

"use client";

import { Box, Cylinder, Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { VRButton, XR } from "@react-three/xr";

export default function Home() {
  return (
    <main className="container mx-auto">
      <h1 className="mt-4 mb-4 text-4xl">React Three XR</h1>
      <Canvas className="aspect-video border border-gray-300">
        <XR>
          <ambientLight intensity={0.1}></ambientLight>
          <pointLight intensity={0.8} position={[10, 10, 10]}></pointLight>
          <Box args={[1, 1, 1]} position={[-1.5, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Box>
          <Sphere args={[0.5]} position={[0, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Sphere>
          <Cylinder args={[0.5, 0.5, 1]} position={[1.5, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Cylinder>
        </XR>
      </Canvas>
      <VRButton></VRButton>
    </main>
  );
}

立方体が VR 動作確認に一番適していた

薄田達哉 / tatsuyasusukida 2023/07/19

ボタンのスタイル調整

ソースコードを読むと style プロパティを渡すことでスタイルを調整できるようだ。

className も利用できるのでこれらを併用してボタンの見た目をカスタマイズする。

src/app/page.tsx

"use client";

import { Box, Cylinder, Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { VRButton, XR } from "@react-three/xr";

export default function Home() {
  return (
    <main className="container mx-auto">
      <h1 className="mt-4 mb-4 text-4xl">React Three XR</h1>
      <div className="mb-4">
        <VRButton
          style={{}}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        ></VRButton>
      </div>
      <Canvas className="aspect-video border border-gray-300">
        <XR>
          <ambientLight intensity={0.1}></ambientLight>
          <pointLight intensity={0.8} position={[10, 10, 10]}></pointLight>
          <Box args={[1, 1, 1]} position={[-1.5, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Box>
          <Sphere args={[0.5]} position={[0, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Sphere>
          <Cylinder args={[0.5, 0.5, 1]} position={[1.5, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Cylinder>
        </XR>
      </Canvas>
    </main>
  );
}

見栄えの良いボタンになった

薄田達哉 / tatsuyasusukida 2023/07/19

コントローラーを表示する

VR 表示した時にコントローラーが見つからないと不便なので追加した。

src/app/page.tsx

"use client";

import { Box, Cylinder, Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { VRButton, XR, Controllers } from "@react-three/xr";

export default function Home() {
  return (
    <main className="container mx-auto">
      <h1 className="mt-4 mb-4 text-4xl">React Three XR</h1>
      <div className="mb-4">
        <VRButton
          style={{}}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        ></VRButton>
      </div>
      <Canvas className="aspect-video border border-gray-300">
        <XR>
          <Controllers />
          <ambientLight intensity={0.1}></ambientLight>
          <pointLight intensity={0.8} position={[10, 10, 10]}></pointLight>
          <Box args={[1, 1, 1]} position={[-1.5, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Box>
          <Sphere args={[0.5]} position={[0, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Sphere>
          <Cylinder args={[0.5, 0.5, 1]} position={[1.5, 0, -5]}>
            <meshStandardMaterial color="#fafafa"></meshStandardMaterial>
          </Cylinder>
        </XR>
      </Canvas>
    </main>
  );
}

薄田達哉 / tatsuyasusukida 2023/07/19

おわりに

@react-three/xr を使うとめちゃくちゃ簡単に VR 対応できることに驚愕した。

このスクラップではごく簡単なことしか試さなかったが色々なことができるみたいなので今後もどうにかして機会を作って学びたい。

ハンドトラッキング

ブロック崩し

薄田達哉 / tatsuyasusukida 2023/07/19

素晴らしいチュートリアルを発見した

https://sbcode.net/react-three-fiber/

このスクラップは2023/07/19にクローズされました