nextjs & @react-three/drei - TypeError： 无法解析 URL

Question

我正在使用@react-three/drei构建一个带有3D动画的nextjs应用程序。

我在public文件夹下有一个gltf文件，在desktop_pc文件夹下称为scene. gltf。

项目根目录下的路径为:/public/desktop_pc/scene.gltf.

当将gltf文件导入useGLTF钩子时，我得到错误:

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

Github Repository - nextjs &@react-three/drei - TypeError: Failed to parse 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-stdlibnpm packages.
4. 指定组件到文件位置的确切路径。
5. 在路径字符串的开头添加点。

Answer 1

解决方案:

1. 下载three和react-three-fiber包。
2. 使用@react-three/fiber钩子:useLoader.

• 不useGLTF@react-three/drei

3. 用Canvas组件包裹GLTF模型组件

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. 全公关