Gravity Cubes

What this code does

- Gravity Simulation: cubes fall under customizable gravitational acceleration.
- Collision Detection: ground and wall collisions with realistic bounce physics.
- Restitution: adjustable bounciness factor for different material properties.
- Auto Spawning: continuous cube generation with configurable spawn rate.
- Physics Properties: each cube has individual velocity and angular momentum.
- Boundary Walls: transparent walls contain the physics simulation area.

JavaScript (plain)

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

renderer.shadowMap.enabled = true
document.querySelector('#app').appendChild(renderer.domElement)

let cubes = []
let gravity = -0.02
let groundHeight = -5

function createCube() {
  const geometry = new THREE.BoxGeometry(1, 1, 1)
  const material = new THREE.MeshStandardMaterial({
    color: Math.random() * 0xffffff
  })
  const cube = new THREE.Mesh(geometry, material)

  cube.position.set(
    (Math.random() - 0.5) * 10,
    10 + Math.random() * 5,
    (Math.random() - 0.5) * 10
  )

  cube.userData = {
    velocity: new THREE.Vector3(0, 0, 0),
    angularVelocity: new THREE.Vector3(
      (Math.random() - 0.5) * 0.1,
      (Math.random() - 0.5) * 0.1,
      (Math.random() - 0.5) * 0.1
    )
  }

  scene.add(cube)

  cubes.push(cube)
}

function animate() {
  requestAnimationFrame(animate)

  cubes.forEach(cube => {
    cube.userData.velocity.y += gravity
    cube.position.add(cube.userData.velocity)

    if (cube.position.y - 0.5 < groundHeight) {
      cube.position.y = groundHeight + 0.5
      cube.userData.velocity.y *= -0.7
    }
  })

  renderer.render(scene, camera)
}
animate()