Cant load the 3D Computer

[DonJuan2968]

I did everything in the yt vid and im not getting the 3D model in my browser here is the code for Computers.jsx `import { Suspense, useEffect, useState} from 'react'; import { Canvas } from '@react-three/fiber'; import { OrbitControls, Preload, useGLTF } from '@react-three/drei'; import CanvasLoader from '../Loader'

const Computers = () => { const computer = useGLTF('./desktop_pc/scene.gltf')

return ( <hemisphereLight intensity={0.15} groundColor="black"/> <pointLight intensity={1} /> ) }

const ComputersCanvas = () => { return( <Canvas frameLoop="demand" shadows camera={{ position: [20, 3, 5], fov: 25 }} gl={{preserveDrawingBuffer: true }} > <Suspense fallback={<CanvasLoader />}> <OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} /> <Computers /> </Suspense>

  <Preload all />
</Canvas>

) }

export default ComputersCanvas;and the Hero code import { motion } from 'framer-motion'; import { styles } from '../styles'; import { ComputersCanvas } from './canvas';

const Hero = () => { return ( <section className="relative w-full h-screen mx-auto"> <div className={${styles.paddingX} absolute inset-0 top-[120px] max-w-7xl mx-auto flex flex-row items-start gap-5}> <div className="flex flex-col justify-center items-center mt-5"> <div className="w-5 h-5 rounded-full bg-[#9762fb]" /> <div className="w-1 sm:h-80 h-40 bg-[#9762fb]" />

<h1 className={${styles.heroHeadText} text-white}>Hallo, Ik ben <span className="text-[#9762fb]">Justin <p className={${styles.heroSubText} mt-2 text-white-100}> Ik ben een gepassioneerde <span className="text-[#9762fb]">Software
Development Student

<ComputersCanvas />

  <div className='absolute xs:bottom-10 bottom-32 w-full flex justify-center items-center'>
    <a href='#about'>
      <div className='w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2'>
        <motion.div
          animate={{
            y: [0, 24, 0],
          }}
          transition={{
            duration: 1.5,
            repeat: Infinity,
            repeatType: "loop",
          }}
          className='w-3 h-3 rounded-full bg-secondary mb-1'
        />
      </div>
    </a>
  </div>
</section>

) }

export default Hero // lijn kleur aanpassen naar violet-gradient`

the error codes in the console hemisphereLight incorrect cassing use pascal for react i also have this for pointLight

[akibiaons]

Does everything else load but the 3D model?? Also what kind of errors are you getting in Chrome Dev tools?

[Abhijeetkadtan]

Does everything else load but the 3D model?? Also what kind of errors are you getting in Chrome Dev tools?

Error: Objects are not valid as a React child (found: object with keys {isObject3D, uuid, name, type, parent, children, up, position, rotation, quaternion, scale, matrix, matrixWorld, matrixAutoUpdate, matrixWorldAutoUpdate, matrixWorldNeedsUpdate, layers, visible, castShadow, receiveShadow, frustumCulled, renderOrder, animations, userData, isGroup}). If you meant to render a collection of children, use an array instead.