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>
);
}
