在react nextjs中没有显示gltf文件

Question

我正在尝试使用threejs.But在nextjs应用程序中加载一个gltf文件当我尝试在react上使用nextjs应用程序运行它时，它不工作project.This是我如何与webpack配置next.js的：

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
});

我像这样导入文件：

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";

我在componentDidmount中编写了这个函数来加载gltf：

   this.loader.load(test2, gltf => {
            this.gltf = gltf.scene

            // ADD MODEL TO THE SCENE
            this.scene.add(gltf.scene);
          

         });

这是渲染gltf文件时的网络选项卡

​

​

Answer 1

为了使用file-loader正确服务资产，您必须配置_next静态目录的正确位置，如下所示：

{
  loader: 'file-loader',
  options: {
    publicPath: "/_next/static/images", // the path access the assets via url
    outputPath: "static/images/", // where to store on disk
  }
}

但看起来您可能还需要设置加载.bin文件并保留原始名称，因为它将在调用.load函数时加载：

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
      }
    },
  });
}

还可以在组件中导入bin文件：

import "../../../static/images/villa.bin";