Canvas too small

[LeviHarrison]

Hi, I've run across a problem using three-fiber with Next.js. The 3D object in the canvas, for example, a box, is too large for the canvas, and the sides are clipped out. When I make the box smaller, the canvas shrinks too, and the problem persists.

import { Canvas } from 'react-three-fiber'
import CenterPiece from '../components/centerpiece'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <>
    <Canvas>
      <ambientLight />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
      <pointLight position={[-10, -10, -10]} />
      <CenterPiece />
    </Canvas>
    </>
  )
}

import { useRef } from 'react'
import { useFrame } from 'react-three-fiber'

const CenterPiece = () => {
  const mesh = useRef()

  useFrame(() => {
    mesh.current.rotation.x = mesh.current.rotation.y += 0.01
  })

  return (
      <mesh ref={mesh}>
        <boxBufferGeometry args={[5, 5, 5]} />
        <meshStandardMaterial color="orange" />
      </mesh>
  )
}

export default CenterPiece

[drcmda]

canvas fills the witdh/height of the next relative/absolute parent. by default the browser will not make body/#root fill the screen. other than that you have camera settings on the canvas. move the camera a bit back <Canvas camera={{ position: [0,0,20] }) />it's z=10 by default