Nick
Nick
CCConvex Community
Created by Nick on 7/31/2024 in #support-community
Fetching the file url and then render the associated file
So I'm trying to load a 3d file from the convex storage but I cant get it to work. It’s a .splat file. I only need a valid url of it to render it, though I seem to fetch it wrong. I exactly followed the docs on file serving. I uploaded the file to convex and made a collection called „models“ and saved a document with the files storageId. `tsx "use client"; import { Canvas } from "@react-three/fiber"; import { CameraControls, Splat } from "@react-three/drei"; import { useQuery } from "convex/react"; // Ensure query is imported import { query } from "@/convex/_generated/server"; export default function Home() { const data = query({ args: {}, handler: async (ctx) => { const models = await ctx.db.query("models").collect(); return Promise.all( models.map(async (model) => ({ ...model, // If the message is an "image" its `body` is an `Id<"_storage">` ...(model.name === "kio" ? { url: await ctx.storage.getUrl(model.storageId) } : {}), })) ); }, }); return ( <main className="flex min-h-screen flex-col items-center justify-between h-screen"> <Canvas className="w-screen h-screen"> <CameraControls /> <Splat src={data.url} /> </Canvas> </main> ); }
5 replies