Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cant load the 3D Computer #138

Open
DonJuan2968 opened this issue Mar 13, 2024 · 2 comments
Open

Cant load the 3D Computer #138

DonJuan2968 opened this issue Mar 13, 2024 · 2 comments

Comments

@DonJuan2968
Copy link

DonJuan2968 commented Mar 13, 2024

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

@akibiaons
Copy link

akibiaons commented Mar 13, 2024

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

@Abhijeetkadtan
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants