gltf file is not showing in react nextjs - reactjs

Question

I am trying to load a gltf file in a nextjs application using threejs.But its not working when i try to run it with nextjs application on react project.This is how i configured next.js with webpack:
const withCSS = require('#zeit/next-css');
const withImages = require('next-images');
const withPlugins = require('next-compose-plugins');
module.exports = withPlugins([
[withCSS, { cssModules: true }],
[withImages],
], {
serverRuntimeConfig: { serverRuntimeConfigValue: 'test server' },
publicRuntimeConfig: { publicRuntimeConfigValue: {apiUrl:process.env.apiUrl.trim()} },
webpack: (config, options) => {
config.module.rules.push({
test: /\.(glb|gltf)$/,
use: {
loader: 'file-loader',
}
})
return config; },exportTrailingSlash: true
});
I am importing the file like this:
import React from 'react';
import * as THREE from 'three';
import GLTFLoader from 'three-gltf-loader';
import TransformControls from './TransformControls.js'
import test2 from "../../../static/images/villa.gltf";
I wrote this function in componentDidmount to load gltf:
this.loader.load(test2, gltf => {
this.gltf = gltf.scene
// ADD MODEL TO THE SCENE
this.scene.add(gltf.scene);
});
This is Network tab when rendering the gltf file

Answer 1

In order to serve assets correctly with file-loader, you have to configure with correct location of _next static dir as following:
{
loader: 'file-loader',
options: {
publicPath: "/_next/static/images", // the path access the assets via url
outputPath: "static/images/", // where to store on disk
}
}
But looks like you might need to set up to load .bin file as well and keep the original name since it will be loaded as the .load function is called:
webpack: (config) => {
config.module.rules.push({
test: /\.(glb|gltf)$/,
use: {
loader: 'file-loader',
options: {
publicPath: "/_next/static/images",
outputPath: "static/images/",
}
},
});
// For bin file
config.module.rules.push({
test: /\.(bin)$/,
use: {
loader: 'file-loader',
options: {
publicPath: "/_next/static/images",
outputPath: "static/images/",
name: '[name].[ext]' // keep the original name
}
},
});
}
And also import the bin file in your component too:
import "../../../static/images/villa.bin";