Three.js Demos A collection of Three.js Demos

3D Bar Chart

Interactive 3D bar chart with multiple datasets, animations, and hover effects.

What this code does

- Dynamic Dataset Switching: toggle between sales, traffic, and revenue datasets with different data patterns.
- 3D Bar Geometry: each bar uses BoxGeometry with height based on data values and realistic shadows.
- Interactive Hover Effects: bars highlight and elevate when mouse hovers, showing data values.
- Bounce Animation: bars animate in with staggered timing and elastic easing for engaging presentation.
- Lighting System: directional and ambient lighting with shadow mapping for realistic 3D appearance.
- Data Binding: chart automatically scales bar heights based on maximum value in each dataset.
- Camera Controls: orbit controls allow 360° inspection of the chart from any angle.
- GUI Controls: real-time switching between datasets, animation toggle, and chart reset functionality.

JavaScript (plain)

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

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

// Lighting
const ambientLight = new THREE.AmbientLight(0x404040, 0.3)
scene.add(ambientLight)

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
directionalLight.position.set(10, 10, 5)
directionalLight.castShadow = true
scene.add(directionalLight)

// Sample data
const data = [12, 19, 8, 15, 25, 18, 22, 16]
const maxValue = Math.max(...data)

// Create bars
data.forEach((value, index) => {
  const barHeight = (value / maxValue) * 6
  const geometry = new THREE.BoxGeometry(0.8, barHeight, 0.8)
  const material = new THREE.MeshLambertMaterial({ color: 0x4f83cc })
  const bar = new THREE.Mesh(geometry, material)
  bar.position.x = (index - data.length / 2) * 1.2
  bar.position.y = barHeight / 2
  bar.castShadow = true
  scene.add(bar)

})

// Controls
const controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

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