I just started learning three.js and I wanted to test out importing models using the gltf loader. when I load a certain 3d model my scene looks like this ,

but without the model ,the background looks like this (after enabling alpha true and changing the bg of the canvas to a gradient)

the object im trying to load is this,

Im assuming it has something to do with the camera angle or object scale ,Below is my complete js code.

const loader = new GLTFLoader();
const gui = new dat.GUI()
loader.load('orange.glb', (gltf) => {
   browserscene.add(gltf.scene)
   gltf.scene.position.x = 10
   gltf.scene.position.y = 20
   gltf.scene.rotation.x = 0.2
   gltf.scene.rotation.z = 0.8
   gltf.scene.scale.x = 3
   gltf.scene.scale.y = 3

 });


  // Debug


  // Canvas
  const canvas = document.querySelector('canvas.webgl')

  // Scene
  const browserscene = new THREE.Scene()

  // Materials

   const material = new THREE.MeshBasicMaterial()
   material.color = new THREE.Color(0xFFFE00)

   // Lights

   var light = new THREE.HemisphereLight(0x404040, 0xFFFFFF, 10);
   browserscene.add(light);

   const sizes = {
     width: window.innerWidth,
     height: window.innerHeight
    }

     window.addEventListener('resize', () => {
      // Update sizes
      sizes.width = window.innerWidth
      sizes.height = window.innerHeight

       // Update camera
       camera.aspect = sizes.width / sizes.height
       camera.updateProjectionMatrix()

       // Update renderer
       renderer.setSize(sizes.width, sizes.height)
       renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
      })


      const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
      camera.position.x = 0
      camera.position.y = 0
      camera.position.z = 2
      browserscene.add(camera)


      const renderer = new THREE.WebGLRenderer({
         canvas: canvas, antialias: true, alpha: true
      })
      renderer.setSize(sizes.width, sizes.height)
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

      const animate = () => {

      // Render
      requestAnimationFrame(animate)
      renderer.render(browserscene, camera)

    

     }

     animate()