react-three/xr を使って Web AR コンテンツを制作する

pnpm create cloudflare@latest --framework react-router scrap-web-ar

pnpm install three @types/three @react-three/fiber

pnpm i -D -E @biomejs/biome
pnpm biome init

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

export function meta() {
  return [{ title: "Scrap Web AR" }];
}

export default function Home() {
  return (
    <Canvas>
      <ambientLight intensity={0.1} />
      <directionalLight color="red" position={[0, 0, 5]} />
      <mesh>
        <boxGeometry args={[2, 2, 2]} />
        <meshStandardMaterial />
      </mesh>
    </Canvas>
  );
}

pnpm i @react-three/xr

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

export function meta() {
  return [{ title: "Scrap Web AR" }];
}

const store = createXRStore();

export default function Home() {
  return (
    <>
      <button type="button" onClick={() => store.enterAR()}>
        Enter AR
      </button>
      <Canvas>
        <XR store={store}>
          <mesh position={[0, 1, -1]}>
            <boxGeometry />
            <meshBasicMaterial color="red" />
          </mesh>
        </XR>
      </Canvas>
    </>
  );
}

pnpm run deploy

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

export function meta() {
  return [{ title: "Scrap Web AR" }];
}

const store = createXRStore();

export default function Home() {
  return (
    <>
      <button type="button" onClick={() => store.enterAR()}>
        Enter AR
      </button>
      <Canvas>
        <XR store={store}>
          <ambientLight intensity={0.5} />
          <directionalLight position={[0, 10, 10]} intensity={1.5} />
          <mesh position={[0, 1, -1]}>
            <cylinderGeometry args={[250e-3, 250e-3, 500e-3]} />
            <meshStandardMaterial />
          </mesh>
        </XR>
      </Canvas>
    </>
  );
}

pnpm i -D @vitejs/plugin-basic-ssl

import { cloudflare } from "@cloudflare/vite-plugin";
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import basicSsl from "@vitejs/plugin-basic-ssl";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    cloudflare({ viteEnvironment: { name: "ssr" } }),
    tailwindcss(),
    reactRouter(),
    tsconfigPaths(),
    basicSsl(),
  ],
});

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

export function meta() {
  return [{ title: "Scrap Web AR" }];
}

const store = createXRStore();

export default function Home() {
  return (
    <>
      <button type="button" onClick={() => store.enterAR()}>
        Enter AR
      </button>
      <div className="flex justify-center">
        <div className="w-[800px] h-[600px]">
          <Canvas>
            <XR store={store}>
              <ambientLight intensity={0.5} />
              <directionalLight position={[0, 10, 10]} intensity={1.5} />
              <mesh position={[0, 1, -1]}>
                <cylinderGeometry args={[250e-3, 250e-3, 500e-3]} />
                <meshStandardMaterial />
              </mesh>
            </XR>
          </Canvas>
        </div>
      </div>
    </>
  );
}

import { Canvas } from "@react-three/fiber";
import { XR, createXRStore } from "@react-three/xr";
import { useState } from "react";

export function meta() {
  return [{ title: "Scrap Web AR" }];
}

const store = createXRStore();

export default function Home() {
  const [color, setColor] = useState("white");
  const toggleColor = () => {
    setColor((prevColor) => (prevColor === "white" ? "orange" : "white"));
  };

  return (
    <>
      <button type="button" onClick={() => store.enterAR()}>
        Enter AR
      </button>
      <div className="flex justify-center">
        <div className="w-[800px] h-[600px]">
          <Canvas>
            <XR store={store}>
              <ambientLight intensity={0.5} />
              <directionalLight position={[0, 10, 10]} intensity={1.5} />
              <mesh position={[0, 1, -1]} onClick={toggleColor}>
                <cylinderGeometry args={[250e-3, 250e-3, 500e-3]} />
                <meshStandardMaterial color={color} />
              </mesh>
            </XR>
          </Canvas>
        </div>
      </div>
    </>
  );
}

import { Canvas } from "@react-three/fiber";
import { XR, createXRStore } from "@react-three/xr";
import { type ComponentProps, useState } from "react";

export function meta() {
  return [{ title: "Scrap Web AR" }];
}

const store = createXRStore();

export default function Home() {
  return (
    <>
      <button type="button" onClick={() => store.enterAR()}>
        Enter AR
      </button>
      <div className="flex justify-center">
        <div className="w-[800px] h-[600px]">
          <Canvas>
            <XR store={store}>
              <ambientLight intensity={0.5} />
              <directionalLight position={[0, 10, 10]} intensity={1.5} />
              <TogglableCylinder position={[0, 1, -1]} />
              <TogglableCylinder position={[0, 1, -2]} pointerEventsOrder={1} />
            </XR>
          </Canvas>
        </div>
      </div>
    </>
  );
}

function TogglableCylinder(props: ComponentProps<"mesh">) {
  const [color, setColor] = useState("white");
  const toggleColor = () => {
    setColor((prevColor) => (prevColor === "white" ? "orange" : "white"));
  };

  return (
    <mesh onClick={toggleColor} {...props}>
      <cylinderGeometry args={[250e-3, 250e-3, 500e-3]} />
      <meshStandardMaterial color={color} />
    </mesh>
  );
}

import { Canvas } from "@react-three/fiber";
import { XR, createXRStore } from "@react-three/xr";
import { useRef } from "react";
import type { Mesh } from "three";

export function meta() {
  return [{ title: "Scrap Web AR" }];
}

const store = createXRStore();

export default function Home() {
  return (
    <>
      <button type="button" onClick={() => store.enterAR()}>
        Enter AR
      </button>
      <div className="flex justify-center">
        <div className="w-[800px] h-[600px]">
          <Canvas>
            <XR store={store}>
              <ambientLight intensity={0.5} />
              <directionalLight position={[0, 10, 10]} intensity={1.5} />
              <DraggableCube />
            </XR>
          </Canvas>
        </div>
      </div>
    </>
  );
}

function DraggableCube() {
  const isDraggingRef = useRef(false);
  const meshRef = useRef<Mesh>(null);

  return (
    <mesh
      ref={meshRef}
      onPointerDown={(e) => {
        if (isDraggingRef.current) {
          return;
        }

        isDraggingRef.current = true;
        meshRef.current?.position.copy(e.point);
      }}
      onPointerMove={(e) => {
        if (!isDraggingRef.current) {
          return;
        }

        meshRef.current?.position.copy(e.point);
      }}
      onPointerUp={(e) => {
        isDraggingRef.current = false;
      }}
    >
      <boxGeometry />
    </mesh>
  );
}

import { Canvas } from "@react-three/fiber";
import {
  XR,
  XRPlaneModel,
  XRSpace,
  createXRStore,
  useXRPlanes,
} from "@react-three/xr";

export function meta() {
  return [{ title: "Scrap Web AR" }];
}

const store = createXRStore();

export default function Home() {
  return (
    <>
      <button type="button" onClick={() => store.enterAR()}>
        Enter AR
      </button>
      <div className="flex justify-center">
        <div className="w-[800px] h-[600px]">
          <Canvas>
            <XR store={store}>
              <ambientLight intensity={0.5} />
              <directionalLight position={[0, 10, 10]} intensity={1.5} />
              <RedWalls />
            </XR>
          </Canvas>
        </div>
      </div>
    </>
  );
}

function RedWalls() {
  const wallPlanes = useXRPlanes("wall");

  return (
    <>
      {wallPlanes.map((plane) => (
        <XRSpace space={plane.planeSpace}>
          <XRPlaneModel plane={plane}>
            <meshBasicMaterial color="red" />
          </XRPlaneModel>
        </XRSpace>
      ))}
    </>
  );
}

@react-three/fiber と @react-three/xr を使用して次のような Web AR コンテンツを制作したいです。

- コントローラーを使用して床の平面内に含まれる座標を選択する
- 選択した座標上に立方体を表示する

実装方法について考えてください。

import { Canvas } from '@react-three/fiber'
import { XR, Interactive, createXRStore } from '@react-three/xr'
import { useState, useRef } from 'react'
import * as THREE from 'three'

interface Cube {
  id: string
  position: [number, number, number]
}

const store = createXRStore()

function ARContent() {
  const [cubes, setCubes] = useState<Cube[]>([])
  const planeRef = useRef<THREE.Mesh>(null!)

  const handlePlaneSelect = (event: { intersection: THREE.Intersection; intersections: THREE.Intersection[]; target: THREE.Object3D }) => {
    if (event.intersections && event.intersections.length > 0) {
      const intersection = event.intersections[0]
      const position = intersection.point
      const newCube: Cube = {
        id: Date.now().toString(),
        position: [position.x, position.y + 0.1, position.z]
      }
      setCubes(prev => [...prev, newCube])
    }
  }

  return (
    <>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      
      {/* Interactive floor plane */}
      <Interactive onSelect={handlePlaneSelect}>
        <mesh
          ref={planeRef}
          rotation={[-Math.PI / 2, 0, 0]}
          position={[0, 0, 0]}
        >
          <planeGeometry args={[10, 10]} />
          <meshStandardMaterial 
            color="gray" 
            transparent 
            opacity={0.3}
            side={THREE.DoubleSide}
          />
        </mesh>
      </Interactive>
      
      {/* Render placed cubes */}
      {cubes.map((cube) => (
        <mesh key={cube.id} position={cube.position}>
          <boxGeometry args={[0.1, 0.1, 0.1]} />
          <meshStandardMaterial color="red" />
        </mesh>
      ))}
    </>
  )
}

export default function ARScene() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <button
        onClick={() => store.enterAR()}
        style={{
          position: 'absolute',
          top: '20px',
          left: '20px',
          zIndex: 1000,
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer'
        }}
      >
        Enter AR
      </button>
      
      <Canvas>
        <XR store={store}>
          <ARContent />
        </XR>
      </Canvas>
    </div>
  )
}