CODEWITHSUNDEEP
reactjsthree.jsvitereact-three-fiber
ajanng
ajanng

Reputation: 1

Why is my .glb file not included in the dist/assets folder in react.js and three.js?

I have created an app in react.js with Vitejs, I have included a 3D model with Theejs (.glb file). When I use npm run dev my 3D model works perfectly without errors, but when I run npm run build the 3D model is not included in the dist/assets folder, only js, css and images files are included. How can I fix it? I feel that there is something wrong with the vite configuration as the paths are well placed.

This is my vite.config.js file

export default defineConfig({
  plugins: [react()],
  
  root: './',     
    build: { 
      chunkSizeWarningLimit: 3000,      
       outDir: 'dist',
            },     
    publicDir: 'assets' ,
    

})```




and this is how I am loading my model in the component
const { nodes } = useGLTF("public/portal.glb")

Upvotes: 0

Views: 2534

Answers (1)

kimny
kimny

Reputation: 21

You can use explicit url import.

import modelSrc from 'model/yourmodel.glb?url';

then

const { nodes } = useGLTF(modelSrc);

The model file will be assigned in [outDir]/assets after build.

Upvotes: 2

Related Questions