I'm trying to use gltfjsx and I got a proble about gltf file path

[zerozoo-a]

Hello
I have converted the gltfjsx and have the JS file,
and I made a public folder to store the gltf file and the bin and texture folders.

this is my tree and below is my actual code

// box.jsx
import * as THREE from 'three';
import React, { Suspense, useRef, useMemo } from 'react';
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import { OrbitControls, Stars, useGLTF } from '@react-three/drei';
import { Physics, usePlane, useSphere } from '@react-three/cannon';
import styled from 'styled-components';
import Duck from './public/Scene';
const MashesContainer = styled.div'
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: black;
';

export default function Meshes() {
  return (
    <>
      <MashesContainer>
        <Canvas
          sRGB
          shadowMap
          colorManagement
          gl={{ alpha: false }}
          camera={{ position: [0, -12, 16], fov: 60 }}>
          <ambientLight color='#121212' intensity={0.1} />
          <spotLight position={[10, 15, 20]} angle={0.3} />
          <hemisphereLight
            color='#eeeeee'
            skyColor='#fffbbb'
            groundColor='#f5f5f5'
            intensity={0.8}
          />
          <mesh position={[0, 35, 35]}></mesh>

          <OrbitControls />
          <Stars />
          <Suspense fallback={null}>
             <Duck />
        </Suspense>
        </Canvas>
      </MashesContainer>
    </>
  );
}

// Scene.js
import React, { useRef } from 'react';
import { useGLTF } from '@react-three/drei';

export default function Model(props) {
  const group = useRef();
  const { nodes, materials } = useGLTF('/scene.gltf');
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <group rotation={[Math.PI / 2, 0, 0]}>
          <group
            position={[0, 173.29, -2.92]}
            rotation={[-Math.PI / 2, 0, 0]}
            scale={[0.9, 1.09, 1.02]}>
            <mesh
              geometry={nodes.defaultMaterial.geometry}
              material={materials.material}
            />
          </group>
        </group>
      </group>
    </group>
  );
}

useGLTF.preload('/scene.gltf');

then I got an error message Could not load /scene.gltf: undefined I don't know why this error occurs please Help me🙏🙏🙏

[joshuaellis]

I don't think Scene.js should be in public, this could cause issues. I would move it to a component folder...

[zerozoo-a]

I tried it, but it's the same thx for your help!

[joshuaellis]

If you're able to make a little codesandbox I could have a better look 😄

[zerozoo-a]

codesandboxLink

omg it's worked..! but on my pc occurred error..I'm confused 🤔

[joshuaellis]

it could be something to do with the webpack config. However, if you're using cra then im not sure.

[zerozoo-a]

thx for your advice!

[drcmda]

first step is to pack the gltf, it is wasteful otherwise:

npx gltf-pipeline -i input.gltf -o output.glb --draco.compressionLevel=10

then you can use http://gltf.pmnd.rs/ or look into docs, it's always the same, glb goes into public, everything else will just work.

[zerozoo-a]

thx for your advice! I will try it!

[joshuaellis]

Everything else doesn't just work 😅 bundlers need to be programmed to know where to look for the public folders etc.

[zerozoo-a]

I have solve this problem🥳! if you are not use CRA but use webpack, your webpack config need to add some below code in your webpack.config.js file
module: { rules: [ { test: /\.(glb|gltf)$/, use: [ { loader: 'file-loader', options: { outputPath: 'assets/models/' } } ] }, ] }

[Nemskri]

How to use webpack, where is this webpack.config.js?

[tamg]

I have the exact issue. Seems like need to modify the webpack config but since i am using CRA app may have to 'eject' or use something like craco...