Three.js Demos
Three.js Demos

Breakout 3D

Smash a wall of colorful 3D bricks with a bouncing ball and a sliding paddle.

What this code does

- Brick Wall: A grid of 40 colorful 3D bricks that disappear on impact with the ball.
- Paddle Control: Smooth mouse-driven paddle movement with spin mechanics based on hit offset.
- Logic: Custom collision resolution for precise ball-brick interaction in 3D.
- Gameplay: Press Space to launch the ball and begin clearing the wall.

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 paddle = new THREE.Mesh(new THREE.BoxGeometry(3, 0.5, 1), new THREE.MeshStandardMaterial({ color: 0x00ff00 }))
paddle.position.z = 8
scene.add(paddle)

const ball = new THREE.Mesh(new THREE.SphereGeometry(0.3), new THREE.MeshStandardMaterial({ color: 0xffffff }))
scene.add(ball)

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

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