How to make multiple Babylon.js or Three.js apps for a single website

78 Views Asked by At

I have a website with about 100 different pages. On each page, I would like to include a Babylon.js or Three.js 3D interactive app.

Now I've downloaded npm and babylonjs and built a small working app scaffolded by vite. I then build it with npm run build and it gives me a dist directory. I can copy that directory, paste it into my website's directory, then reference it in the header of a page, and load the app in the page. Everything works.

However, if I were to do this kind of thing for the entire website then every page would get its own dist, which would eat up memory. Is there a way to make a single distribution for the Babylon.js or Three.js code, which services the entire website, but then have a different app on each page (presumably kept in a single, small JavaScript or TypeScript file somewhere)?

I haven't been able to find a lot of explanation, in general, about how to take a build of an app and move it to a website -- most of what I've already done, I just did it by guessing, and it happened to work out. When I google for this, I don't see much that explains this part of the process. It might even help if I just knew some search terms to search for this kind of thing.

(I also am not sure that I want to do this with a CDN, because the website also uses PyScript and is built in Quarto, and so on. This means there are a lot of independent services processing the pages, so lots of opportunities for conflicts. I ran into a conflict like this when I tried to use a CDN for Three.js, which convinced me that I should try to build the apps as modules.)

0

There are 0 best solutions below