Bring your data to life with interactive three-dimensional graphics. This demo showcases real-time 3D rendering using WebGL and Three.js.
Hardware-accelerated 3D graphics directly in your browser.
Smooth rotation, zooming, and mouse interactivity built-in.
The spinning cube you're seeing above is generated by this JavaScript code:
// Create scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
document.body.appendChild(renderer.domElement);
// Create cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({
color: 0x33ffcc,
roughness: 0.3,
metalness: 0.6
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Camera position
camera.position.z = 5;
// Animation loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.02;
renderer.render(scene, camera);
}
animate();
Use color codes or gradients
Animation rotation speed
A JavaScript library for WebGL, making it easier to create and display animated 3D computer graphics.
A JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser.
Scalable Vector Graphics for creating resolution-independent shapes and icons.