react-three-fiber + expo-three-orbit-controls example?

[ogaseb]

Hi! Is there even a way to make it work with the Canvas component that react-three-fiber is providing? I was trying to wrap Canvas with your component but it doesn't seem to work like that.

const ThreeCanvas = () => {
  const {assetsStore: { fetchAssets }} = useStore()
  const {camera} = useThree()
  
  useEffect(() => {
    fetchAssets()
  }, [])

return (
<OrbitControlsView style={{ flex: 1 }} camera={camera}>
    <Canvas
      shadowMap
      gl={{antialias: true, logarithmicDepthBuffer: true}}
    >
      <Camera position={[0, 30, 100]} far={50000}/>
      <ambientLight/>
      <spotLight intensity={0.3} position={[30, 30, 50]} angle={0.2} penumbra={1} castShadow/>
      <spotLight intensity={0.3} position={[-30, 30, 50]} angle={0.2} penumbra={1} castShadow/>
      <Sphere position={[2, 3, 0]} castShadow/>
      <Box castShadow/>
      <Skybox/>
      <Plane receiveShadow/>
    </Canvas>
</OrbitControlsView>
)}

[5ervant]

You might end up using react-native-webview to wrap your Three.js canvas webpage into your Expo native app.

Anyway, just let me know if you found how to make react-three-fiber + expo-three-orbit-controls exchangeably work.

[ogaseb]

I did a mistake and wrapped OrbitControlsView in parent View that's why I was getting errors. But, even doing it "right" so without parent View it's rendering everything correctly, but it's not responsive, touch controls don't work. Now I'm not sure if it's a problem with my device (oneplus 6) or there is something that I'm missing.

[5ervant]

@ProPanek In my case, I end up using<WebView source={{ uri: 'http://10.0.2.2:8080/embedding-page' }} /> wrapper, because most of the parts of my react-three-fiber canvas have problems with Expo app.

E.g.,

• Implementing interchangeable OrbitControls in both Next.js and Expo is just my luck. [nextjs] Importing OrbitControls resulting to "SyntaxError: Cannot use import statement outside a module" expo/expo-cli#2059 (comment)
• At the end, loading text .blob files in Expo will trigger CORS or might not really support web files. [nextjs] External URL is being blocked by CORS policy expo/expo-cli#2003 (comment)

It's really hard to implement an interchangeable Three.js canvas with Next.js and Expo.
I though react-three-fiber will solve that but it's not! (But if not the only way, it's the best way to use Three.js with Next.js.)

Three.js is really build FOR WEB. I guess expo-three have their own implementations how to load native files but not web files.

[dmegue]

For anyone trying to get it to work along with react-three-fiber:

import {
  Canvas,
  useRender,
  useFrame,
  useUpdate,
  useThree,
  useResource,
  useLoader,
} from "react-three-fiber/native";

const Test: React.FC = () => {
    const [camera, setCamera] = useState<Camera | null>(null);
    
    function Camera(props?: any) {
        const { camera } = useThree();
        
        useEffect(() => {
          setCamera(camera);
        }, []);
        return <perspectiveCamera ref={camera} {...props} />;
      }
    
    return(
    <View style={{ flex: 1 }}>
          <OrbitControlsView style={{ flex: 1 }} camera={camera}>
            <Canvas>
              <Camera/>
            </Canvas>
          </OrbitControlsView>
        </View>
    )
}

Only issue i'm facing now, is that the Canvas is not receiving touch/click events anymore.

[slessans]

Thanks @dmegue your example was super helpful. I was able to get this working in a more concise way with:

const Test = () => {
    const [camera, setCamera] = useState<Camera | null>(null);    
    return(
      <View style={{ flex: 1 }}>
        <OrbitControlsView style={{ flex: 1 }} camera={camera}>
          <Canvas onCreated={({ camera }) => setCamera(camera)}></Canvas>
        </OrbitControlsView>
     </View>
    )
}

[merveillevaneck]

i have found another library that manages to fix orbit controls for RN with r3f https://github.com/TiagoCavalcante/r3f-native-orbitcontrols ive tested this and it seems to do the trick, without deafening the gesture events

[MainzerKaiser]

I also tried the r3f-native-orbitcontrols, but my functions at onChange are to expensive to be executed on every render during touch. How can i mimick a onrelease event in r3f-native-orbitcontrols?