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

From creative developersBruno simmonsIt is a 3DCG modeling software “BlenderCreate a 3D model of your room usingWebGLWhenThree.jsExpressed in a web browser usingMy room in 3DIt 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 there are several 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 color of the buttons under the monitor on your desktop.

With “coffee steam”, you can change the appearance and color of the smoke that comes out of the coffee placed on the desktop.

In “Bouncing Logo”, “Bouncing Logo” moves on the TV.three.js tripYou can adjust the movement and size of the logo.

You can see how he is playing with “My Room in 3D” in the following movie.

Tried playing with “My Room in 3D” which expresses a room with 3DCG on the Web with WebGL x Three.js –YouTube

Also, Mr. Simmons also posted a photo of the actual room, and you can see that it looks almost the same as “My Room in 3D”.

Simmons’ “My Room in 3D” creation process is posted on his Twitch channel, and you can watch it below. Note that 20 movies have been released from the production process in 2-3 hours, so if you go through them all, it will be quite long.

My Room in 3D – Part 1 – Twitch

Also, Simmons has posted the source code for “My Room in 3D” on GitHub, so if you’re interested, check it out.

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