Sep 13, 2021 20:00:00

'My Room in 3D' that reproduces a 3DCG room that moves beautifully on the web with a combination of WebGL x Three.js

Creative developer

Bruno Simmons created a 3D model of his room using the 3DCG modeling software ' Blender ' and expressed it on a web browser using WebGL and Three.js 'My Room in 3D ' Is open to the public.

My Room in 3D
https://my-room-in-3d.vercel.app/

This is 'My Room in 3D'. At the top right of the screen are various parameters that allow you to change the appearance of the room.

'Baked' has options to change the appearance of the entire room, 'uNightMix' is the brightness of the room, 'uNaturalMix' is the color of the room (white or wood grain), and 'uLightTvStrength' is placed in the room. You can change the intensity of the light behind the TV, 'uLightDeskStrength' is the intensity of the light around the desk, and 'uLightPcStrength' is the intensity of the light around the PC.

With 'google Leds', you can change the color of the LED of the Google Home mini placed on the table in front of the TV.

'Loupedeck Buttons' allows you to change the coloring of the buttons under the monitor on your desk.

With 'coffee Steam', you can change the appearance and color of the smoke rising from the coffee placed on the desk.

With 'bouncing Logo', you can fine-tune the movement and size of the

'three.js journey ' logo that moves around the TV.

You can see how you are actually tinkering with 'My Room in 3D' in the following movie.

I tried playing with 'My Room in 3D' that expresses a room with 3DCG on the web with WebGL x Three.js --YouTube


In addition, Mr. Simmons also released a photo of the actual room, and you can see that it looks almost the same as 'My Room in 3D'.

And as per requested, here is my room in real life for comparaison.

I had to do a sneaky one and put opposite walls in the same corner. Pic.twitter.com/zGpwGodmH0

— Bruno Simon (@bruno_simon) September 7, 2021

The process of making 'My Room in 3D' by Simmons is published on his Twitch channel, and you can see it from the following. Please note that 20 movies of the production process for 2 to 3 hours have been released, so if you check all of them, it will be quite long.

My Room in 3D --Part 1 --Twitch


Also, Simmons has released the source code of 'My Room in 3D' on GitHub, so if you are interested, please check it out.

GitHub --brunosimon / my-room-in-3d
https://github.com/brunosimon/my-room-in-3d