Unable to see desktop_pc/'scene.gltf

[divyanshmathur13]

Please help as soon as possible I have followed the steps till video at 53 mins and all things till now are working fine but I AM UNABLE TO THE DESKTOP SCENE.GLTF whereas do not have any error in the terminal. As suggested in the video: import { OrbitControls, Preload, useGLTF} from '@react-three/drei'; is not working for me it is giving me error:
Missing "./examples/js/libs/stats.min" specifier in "three" package [plugin vite:dep-pre-bundle] ![error desktop scene gltf] node_modules/@react-three/drei/core/Stats.js:3:22: 3 │ import StatsImpl from 'three/examples/js/libs/stats.min';

[gaganku]

Seems like you haven't properly installed the 'three' package.

Open a terminal, cd to your root folder (that contains your package.json and tsconfig.json/jsconfig.json) and run " npm list ". This will show you all of the packages you've installed for your current project.

If 'three' doesn't show up, you must " npm i three --save " (or ' npm i three @types/three --save " of you're using TypeScript).

[divyanshmathur13]

Seems like you haven't properly installed the 'three' package.

Open a terminal, cd to your root folder (that contains your package.json and tsconfig.json/jsconfig.json) and run " npm list ". This will show you all of the packages you've installed for your current project.

If 'three' doesn't show up, you must " npm i three --save " (or ' npm i three @types/three --save " of you're using TypeScript). I have installed three but still cannot see the desktop.gltf or any image at its place.

[Tusharknwl]

divyanshmathur13 can you provide the whole code of Computers.jsx and check if you are using export default Computers change it to export default ComputersCanvas

[Amay-S]

@Tusharknwl @divyanshmathur13

using export default ComputersCanvas worked. Thanks very much

[Kritansh1]

@Tusharknwl I'm providing you the code for Computer.jsx please check it, i'm unable to see the computer, also I've installed three properly

import {Suspense,useEffect,useState} from 'react'; import { Canvas } from '@react-three/fiber'; import { OrbitControls,Preload,useGLTF } from '@react-three/drei'; import CanvasLoader from '../Loader'; import { RGBA_ASTC_10x10_Format } from 'three';

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

return ( <hemisphereLight intensity={0.15} groundColor="black"/> <pointLight intensity={1}/> <spotLight position={[-20,50,10]} angle={0.12} penumbra={1} intensity={1} castShadow shadow-mapSize={1024} /> ) }

const ComputersCanvas =()=>{ return( <Canvas frameloop="demand" shadows camera={{position: [20,30,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 Computers

[Satvik77]

@Tusharknwl I'm providing you the code for Computer.jsx please check it, i'm unable to see the computer, also I've installed three properly

import {Suspense,useEffect,useState} from 'react'; import { Canvas } from '@react-three/fiber'; import { OrbitControls,Preload,useGLTF } from '@react-three/drei'; import CanvasLoader from '../Loader'; import { RGBA_ASTC_10x10_Format } from 'three';

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

return ( ) }

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

</Canvas>

) }

export default ComputersCanvas;//replace here

[Kritansh1]

@Tusharknwl I'm providing you the code for Computer.jsx please check it, i'm unable to see the computer, also I've installed three properly import {Suspense,useEffect,useState} from 'react'; import { Canvas } from '@react-three/fiber'; import { OrbitControls,Preload,useGLTF } from '@react-three/drei'; import CanvasLoader from '../Loader'; import { RGBA_ASTC_10x10_Format } from 'three'; const Computers = () => { const computer = useGLTF('./desktop_pc/scene.gltf') return ( ) } const ComputersCanvas =()=>{ return( <Canvas frameloop="demand" shadows camera={{position: [20,30,5],fov: 25}} gl={{preserveDrawingBuffer:true }} > <OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} />

</Canvas>

) } export default ComputersCanvas;//replace here

Thanks Brother, I need one more help I'm writing the code for about.jsx in that whenever I write it, the page becomes white any solution to that?

[khalilsuth]

@Tusharknwl I'm providing you the code for Computer.jsx please check it, i'm unable to see the computer, also I've installed three properly import {Suspense,useEffect,useState} from 'react'; import { Canvas } from '@react-three/fiber'; import { OrbitControls,Preload,useGLTF } from '@react-three/drei'; import CanvasLoader from '../Loader'; import { RGBA_ASTC_10x10_Format } from 'three'; const Computers = () => { const computer = useGLTF('./desktop_pc/scene.gltf') return ( ) } const ComputersCanvas =()=>{ return( <Canvas frameloop="demand" shadows camera={{position: [20,30,5],fov: 25}} gl={{preserveDrawingBuffer:true }} > <OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} />

</Canvas>

) } export default ComputersCanvas;//replace here

Hi, can you please help me troubleshoot this issue too? I followed the thread but I must be missing something :/ I was getting errors where the commented code is and saw that you guys didn't return anything so I did the same.

[Tusharknwl]

@khalilsuth you are using the wrong syntax you must return your html element in the return().

update your Computers function like this

const Computers = () => {
    const computer = useGLTF('./desktop_pc/scene.gltf')
        return (
             <mesh> 
                 <hemisphereLight intensity={0.15}
                      groundColor="black" />
                 <pointLight intensity={1} />
                  <primitive 
                       object={computer.scene}
                     />
             </mesh>
          )
 }