如何在Gatsby中用R3F正确导入.glb 3D文件？解决模块解析错误

尝试使用R3F上传.glb格式的3D文件时，遇到了ModuleParseError错误：提示模块解析失败，出现意外字符'☻'，当前无合适加载器处理该文件类型。

相关代码 #

Colibri.js #

import React, { useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import ColibriGlb from "./210604_Colibri.glb"

export default function Colibri({ ...props }) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF(ColibriGlb);
  const { actions } = useAnimations(animations, group);
  return (
    <group ref={group} {...props} dispose={null}>
      .
      .
      .
    </group>
  );
}

ColibriScene.js #

import React, { Suspense, useEffect } from 'react'
import { Canvas, useThree } from '@react-three/fiber'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as androsFetalStyles from "../css/AndrosFetal.module.css"
import Colibri from "./Colibri/Colibri.js";

const CameraController = () => {
  const { camera, gl } = useThree();
  useEffect(
    () => {
      const controls = new OrbitControls(camera, gl.domElement);

      controls.minDistance = 0;
      controls.maxDistance = 5;
      return () => {
        controls.dispose();
      };
    },
    [camera, gl]
  );
  return null;
};

function ColibriScene() {
  return (
    <div className={androsFetalStyles.container}>
      <Canvas frameloop='demand'>
        <directionalLight color="red" position={[0, 0, 5]} />
        <Suspense fallback={null}>
          <Colibri/>
        </Suspense>
        <mesh>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
      </Canvas>
    </div>
  )
}

export default ColibriScene

Acerca.js #

import * as React from "react"
import Layout from "../components/Layout"
import SEO from "../components/SEO"
import * as acercaStyles from "../css/Acerca.module.css"
import ColibriScene from "../components/ColibriScene"

const AcercaPage = () => {
  return (
    <Layout>
      <SEO
        title="Acerca(te) | metaxis.digital"
        description="Filosofía y computación"
        image="metaxis.jpg"
        metaurl="https://metaxis.digital/Acerca"
        type="website"
        author="Óscar A. Montiel"
      />
        <main className={acercaStyles.container}>
          <h2 className={acercaStyles.title}>Acerca</h2>
          <p className={acercaStyles.text}>
            <b>metaxis.digital</b> es un blog dedicado a la difusión de ideas que entrelazan la filosofía y la computación y cómo es que interactúan una con la otra a través de una perspectiva metamoderna.
          </p>
          <ColibriScene />
        </main>
    </Layout>
  )
}

export default AcercaPage

这个错误的核心是webpack没有配置能处理.glb二进制文件的加载器，以下是两种可行的解决方式：

方式一：配置webpack加载器 #

• 首先安装文件加载器（如果使用webpack 5+，可跳过安装，直接使用内置的asset模块）：

  npm install file-loader --save-dev
  

• 根据项目类型配置webpack：
  • 自定义webpack项目：在webpack.config.js中添加规则：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(glb|gltf)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  outputPath: 'assets/models/'
                }
              }
            ]
          }
        ]
      }
    }
    

  • Create React App（CRA）项目：CRA默认不暴露webpack配置，需使用craco或react-app-rewired修改配置。以craco为例：
    1. 安装craco：npm install @craco/craco --save-dev
    2. 创建craco.config.js：

       module.exports = {
         webpack: {
           configure: (webpackConfig) => {
             webpackConfig.module.rules.push({
               test: /\.(glb|gltf)$/,
               use: [
                 {
                   loader: 'file-loader',
                   options: {
                     outputPath: 'static/media/'
                   }
                 }
               ]
             });
             return webpackConfig;
           }
         }
       };
       

    3. 修改package.json中的启动脚本：

       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
       

方式二：直接通过静态路径加载 #

无需配置加载器，将.glb文件放入项目的public文件夹，修改Colibri.js中的代码，直接传入文件路径：

import React, { useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";

export default function Colibri({ ...props }) {
  const group = useRef();
  // 直接传入public文件夹下的文件路径
  const { nodes, materials, animations } = useGLTF("/210604_Colibri.glb");
  const { actions } = useAnimations(animations, group);
  return (
    <group ref={group} {...props} dispose={null}>
      .
      .
      .
    </group>
  );
}

内容的提问来源于stack exchange，提问作者dawn