Блог

Я пытаюсь загрузить файл gltf в приложение nextjs с помощью threejs.Но он не работает, когда я пытаюсь запустить его с приложением nextjs в проекте react.Вот как я настроил 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

Чтобы правильно обслуживать ресурсы с 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";