nextjs & @react-three/drei - 类型错误：无法解析 URL

Question

我正在使用

nextjs

构建一个带有 3D 动画的

@react-three/drei

应用程序。

我在

gltf

文件夹中有一个

public

文件，在

desktop_pc

文件夹下，名为

scene. gltf

.

从项目根目录开始的路径是：

/public/desktop_pc/scene.gltf

.

将

gltf

文件导入

useGLTF

钩子时，出现错误：

TypeError: Failed to parse URL from /desktop_pc/scene.gltf

Github 存储库 - nextjs 和 @react-three/drei - 类型错误：无法解析 URL

这是组件代码：

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

const Computers = () => {
  const computer = useGLTF("/desktop_pc/scene.gltf");
  return <div>Computers</div>;
};

export default Computers;

这些是我到目前为止的尝试（链接指向它们的 GitHub 解决方案）：

1. 动态导入-https://github.com/ItayTur/Portfolio/tree/invalid-url-error-dynamic-solution
2. 延迟导入 - https://github.com/ItayTur/Portfolio/tree/invalid-url-error-lazy-solution
3. 安装

   Three

   和

   three-stdlib

   npm 包。
4. 指定从组件到文件位置的确切路径。
5. 在路径字符串的开头添加一个点。

Answer 1

解决方案：

1. 下载

   three

   和

   react-three-fiber

   包。
2. 使用

   @react-three/fiber

   挂钩：

   useLoader

   .

• 不是

  useGLTF

  来自

  @react-three/drei

3. 用

   GLTF

   组件包裹

   Canvas

   模型组件。

import { Canvas } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useLoader } from "@react-three/fiber";

const Computers = ({ isMobile = false }) => {
  const gltf = useLoader(GLTFLoader, "/desktop_pc/scene.gltf");

  return (
    <group>
      <primitive
        scale={isMobile ? 0.7 : 0.75}
        position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
        rotation={[-0.01, -0.2, -0.1]}
        object={gltf.scene}
      />
    </group>
  );
};

const ComputersCanvas = () => {
  return (
    <Canvas>
      <Computers />
    </Canvas>
  );
};

export default ComputersCanvas;

4. 用作任何其他组件

const Hero = () => {
  return (
    <section className={`relative w-full h-screen mx-auto`}
      <ComputersCanvas />
    </section>
  );
};

export default Hero;
}

GitHub 链接：

1. 第一次工作提交
2. 完整公关