OrbitControl Zoom 할 때, Unable to preventDefault()...

[seunguri]

[seunguri]

Zoom을 막자

<OrbitControls makeDefault  enableZoom={false}/>

[Me1e]

OrbitControls 컴포넌트를 extend하자

import { useEffect } from 'react';
import { extend, useThree } from '@react-three/fiber';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

extend({ OrbitControls });

const CustomOrbitControls = () => {
  const {
    camera,
    gl: { domElement },
  } = useThree();

  useEffect(() => {
    const handleTouchStart = (event) => {
      event.preventDefault();
    };

    domElement.addEventListener('scroll', handleTouchStart, {
      passive: false,
    });
    return () => {
      domElement.removeEventListener('scroll', handleTouchStart);
    };
  }, [domElement]);

  return <orbitControls args={[camera, domElement]} />;
};

export default CustomOrbitControls;

[Me1e]

import { OrbitControls } from '@react-three/drei'; drei 라이브러리에서 import하면 해결되는 듯?