atom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Atom Representation</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Scene setup
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 });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Lights
const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
// Nucleus (Yello Sphere)
const nucleusGeometry = new THREE.SphereGeometry(1, 32, 32);
const nucleusMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const nucleus = new THREE.Mesh(nucleusGeometry, nucleusMaterial);
scene.add(nucleus);
// Electrons
const electronCount = 3;
const electrons = [];
const electronRadii = [2, 2.5, 3, 3.5]; // Different radii for each electron
for (let i = 0; i < electronCount; i++) {
const electronGeometry = new THREE.SphereGeometry(0.2, 16, 16);
const electronMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff });
const electron = new THREE.Mesh(electronGeometry, electronMaterial);
electrons.push(electron);
scene.add(electron);
}
// Camera position
camera.position.z = 7;
// Animation loop
function animate() {
requestAnimationFrame(animate);
const time = Date.now() * 0.001;
electrons.forEach((electron, index) => {
const radius = electronRadii[index];
electron.position.x = radius * Math.cos(time + index);
electron.position.y = radius * Math.sin(time + index);
electron.position.z = 0; // Keep it in the XY plane
});
renderer.render(scene, camera);
}
animate();
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>