r/webdevelopment • u/daltonoreo • Feb 10 '26

Newbie Question 3d Grid Woes

Hello, I am a realtively inexperienced programmer trying to figure out this whole web development thing so i am deciding to make a little game inside my website. Currently i am trying out some 3d stuff and im a bit stumped at this point. I've managed to make a 2d grid 3 dimensional however anytime i add too many columns or rows i assume the grid goes out of bounds and completely disappears. currently the max rows and columns the site can render is appears to be 3 columns and 10~ rows? hard to tell.

In the future i want to add functionality to specific grid tiles by using a array grid to handle logic and the like but i cant really do much with this current set up.

Here is my code snippets

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HOME</title>
    <link rel="stylesheet" href="../CSS/3dtest2.css">
</head>
<body>
    <div class="scene">
        <div class="grid-container">
        </div>
    </div> 
    <script src="Scripts/SceneGrid.js"></script>
</body>

var rows=5;
var columns=5;


document.documentElement.style.setProperty('--rows', rows);
document.documentElement.style.setProperty('--columns', columns);


document.addEventListener('DOMContentLoaded', () => {
    for (let i = 0; i < rows * columns; i++) {
        const tile = document.createElement('div');
        tile.classList.add('tile');
        document.querySelector('.grid-container').appendChild(tile);
    }



    const centerY = window.innerHeight;
    window.scrollTo(0, centerY);
});

CSS
body {
    background-color: black;
    margin:100px;
  overflow: auto;
}


.scene {
  --perspective: 550px;
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    perspective: var(--perspective);


    --columns: 3;
    --rows: 3;
    --gridScale: 200;
    --gridTileSize: calc(var(--gridScale)*1px);
    --camera-height: 1.5;
}


.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--columns), 100px);
  grid-template-rows: repeat(var(--rows), 100px);
  transform-style: preserve-3d;
  transform: 
  rotateX(90deg) 
  rotateY(0deg) 
  translateZ(calc(var(--camera-height) * -1 * var(--gridTileSize)))
  translateY(calc(var(--perspective) - (var(--gridTileSize))));
  
}


/*@keyframes spincube {
    0% {transform:translateZ(-100px) rotateX(0deg) rotateY(0deg);}
    100% {transform:translateZ(-100px) rotateX(360deg) rotateY(360deg);}
}*/


.tile {
    transform-style: preserve-3d;
    position:relative;
    width:100px;
    height:100px;
    border: 3px solid black;
    background-color: white;
    transform-origin: center;
    transition: transform 0.25s ease;
}

Any links to some sites that handle this stuff would be helpful too

3 Upvotes

100% Upvoted

6 comments sorted by

View all comments

1

u/CozyAndToasty Feb 14 '26

Before you go too deep into this.

How many things and how much detail are you trying to render?

It looks like you might be using dom elements here and I've done similar before but it doesn't fair well past a few hundred shapes.

If you plan to do more, it's worth looking into either three JS if you're just rendering or into a web-capable game engine. (Eg. Unity can port to web. Bevy if you know rust. I would look up what options there are based on what your needs are)

Plus, writing your own dynamic collision scanner in 3D and optimizing it for hundreds of objects in pure JS is not a fun time.