Next.js和@react-three/drei – 类型错误：无法解析URL

huangapple
go评论103阅读模式
英文:

nextjs & @react-three/drei - TypeError: Failed to parse URL

问题

正在使用 @react-three/drei 构建 nextjs 应用程序，实现 3D 动画。gltf 文件位于 public 文件夹下的 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

英文:

I'm building a nextjs app with 3D animations using @react-three/drei.

I have a gltf file in the public folder, under the desktop_pc folder called scene. gltf.

The path from the project root is: /public/desktop_pc/scene.gltf.

When importing the gltf file into the useGLTF hook, I'm getting the error:

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

Github Repository - nextjs & @react-three/drei - TypeError: Failed to parse URL

This is the component code:

  1. import { useGLTF } from "@react-three/drei";
  2. import React from "react";
  4. const Computers = () => {
  5.   const computer = useGLTF("/desktop_pc/scene.gltf");
  6.   return <div>Computers</div>;
  7. };
  9. export default Computers;

These are my attempts so far (The links leads to the GitHub solution of them):

  1. Dynamic import - https://github.com/ItayTur/Portfolio/tree/invalid-url-error-dynamic-solution
  2. Lazy import - https://github.com/ItayTur/Portfolio/tree/invalid-url-error-lazy-solution
  3. Installing the Three & three-stdlib npm packages.
  4. Specify the exact path from the component to the file location.
  5. Adding a dot at the start of the path string.

答案1

得分: 1

Solution:

  1. 下载 three 和 react-three-fiber 包。
  2. 使用 @react-three/fiber 钩子: useLoader。
  • 而不是来自 @react-three/drei 的 useGLTF
  1. 用 Canvas 组件包装 GLTF 模型组件。
  1. import { Canvas } from "@react-three/fiber";
  2. import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
  3. import { useLoader } from "@react-three/fiber";
  5. const Computers = ({ isMobile = false }) => {
  6.   const gltf = useLoader(GLTFLoader, "/desktop_pc/scene.gltf");
  8.   return (
  9.     <group>
  10.       <primitive
  11.         scale={isMobile ? 0.7 : 0.75}
  12.         position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
  13.         rotation={[-0.01, -0.2, -0.1]}
  14.         object={gltf.scene}
  15.       />
  16.     </group>
  17.   );
  18. };
  20. const ComputersCanvas = () => {
  21.   return (
  22.     <Canvas>
  23.       <Computers />
  24.     </Canvas>
  25.   );
  26. };
  28. export default ComputersCanvas;
  1. 用作其他组件一样
  1. const Hero = () => {
  2.   return (
  3.     <section className={`relative w-full h-screen mx-auto`}>
  4.       <ComputersCanvas />
  5.     </section>
  6.   );
  7. };
  9. export default Hero;
  10. }

GitHub 链接:

  1. 首次工作提交
  2. 完整 PR
英文:

Solution:

  1. Download three and react-three-fiber packages.
  2. Use the @react-three/fiber hook: useLoader.
  • NOT useGLTF from @react-three/drei
  1. Wrap the GLTF model component with a Canvas component.
  1. import { Canvas } from &quot;@react-three/fiber&quot;;
  2. import { GLTFLoader } from &quot;three/examples/jsm/loaders/GLTFLoader&quot;;
  3. import { useLoader } from &quot;@react-three/fiber&quot;;
  5. const Computers = ({ isMobile = false }) =&gt; {
  6.   const gltf = useLoader(GLTFLoader, &quot;/desktop_pc/scene.gltf&quot;);
  8.   return (
  9.     &lt;group&gt;
  10.       &lt;primitive
  11.         scale={isMobile ? 0.7 : 0.75}
  12.         position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
  13.         rotation={[-0.01, -0.2, -0.1]}
  14.         object={gltf.scene}
  15.       /&gt;
  16.     &lt;/group&gt;
  17.   );
  18. };
  20. const ComputersCanvas = () =&gt; {
  21.   return (
  22.     &lt;Canvas&gt;
  23.       &lt;Computers /&gt;
  24.     &lt;/Canvas&gt;
  25.   );
  26. };
  28. export default ComputersCanvas;
  1. Use as any other component
  1. const Hero = () =&gt; {
  2.   return (
  3.     &lt;section className={`relative w-full h-screen mx-auto`}
  4.       &lt;ComputersCanvas /&gt;
  5.     &lt;/section&gt;
  6.   );
  7. };
  9. export default Hero;
  10. }

GitHub Links:

  1. First working commit
  2. Full PR

huangapple
  • 本文由 发表于 2023年4月6日 22:04:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/75950437.html
  • 3d
  • gltf
  • next.js
  • react-three-drei
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定