Three.js Demos
Three.js Demos

Marble Maze

Tilt the mahogany board to guide the silver marble through a challenging logic maze.

What this code does

- Physics Simulation: Powered by `cannon-es` for realistic marble-wall collisions and gravity response.
- Tilt Mechanics: The board's tilt translates into gravity vector changes, affecting the marble's momentum.
- Visuals: Premium wood textures and metallic marble with real-time reflections and shadows.
- Interactive Controls: Use arrow keys (or keyboard mimics) to tilt the board; sensitivity is adjustable via GUI.

JavaScript Implementation

ES6+ 
const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0) })
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(0, 15, 12)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

const board = new THREE.Mesh(new THREE.BoxGeometry(10, 0.5, 10), new THREE.MeshStandardMaterial({ color: 0x8b4513 }))
scene.add(board)
const boardBody = new CANNON.Body({ mass: 0, shape: new CANNON.Box(new CANNON.Vec3(5, 0.25, 5)) })
world.addBody(boardBody)

const marble = new THREE.Mesh(new THREE.SphereGeometry(0.3), new THREE.MeshStandardMaterial({ color: 0xc0c0c0 }))
scene.add(marble)
const marbleBody = new CANNON.Body({ mass: 1, shape: new CANNON.Sphere(0.3), position: new CANNON.Vec3(0, 5, 0) })
world.addBody(marbleBody)

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)
  world.step(1/60)
  marble.position.copy(marbleBody.position)
  renderer.render(scene, camera)
}
animate()
← Back