Three.js Demos
Three.js Demos

3D Tetris

Stacking blocks in three dimensions — a spatial reasoning puzzle in a glass container.

What this code does

- 3D Grid: A 5x5x12 grid where pieces fall from the top into a translucent glass container.
- Rotation: Rotate pieces around the X and Y axes to find the perfect fit in the vertical space.
- Line Clearing: Fully filling a horizontal slice clears it and moves everything above down.
- Controls: WASD for horizontal movement, QE for rotation, Space for hard drop.

JavaScript Implementation

ES6+ 
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000)
camera.position.set(0, 10, 15)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

const grid = Array.from({ length: 12 }, () => Array.from({ length: 5 }, () => Array(5).fill(null)))
const container = new THREE.BoxHelper(new THREE.Mesh(new THREE.BoxGeometry(5, 12, 5)), 0x444444)
container.position.y = 5.5
scene.add(container)

scene.add(new THREE.AmbientLight(0xffffff, 0.5))
const light = new THREE.PointLight(0xffffff, 1)
light.position.set(10, 20, 10)
scene.add(light)

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()
← Back