XRworkshop

"use client";
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Environment, useGLTF, DragControls, Box, RoundedBox, ContactShadows, AccumulativeShadows, Grid } from '@react-three/drei';
import { PointerEvents, XR, createXRStore, noEvents } from '@react-three/xr';
import { AmbientLight, GridHelper, Mesh, PointLight, Ray, Vector3 } from 'three';
import { Suspense, useRef, useState } from 'react';
import { Physics, RigidBody } from '@react-three/rapier';
import DraggableRigidBody from '@/helpers/DraggableRigidBody';
import { DraggableRigidBodyProps } from '@/helpers/DraggableRigidBody';
import { Button } from '@/components/ui/button';
import { outline } from 'three/examples/jsm/tsl/display/OutlineNode.js';
import { Draggable, HandInteractions } from '@/components/draggable';
const store = createXRStore({
  hand: {
    grabPointer: true,
    rayPointer: false,
    touchPointer: false,
  },
  secondaryInputSources: true,

  controller: {
    rayPointer: true,
    grabPointer: true,
  },
})

// Beggingin of the Project //////////////////////////////////////////////
export default function XRPage() {
  return (
    <>
      <Button className='m-12' variant={"outline"} onClick={() => store.enterAR()}>Enter AR</Button>
      <XRScene />

    </>
  );
}



export function XRScene() {
  return (
    <>
      <Canvas className='h-full' camera={{ position: [0, 3, 5] }}>
        <XR store={store}>
          <ambientLight />
          <OrbitControls />
          <Environment preset='city' />

          <Physics paused={true}>
            <DominoBone position={[0, 0.64, 0]} rotation={[0, 1.5707963267948966, 0]} />
            {/* <DominoBone position={[0, 0.25, 0.5]} /> */}
            <Floor />
            <Draggable>
              <Model />
            </Draggable>

          </Physics>
          <HandInteractions />
        </XR>
      </Canvas >
    </>
  )
}

export function DominoBone({ position = [0, 0, 0], rotation = [0, 0, 0], ...props }: { position?: [number, number, number], rotation?: [number, number, number] }) {
  return (
    <RigidBody position={position} rotation={rotation}>
      <RoundedBox
        args={[0.5, 1, 0.2]}
        radius={0.02}
        smoothness={4}
        bevelSegments={4}
        castShadow={true}
      >
        <meshStandardMaterial color={"red"} />
      </RoundedBox>
    </RigidBody>
  )
}

function Floor() {
  return (
    <RigidBody type='fixed' position={[0, -0.05, 0]}>
      <mesh>
        <boxGeometry args={[10, 0.1, 10]} />
        <meshStandardMaterial color={"grey"} />
      </mesh>
    </RigidBody>
  )
}


function Model(props: any) {
  const { scene } = useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/hammer/model.gltf')
  return <primitive object={scene} {...props} />
}