Merge pull request #5 from nisshi-dev/feature/2-impl_sample_code

Feature/2 impl sample code

package.json

@@ -18,6 +18,7 @@
     "@lumaai/luma-web": "^0.1.16",
     "@react-three/drei": "^9.92.6",
     "@react-three/fiber": "^8.15.12",
+    "@react-three/xr": "^5.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "three": "^0.160.0"

src/App.tsx

@@ -1,34 +1,43 @@
-import * as THREE from "three";
-import { useRef, useState } from "react";
-import { Canvas, useFrame, ThreeElements } from "@react-three/fiber";
+import { useState } from "react";
+import { CustomCanvas } from "./components/CustomCanvas";
+import { Luma } from "./components/Luma";
+import { AdaptiveDpr, OrbitControls, PerspectiveCamera } from "@react-three/drei";
+import { VRButton, XR, Controllers, Hands } from '@react-three/xr'
 
 export const App = () => {
-  return (
-    <Canvas>
-      <ambientLight />
-      <pointLight position={[10, 10, 10]} />
-      <Box position={[-1.2, 0, 0]} />
-      <Box position={[1.2, 0, 0]} />
-    </Canvas>
-  );
-};
+  const [autoRotate, setAutoRotate] = useState(true);
 
-const Box = (props: ThreeElements["mesh"]) => {
-  const meshRef = useRef<THREE.Mesh>(null!);
-  const [hovered, setHover] = useState(false);
-  const [active, setActive] = useState(false);
-  useFrame((state, delta) => (meshRef.current.rotation.x += delta));
   return (
-    <mesh
-      {...props}
-      ref={meshRef}
-      scale={active ? 1.5 : 1}
-      onClick={(event) => setActive(!active)}
-      onPointerOver={(event) => setHover(true)}
-      onPointerOut={(event) => setHover(false)}
-    >
-      <boxGeometry args={[1, 1, 1]} />
-      <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
-    </mesh>
+    <div className="w-[100vw] h-[100vh]">
+      <VRButton />
+      <CustomCanvas>
+        <XR>
+          <Controllers />
+          <Hands />
+          <Luma
+            source="https://lumalabs.ai/capture/ca9ea966-ca24-4ec1-ab0f-af665cb546ff"
+            scale={2}
+            enableThreeShaderIntegration={false}
+          />
+          <AdaptiveDpr pixelated />
+          <PerspectiveCamera
+            fov={75}
+            aspect={window.innerWidth / window.innerHeight}
+            near={0.1}
+            far={1000}
+            position={[0, 0, 5]}
+          />
+          <OrbitControls
+            autoRotate={autoRotate}
+            autoRotateSpeed={2.5}
+            enableDamping={true}
+            onStart={() => {
+              setAutoRotate(false);
+            }}
+            makeDefault
+          />
+        </XR>
+      </CustomCanvas>
+    </div>
   );
 };

src/components/CustomCanvas/index.tsx

@@ -0,0 +1,28 @@
+import { Canvas } from "@react-three/fiber";
+import { ReactNode } from "react";
+import { CineonToneMapping } from "three";
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const CustomCanvas = ({ children, className }: Props) => {
+  return (
+    <Canvas
+      gl={{
+        antialias: true,
+        toneMapping: CineonToneMapping,
+      }}
+      style={{
+        minWidth: "10px",
+      }}
+      onPointerDown={(e) => {
+        e.preventDefault();
+      }}
+      className={className}
+    >
+      {children}
+    </Canvas>
+  );
+};

src/components/Luma/index.tsx

@@ -0,0 +1,18 @@
+import { Object3DNode, extend } from "@react-three/fiber";
+import { LumaSplatsThree } from "@lumaai/luma-web";
+
+extend({ LumaSplats: LumaSplatsThree });
+
+declare module "@react-three/fiber" {
+  interface ThreeElements {
+    lumaSplats: Object3DNode<LumaSplatsThree, typeof LumaSplatsThree>;
+  }
+}
+
+export const Luma = (props: Object3DNode<LumaSplatsThree, typeof LumaSplatsThree>) => {
+  return (
+    <lumaSplats
+      {...props}
+    />
+  );
+};