如何显示存储在 Firebase 存储中的 3d 模型？

Question

我正在创建一个有助于共享 3d 模型的 React Web 应用程序，但我遇到了这个问题。当我尝试使用参考下载链接渲染 3dmodel 文件（.obj、.gltf...）时，我使用了 React-Three 库。

我意识到无法从 URL 渲染 3D 模型，必须在本地下载文件

如果我想在浏览器上显示模型而不需要在客户端下载它们，我想知道最好的解决方案

`

import React, { useState, useEffect, useContext } from "react";
import { useParams } from "react-router-dom";
import { collection, getDoc, doc, onSnapshot } from "firebase/firestore";
import { db } from "../firebase-config";
import { AuthContext } from "../context/AuthContext";
import { Canvas } from "@react-three/fiber";
import { useGLTF } from "@react-three/drei";

const Preview = () => {
  const { id } = useParams();
  const [docData, setDocData] = useState(null);
  const { currentUser } = useContext(AuthContext);
 
//loading the model

  function Model(props) {
    const { scene } = useGLTF(docData.file);
    return <primitive object={scene} {...props} />;
  }
//fetching the data
  useEffect(() => {
    const fetchDocData = async () => {
      try {
        const userUid = currentUser.uid;
        const docRef = doc(db, "users", userUid, "submissions", id);
        const docSnapshot = await getDoc(docRef);
        if (docSnapshot.exists()) {
          setDocData(docSnapshot.data());
        } else {
          console.log("Document does not exist.");
        }
      } catch (error) {
        console.log("Error fetching document:", error);
      }
    };

    fetchDocData();
  }, [id]);

  return (
    <div>
      <h2>Preview</h2>
      {docData && (
        <div>
          <p>file: {docData.file}</p>
          <p>Name: {docData.name}</p>
          <Canvas>
            <Model scale={0.01} />
          </Canvas>
        </div>
      )}
    </div>
  );
};

export default Preview;

docData.file 看起来像这样“https://firebasestorage.googleapis.com/v0/b/....”

Answer 1

您好，问题解决了吗？我也被这个问题困扰了。。。请问有解决办法吗？它向我展示了：

无法加载https://firebasestorage.googleapis.com/v0..。 : 获取失败