Next.js部署至Vercel后无法加载GLTF模型场景求助

本地开发环境加载GLTF模型完全正常，但部署至Vercel后，应用弹出以下错误：

Application error: a client-side exception has occurred (see the browser console for more information)

浏览器控制台显示具体错误：

Failed to load resource: the server responded with a status of 404 ()

Error: Could not load /Skull/scene.gltf: fetch for "..." responded with 404: )

相关代码 #

SkullScene组件

import { useGLTF } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import gsap from 'gsap'
import { useEffect, useState } from 'react'

export default function SkullScene () {
  const gltf = useGLTF("/Skull/scene.gltf")
  const [isRotatable, setIsRotatable] = useState(false)

  useEffect(() => {
    gltf.scene.scale.set(800,800,800)
    gltf.scene.rotation.set(0.3,0,0)
    gltf.scene.position.set(0,0,0)
    if(gltf.scene){
      gsap.to(gltf.scene.scale, { duration:10, x: '-=750', y:'-=750', z:"-=750", delay: 2})
    }
    setTimeout(()=>setIsRotatable(true),13000)
  },[gltf.scene])

  useFrame(()=>{
    if(isRotatable){
      gltf.scene.rotation.y += 0.003
    }
  })

  return (
      <primitive object={gltf.scene}/>
  )
}

BannerScene组件

import React, { useState } from 'react'
import { useThree } from '@react-three/fiber'
import dynamic from "next/dynamic";

const SkullScene = dynamic(() => import("./SkullScene"), {
  ssr: false,
});

const BannerScene = () => {
  const { viewport } = useThree()

  return (
    <group scale={viewport.width / 550}>
      <SkullScene/>
    </group>
  )
}

export default BannerScene;

Banner组件

import { Canvas } from "@react-three/fiber";
import { lazy, Suspense } from "react";

const BannerScene = lazy(() => import("./BannerScene"));

export const Banner = () => (
    <div className="h-screen w-full relative text-gray-50 bg-gradient-radial from-[#f7c160]/10 via-transparent to-transparent">
      <Suspense fallback="loading">
          <Canvas id='canvas' camera={{ fov: 75, near: 0.1, far: 1000, position: [0, 0, 180] }}>
            <ambientLight />
            <directionalLight position={[-10, 20, 5]} intensity={2} color="#b8912f"/>
            <directionalLight position={[10, 20, 10]} intensity={2} color="#b8912f"/>
            <BannerScene/>
          </Canvas>
      </Suspense>
    </div>
)

Next.js配置文件

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // swcMinify: true,
  webpack (config, options) {
    config.module.rules.push({
      test: /\.(glb|gltf)$/,
      use: {
        loader: 'file-loader',
      }
    })
    return config
  }
}

module.exports = nextConfig

已尝试的无效方法 #

• 使用React懒加载lazy组件
• 使用next/dynamic禁用SSR
• 添加webpack的file-loader规则处理GLTF/GLB文件

解决方案 #

1. 放置模型到public目录：将包含scene.gltf的Skull文件夹移动到项目根目录的public文件夹下。Vercel会自动托管public目录下的所有静态资源，路径直接对应网站根目录。
2. 移除自定义webpack配置：Next.js内置了静态资源处理机制，手动添加file-loader会覆盖默认配置，导致资源路径处理异常，直接删除webpack相关配置即可。
3. 验证路径大小写：Vercel的文件系统区分大小写，确保代码中的路径/Skull/scene.gltf和实际文件目录/文件名大小写完全一致。
4. 检查模型依赖资源：如果模型包含纹理或其他附属文件，确保这些文件也一起放在Skull文件夹中，避免加载模型时缺失依赖导致的隐性错误。

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