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

【问题标题】：Could not load gltf scene in deployed Nextjs app无法在已部署的 Nextjs 应用程序中加载 gltf 场景
【发布时间】：2023-01-31 01:28:52
【问题描述】：

我尝试将 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 import、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 是如何工作的，但它没有帮助。

希望有人知道解决方案！

【问题讨论】：

标签： webpack next.js loader gltf react-three-fiber

【解决方案1】：

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

【讨论】：

【解决方案2】：

在我的案例中有用的是（这个解决方案也适用于 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)

    ....
}

【讨论】：