Question

我正在尝试在nextjs应用程序中加载gltf文件。当我建立一个新的react应用程序项目时它可以正常工作，但是当我尝试在当前项目中使用nextjs应用程序运行它时，它无法正常工作。我配置了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:'http://127.0.0.1:5000'} },
        publicRuntimeConfig: {   publicRuntimeConfigValue: {apiUrl:process.env.apiUrl.trim()} },
        webpack: (config, options) => {   return config;   },exportTrailingSlash: true
    });

当我尝试显示模型时，在nextjs中出现此错误：

 Module parse failed: Unexpected token (2:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| {
>   "asset": {
|     "version": "2.0",
|     "generator": "Sketchup glTF Exporter v1.2.6 by Centaur"

我正在这样导入文件：

import React from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import fileGlb from './villa.gltf' // GLTF FILE

我该如何解决此问题？

在nextjs项目中加载gltf文件配置错误

0 个答案: