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

Showcase
, , ,
1

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 – Paul Brzeski

2

Update: I’ve switched to using postprocessing which has doubled the FPS on my laptop. It was a bit sus at 20 FPS before but I’m now getting 40 FPS with bloom on which is a great result! Especially cause there was a bit of work involved rebuilding the way I do effects but it was well worth it I think!

3

I agree with you
I have a good idea.
please call me via telegram(hansruby).

4

It would be cool to apply pointlights to the position of lights, monitors and bloom elements

5

Fair point! I thought I already had them but looks like I implemented DirectionalLights.

Prior to updating threejs* and implementing postprocessing the direction lights had a decent colour bleed that shaded the scene pink but now it’s gone to the expected grey and gotten a little darker.

6

Hi Paul!
I liked the overall Matrix/synthwave mood, and the transitions from main scene into individual screens was very smooth, congrats for that.
Please consider adding a WindowResize function for updating the camera matrix, there is plenty of them in official threejs examples. On mobile, when you turn from landscape to portrait you end up with the following:

Screenshot_20240505_123925_Samsung Internet
Screenshot_20240505_123925_Samsung Internet1080×2408 139 KB

P.S. Your ‘Our values’ section is great. I’m considering printing the last paragraph and distributing it for free to many people. Hugs from the distance

1 Like
7

Thanks Antonio! There is a WindowResize in place but it looks like it broke when I updated three.js to 163 and added postprocessing. Something to look into this week haha

Edit: Should be fixed now.