adrianhajdin / project_3D_developer_portfolio

The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!

Home Page:https://jsmastery.pro

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cant load the 3D Computer

DonJuan2968 opened this issue · comments

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 (





)
}

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

  <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 (


<div className={${styles.paddingX} absolute inset-0 top-[120px] max-w-7xl mx-auto flex flex-row items-start gap-5}>





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




  <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

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

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.