How to create a 3d grid room like this

Questions
1

Hi everyone,
I’m new to Three.js, and I’ve been spending quite a bit of time trying to figure out how to create a 3D grid room like this site
chrome-capture-2024-9-6-ezgif.com-optimize

but I’m not sure where to start. I’ve gone through some tutorials and documentation, but I feel a bit stuck. Could anyone guide me or point me to some examples that could help me build a basic 3D grid room? Any advice or resources would be really appreciated!

Thanks in advance!

2

To get unstuck, try to decompose the room into smaller and hopefully easier pieces. For example:

  • learn how to draw an empty room with just the black lines
  • learn how to draw a square with an image in it
  • learn how to place such an object at desired position & orientation in the scene
  • combine what you have learned to build a room like you want

Good luck with your project.

I often post links to this and that.

4 Likes
3

White color of scene.fog, walls with line geometry, pictures with plane geometry and rotation, camera moving/

1 Like
4

A slightly deformed CylinderGeometry with re-computed UVs, modified MeshBasicMaterial with a texture atlas :thinking:

изображение
изображение1920×1080 170 KB

6 Likes
5

I’m interested in this as well – how to create a wireframe of a model made up of rectangles instead of triangles?

6

That is a reincarnation of a movie published in 1933:

2 Likes
7

You can simply create this room with css: add 4 divs on edges of the screen and turns them 90deg around the edges. The content inside them must be repeated twice - then you can simply move it along the blocks whith the cycled css animation. Or move the blocks along the z-axis. The fog effect can be created with a css mask of two “perpendicular” gradients applied to the main container:

mask-image: linear-gradient(#fff, transparent, #fff), linear-gradient(90deg, #fff, transparent, #fff)
2 Likes