OrbitControls zoom does not work with expo

[suggoooiii]

• three version: 0.167.1
• @react-three/fiber version: 8.17.5
• @react-three/drei version: 9.109.5
• node version: v20.15.0
• yarn version: 1.22.22
• expo version: ~51.0.26
• expo-gl version: ^14.0.2

Problem description:

when i use the zoom feature in OrbitControls it causes my 3d model to disappear from the screen. when i disable it OrbitControls works just fine, what i'm trying to accomplish is to zoom on each part of the model when i click or double click on it and show a short description.

Relevant code:

import { Canvas, useFrame, useThree } from "@react-three/fiber/native";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, View } from "react-native";
import Car from "./assets/models/Model.glb";
import { Center, Gltf, OrbitControls } from "@react-three/drei/native";
import { Suspense, useRef } from "react";


function CarModel({ onPartClick }) {
  const groupRef = useRef();
  const { camera } = useThree();

  useFrame((state, delta) => {
    if (groupRef.current) {
      // groupRef.current.rotation.y += delta * 0.1;
    }
  });

  const handleDoubleClick = (event) => {
    event.stopPropagation();
    if (event.object.name) {
      console.log(event.object.name);
    }
  };
  return (
    <group ref={groupRef} position={[0, 0, 0]} scale={0.3}>
      <mesh onClick={handleDoubleClick}>
        <Gltf src={Car} />
      </mesh>
    </group>
  );
}

export default function App() {
  const orbitControlsRef = useRef();

  return (
    <View style={styles.container}>
      <Canvas
        gl={{
          powerPreference: "high-performance",
          outputColorSpace: "srgb",
        }}
        // camera={{ position: [0, 0, 5], fov: 50 }}
      >
        <color attach="background" args={["#512DA8"]} />
        <ambientLight intensity={2} />
        <pointLight position={[1, 1, 1]} />
        <Suspense fallback={null}>
          <Center>
            <CarModel onPartClick={() => console.log("lol")} />
          </Center>
        </Suspense>
        <OrbitControls ref={orbitControlsRef} enableZoom={false} />
      </Canvas>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

[CodyJasonBennett]

OrbitControls probably sees null or undefined for one of the events used by zoom.

[suggoooiii]

so should i use a PerspectiveCamera instead ?

[CodyJasonBennett]

In three.js, the concept of controls and cameras are separate, where controls modify a camera, which is just the view transform. R3F already created a perspective camera for you, although you can tailor one with Drei's <PerspectiveCamera />. This issue seems to be with R3F's polyfills for DOM events not including properties for zoom/multi-touch, and it's integrating null/undefined against the camera, which makes it non-renderable.

[moose96]

I've created a PR in react-three-fiber repository which fixes this issue ;). Please look at it and review: pmndrs/react-three-fiber#3347