R3f Native Orbit Controls Test

App.tsx

import {Canvas, MeshProps, useFrame, useLoader} from "@react-three/fiber/native"
// import useControls from "r3f-native-orbitcontrols"
import { useRef, useState } from "react"
import { View } from "react-native"
import { GLTFLoader } from "three-stdlib";
import { Suspense } from "react";
import { useGLTF } from '@react-three/drei/native'
import useControls from "r3f-native-orbitcontrols";

export default function App() {
  const [OrbitControls, events] = useControls()

  return (
    <View style={{ flex: 1 }} {...events} >
      <Canvas shadows>
        <Suspense fallback={null}>
          <OrbitControls />

          <ambientLight />
          <directionalLight castShadow intensity={0.6} position={[0, 0, 10]} />
          {/*<pointLight position={[3, 3, 3]} />*/}
          {/* https://codesandbox.io/s/6etx1?file=/public/Poimandres.gltf */}

          {/*<Box position={[-1, 0, 0]} rotation={[45, 45, 45]} scale={[1, 0.5, 1]} />*/}
          {/*<Box position={[1, 0, 0]} />*/}

          <Model />
        </Suspense>
      </Canvas>
    </View>
  )
}

const Model = () => {
  // const gltf = useGLTF("https://cdn.jsdelivr.net/gh/Sean-Bradley/React-Three-Fiber-Boilerplate@useGLTF/public/models/hammer.glb");
  const gltf = useGLTF("https://www.arweave.net/1Qi6CQm7jv35_2eDsqc3SraLaB_ngxdm_m1UVbKF8Us?ext=glb");
  return (
      <>
        <primitive object={gltf.scene} scale={0.008} />
      </>
  );
};

function Box(props: MeshProps) {
  const mesh = useRef<MeshProps>()

  const [active, setActive] = useState(false)

  useFrame((_, delta) => {
    mesh.current.rotation.x += delta
  })

  return (
    <mesh
      {...props}
      ref={mesh}
      onClick={(e) => {
        setActive((active) => !active)
      }}
    >
      <boxGeometry args={[1, 1, 2]} />
      {/*<meshStandardMaterial color={active ? "red" : "blue" } metalness={0.5} />*/}
      <meshToonMaterial color={active ? "red" : "blue" } />
    </mesh>
  )
}