Centering a 3D model & Targeting with OrbitControls

[Berat_Genc]

Hello everyone!,

I’ve been trying to center out a 3d model in my canvas. When I load the model, it locates itself somewhere that is apparently not even close to where I want it to be. What bothers me is that when I position it to (0,0,0) it does not show. Also when I use a say, box, it automatically position itself in the center of the canvas. I have theories they are about orbit controls, or the position of the camera. But again anyone knows the solution might be super happy.

Here is the source code;

const Scene = () => {
  const materials = useLoader(MTLLoader, "Poimandres.mtl");
  const obj = useLoader(OBJLoader, "Poimandres.obj", (loader) => {
    materials.preload();
    loader.setMaterials(materials);
  });

  return <primitive object={obj} scale={1.1} />;
};

const Lights = () => {
  const { camera, scene } = useThree();
  useThree(({ scene }) => (scene.background = "aliceblue"));
  return (
    <>
      <ambientLight intensity={0.3} />
      <directionalLight position={[10, 10, 5]} intensity={5} color="blue" />
      <directionalLight position={[-1000, 1000, 100]} intensity={2} />
      <spotLight intensity={1} position={[100, -1000, 100]} />
      <spotLight intensity={1} position={[-100, 1000, -100]} />
      <spotLight intensity={10} position={[-180, -1000, -100]} />
    </>
  );
};

export default function App() {
  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        textAlign: Center,
      }}
      className="App"
    >
      <Canvas camera={{ fov: 45 }}>
        <Lights />
        {/* <SkyBox /> */}

        <mesh position={[50, 100, 150]}>
          <boxBufferGeometry args={[1, 2, 3]} />
          <meshBasicMaterial color={"blue"} />
        </mesh>

        <Suspense fallback={null}>
          <Scene />
          <OrbitControls autoRotate enableDamping={true} dampingFactor={0.25} />
        </Suspense>
      </Canvas>
    </div>
  );
}

Thanks

I get this weird look.