3D Virtual Office using Three.JS, Unreal Bloom, SSAO and GPU detection based scaler

Hey guys! Long time fan and user of Three.js here. My husband and I have been working hard on a relaunch of our digital studio which happens to include a Matrix/synthwave inspired 3D office scene.

I’ve been hard at work on on this one for a couple of months now and it’s been a huge load off my back finally showing it to the world! There’s probably tons of small things that could be looked at and now that this new 3D platform is up I’m planning to iterate and build on it.

Technical specs:

  • Three.js using esbuild. Was latest when I started but now am a few versions back…
  • Using a matrix style preloader to keep the user occupied while the hog of code is loaded up
  • Eleventy site using Pug templates to create two variants of each content page - one that is an actual HTML page in every way and another that is just the content for loading in an iFrame in the virtual monitor in the office scene

Any and all feedback is welcome! If you spot something that could be improved please let me know as specifically as you can so we can look into it!

Also if you have any questions about what’s going on here or how to do any of this hit me up! Always happy to help out a fellow coder :slight_smile:

Update: I’ve done a retrospective on this build on my blog: Building A Cool 3D website: Tips, Tricks and Lessons Learned | by Paul Brzeski | Oct, 2023 | Medium