как установить фиксированную позицию и отключить авто увеличение у orbitControls в React Three Fiber?

Привет, у меня есть модель react three fiber, которую я получил с sketchfab. Я установил управление орбитой, но положение объекта/моделей не фиксированное, и каждый раз, когда я пытаюсь прокрутить, оно автоматически зумирует, и я не могу прокрутить вниз. У тебя есть какое-нибудь решение для этого?

import { Canvas } from "@react-three/fiber"
import Models from "../components/Models"
import { Suspense } from "react"
import CanvasLoader from "../components/CanvasLoader"
import { OrbitControls, PerspectiveCamera } from "@react-three/drei"
import { Stage } from "@react-three/drei"

const Hero = () => {

  return (
    <section className="min-h-screen w-full flex
    flex-col relative">
        <div className="w-full mx-auto flex
        flex-col sm:mt-36 mt-20 c-space gap-3">
            <p className="sm:text-3xl text-2xl font-medium
            text-white text-center font-generalsans">
                Привет, я ------  
                &nbsp;<span className="waving-hand ">
                    🤓
                </span>
            </p>
            <p className="hero_tag text-gray_gradient">
                Фулстек разработчик
            </p>
        </div>

//CANVAS DIV
        enter image description here
    </section>
  )
}

export default Hero

Я хочу отключить авто зум и зафиксировать позицию моделей в центре.

<div className=" flex justify-center items-center absolute
        inset-0">
           <Canvas className="w-1/2 h-1/2 ">
           <Stage preset={"rembrandt"} intensity={1} environment={"sunset"}>

/* Мое первое решение вообще не сработало*/
           <OrbitControls enableZoom={false}/>
                <Suspense fallback={<CanvasLoader />}>
                <PerspectiveCamera  makeDefault position={[0,0,100]}/>

                    <Models scale={3} position={[0,-5,0]}/>

                    <ambientLight intensity={1} />
                    <directionalLight position={[100,0,10]} intensity={2}/>

                </Suspense>
                </Stage>
           </Canvas>
        </div>

Я уже пробовал установить ‘enableZoom’ на false, но здесь перед прокруткой это все равно не сработало.

То, что вы испытываете, имеет небольшое отношение к OrbitControls, CameraControls и т.д. как таковым. Если вы отключите зум, все будет работать нормально… вы просто не зумируете, и камера не реагирует на событие. Все сводится к топографии вашего макета. Имейте в виду, что Canvas является частью вашего HTML, и, как и другие секции в вашем DOM, он подчиняется тем же правилам. Существует несколько подходов к этой теме, и каждый из них зависит от того, как Canvas должен вести себя. В полноразмерных опытах Canvas обычно заполняет область просмотра, и все движения происходят внутри. В других случаях Canvas является частью макета, и это то, чем вы, похоже, и пытаетесь заняться. Вы можете добиться этого, заключив Canvas и CSS в обертку.

JSX

export default function App() {
  return (
    <div className="app-container">
      {/* Секция перед Canvas */}
      <div className="scrollable-stuff">
        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
        <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p>ccccccccccccccccccccccccccccccccccccccccccccc</p>
        <p>dddddddddddddddddddddddddddd</p>
        <p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
      </div>

      {/* Three/R3F Canvas */}
      <div className="canvas-container">
        <Canvas>
          <color attach="background" args={["black"]} />
          <OrbitControls
            enableZoom={false}
            enablePan={false}
            maxDistance={0.01}
            enableDamping={true}
          />
          <Box position={[0, 0, -2]}>
            <meshBasicMaterial color="red" />
          </Box>
        </Canvas>
      </div>

      {/* Секция после Canvas */}
      <div className="scrollable-stuff">
        <p>fffffffffffffffffffffffffffffffffffffffffff</p>
        <p>gggggggggggggggggggggggggggggggggggggggggg</p>
        <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
      </div>
    </div>
  );
}

CSS

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
}

.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.scrollable-stuff {
  padding: 20px;
  background-color: #f0f0f0;
}

.scrollable-stuff h1 {
  margin-bottom: 16px;
}

.scrollable-stuff p {
  margin: 8px 0;
}

.canvas-container {
  height: 500px;
  width: 100%;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

CODESANDBOX