Virtual Art Museum built with Three js
7 points by dostoynikov
7 points by dostoynikov
My wife wanted a website for her artworks. While building the website, I suddenly had this urge to try building a virtual art museum to give her motivation. It turned out not bad. Put the rain mode on if you like cats btw.
I'm still trying to optimize the performance as I'm having random fps-drops on Android devices.
Let me know if you notice any bugs as this project is still in early build. It works best on PCs although tablets and smart phones are also good to go. I'm open to ideas to make it more beautiful.
With all due respect, the virtual museum in Firefox killed my (employer's) Mac M1 with 16gb of RAM.
With all due respect, the virtual museum in Firefox killed my (employer's) Mac M1 with 16gb of RAM.
That's really interesting. Have you tried on low mode? Becuse it even runs on Thinkpad x230 with i5 3320m and intel hd 4000 graphics. Could you please also try with Safari? I'm sure it should run easily on an M1 Macbook. If, still not, I will try to emulate the environment and look into it.
I'd love to read more about how it is built and designed.
It's three.js with vite, no game engine, and most of the look comes from custom shaders. The paintings are drawn in their own unlit layer so the lamps don't mess with their colors. My favorite part is the street windows, they're not images, a shader ray marches the view through the glass (trees, the quay, the bosphorus, maiden's tower) so it moves like a real window when you walk around. They and the visitors are SDFs meshed with marching cubes in web workers.
Sound is all generated with web audio, there are no audio files. exhibition data is just a json file and sharp converts the images to webp. The guestbook is a tiny python + sqlite thing, and it's hosted on hetzner with caddy and cloudflare.
The sculpture was the painful part. We only had 5 photos of it, so I got a base shape from trellis, then fought with python scripts and blender for days to make it match the photos. still not perfect.
I'm not a graphics programmer btw, I leaned on claude code a lot for this. wouldn't have gotten this far without it. happy to get into any part if you're curious
the sculpture was completely missing on mine. latest Firefox, win10 on oldish hardware
Hey, did you try different browser or maybe device? The whole museum is simple three js. Nothing really heavy. It might be something related to add-ons of the browser maybe :/
I think this is cool, but I couldn't enter the main gallery (using chrome on mac). Tried double clicking the doorway, sign above the door, etc.
I could only test it on Windows and Linux with Firefox and Brave both on very low spec devices as well. I will try to emulate a Mac environment to check Mac problem. Could you please try it with Safari? Mobile access also would work. I can see from the statistics that there are lots of Mac users already in the museum. So, trying different ways to access might work :/
You don't need to click to doorway. You just walk through it actually. What happened exactly when you tried to walk through the door?