react-three-fiberreact-three-drei

Canvas from '@react-three/fiber' makes height bigger then my model in the scene

so i have a model on the screenshot and as you can see canvas is much bigger then model itself. I've tried different thing but didn't manage to achieve anything. I need to make my model's height equals to canva's height. Can anyone help me with this please?
enter image description here

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment, ContactShadows } from '@react-three/drei'
import { Model } from './Model'

const Robot = () => {
    return (
        <Canvas shadows camera={{ position: [-5, 0, 20], fov: 20 }}>
            <ambientLight intensity={1.25} />
            <ambientLight intensity={0.1} />
            <directionalLight intensity={0.4} />
            <Model></Model>
            <ContactShadows position={[0, -0.8, 0]} color="#ffffff" />
            <OrbitControls autoRotate />
        </Canvas>
    );
}

export default Robot;
Solution

  • So i just needed to adjust camera's FOV and its position

    <Canvas shadows camera={{ position: [-5, 2, 20], fov: 40 }}>

    and that's it