Three.js Demos
Three.js Demos

Interactive 3D Bar Chart in Three.js

Interactive Three.js 3D bar chart for dataset comparison with animated transitions, hover feedback, dynamic scaling, and orbitable camera controls for exploratory data visualization.

Key topics: three.js, 3d bar chart, data visualization, dataviz, interactive chart, business intelligence

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.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
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