gltf 文件没有显示在 react nextjs 中

Question

我正在尝试使用 threejs.But 在 nextjs 应用程序中加载 gltf 文件，当我尝试运行它与 nextjs 应用程序反应时它不起作用 project.This 我是如何配置的next.js 使用 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
});

我正在这样导入文件：

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

gltf 文件没有显示在 react nextjs 中

gltf file is not showing in react nextjs

three.js

reactjs

gltf

next.js