无法在部署的Nextjs应用程序中加载gltf场景

Question

我试图将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: )

我的gltf模型组件如下所示：

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}/>
)
}

渲染模型的那个：

import React, { lazy, useState } from 'react'
import { useThree } from '@react-three/fiber'
import dynamic from "next/dynamic";
const SkullScene = dynamic(() => import("./SkullScene"), {
ssr: false,
});
// const SkullScene = lazy(() => import("./SkullScene"));

const BannerScene = () => {
const { viewport } = useThree()
return (
<group scale={viewport.width / 550}>
<SkullScene/>
</group>
)
}
export default BannerScene;

还有我的横幅：

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>
)

我尝试了lazyy导入，next/dynamic，但都不起作用。同样，在本地开发环境中，一切都很好。我还尝试了一个webpack配置：

/** @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

老实说，我真的不知道webpack是如何工作的，但它没有帮助。

希望有人知道解决方案！

Answer 1

在我的案例中起作用的是(这个解决方案也适用于useTexture(：

import { useGLTF } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import gsap from 'gsap'
import {  useEffect, useState } from 'react'
import SkullGLTF from "@/public/Skull/scene.gltf"
export default function SkullScene () {
const gltf = useGLTF(SkullGLTF.src)
const [isRotatable, setIsRotatable] = useState(false)
....
}

Answer 2

除非事先导入或需要，否则不能在生产中使用相对URL
尝试import modelSrc from '/Skull/scene.gltf'，然后像const gltf = useGLTF(modelSrc)一样直接在代码中使用它。