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.