OrbitControls don't work in react-native

[cneltyn]

• three version: 0.138.3
• @react-three/fiber version: ^8.0.0-beta.3
• @react-three/drei version: ^8.16.5
• node version: 16.14.0
• yarn version: 1.22.4
• react-native version: 0.64.3

Problem description:

The use of OrbitControls imported from drei/native leads to ReferenceError: Can't find variable: document.

Relevant code:

Simple example from here , just have added OrbitControls.

import React, { Suspense } from 'react'
import { useFrame, Canvas } from '@react-three/fiber/native'
import { useGLTF, Environment, OrbitControls } from '@react-three/drei/native'
import iphoneModelPath from './assets/iphone.glb'

const Model = ({ url, ...rest }) => {
  const { scene } = useGLTF(url)
  useFrame(() => (scene.rotation.y += 0.05))
  return <primitive {...rest} object={scene} />
}

const App = () => (
  <Canvas gl={{ physicallyCorrectLights: true }} camera={{ position: [-6, 0, 16], fov: 36 }}>
    <color attach="background" args={[0xe2f4df]} />
    <ambientLight />
    <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
    <directionalLight intensity={0.8} position={[-6, 2, 2]} />
    <Suspense fallback={null}>
      <Environment preset="park" />
      <Model url={iphoneModelPath} />
    </Suspense>
    <OrbitControls />
  </Canvas>
)

export default App

Is there any ability to rotate the model with fingers in react-native the other way?

[asabadyr]

Hi guys, do you plan supporting OrbitControls for RN? Any support I can provide to help?

[cneltyn]

Any updates with the new version of drei for RN?

[dineshsalunke]

Orbitcontrols from drei is just a wrapper around the three Orbitcontrols, three Orbitcontrols is tightly coupled to the dom since it adds event listeners for pointer and wheel events.

So supporting this would out of the box seems to be out of question.

[Jervi-sir]

is there any alternative that does the same job in reactNative ?

[foufrix]

Hi @Jervi-sir, This is not entirely my work, but I updated an existing package and will try to maintain it https://github.com/foufrix/expo-three-orbit-controls

You can install directly from GitHub for the moment. I'll look at how to add it to npm. For the moment, only moving the object around is working, zooming and moving around is not working yet. I'm looking into it, and feel free to send a pull request