es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Por qué mi archivo .glb no está incluido en la carpeta dist/assets en react.js y three.js?

¿Por qué mi archivo .glb no está incluido en la carpeta dist/assets en react.js y three.js?

31 Jul, 2023 Programación

He creado una aplicación en react.js con Vitejs, he incluido un modelo 3D con Theejs (.archivo glb). Cuando uso npm run dev, mi modelo 3D funciona perfectamente sin errores, pero cuando ejecuto npm run build, el modelo 3D no se incluye en la carpeta dist/assets, solo se incluyen archivos js, css e imágenes. ¿Cómo puedo solucionarlo? Siento que hay algo mal en la configuración de Vite, ya que las rutas están bien ubicadas.

Este es mi archivo vite.config.js

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

y así es cómo estoy cargando mi modelo en el componente:
const { nodes } = useGLTF(“public/portal.glb”)

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema parece estar relacionado con la configuración de construcción de Vite. Por defecto, Vite excluye los archivos que no están importados en ningún archivo JavaScript. Dado que el archivo .glb no se importa directamente en ninguno de los archivos JavaScript, se excluye de la construcción.

    Para solucionar este problema, puedes importar explícitamente el archivo .glb en tu código. Puedes crear un archivo JavaScript separado (por ejemplo, models.js) e importar el archivo .glb en él. Luego, exporta el objeto importado y impórtalo en tu componente.

    Aquí tienes un ejemplo de código:

    // models.js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();

export const portalModel = loader.load('/assets/portal.glb');

    // Tu componente
import { portalModel } from './models';

// ...

const { nodes } = useGLTF(portalModel);

    Alternativamente, puedes agregar la siguiente configuración en tu archivo vite.config.js para incluir todos los archivos en el directorio de assets:

    optimizeDeps: {
  include: [
    './assets/**/*',
  ],
}

    Esto garantizará que todos los archivos en el directorio de assets se incluyan en el paquete. Sin embargo, esto puede aumentar significativamente el tamaño de la construcción si tienes muchos archivos grandes en el directorio de assets.

    ¡Espero que esto te ayude! Avísame si tienes alguna pregunta adicional.

Comments are closed.